As redes de fornecimento de conteúdo de imagens (CDNs) são excelentes para otimizar imagens para a Web. Mudar seu site para um CDN de imagem pode gerar uma economia de 40% a 80% no tamanho do arquivo de imagem. Na maioria dos casos, eles podem otimizar suas imagens melhor do que um script de otimização de imagem no momento de build.
O que é um CDN de imagem?
Os CDNs de imagem são especializados em transformar, otimizar e entregar imagens. Você também pode pensar nelas como APIs para acessar e manipular as imagens usadas no seu site. Para imagens carregadas de uma CDN de imagem, um URL de imagem indica não apenas qual imagem carregar, mas também parâmetros como tamanho, formato e qualidade. Isso permite criar variações de uma imagem para diferentes casos de uso.
As CDNs de imagens são diferentes dos scripts de otimização de imagens no build, porque elas criam novas versões de imagens conforme necessário. Como resultado, as CDNs geralmente são mais adequadas para criar imagens altamente personalizadas para clientes individuais do que os scripts de build.
Como as CDNs de imagem usam URLs para indicar opções de otimização
Os URLs de imagem usados por CDNs de imagem transmitem informações importantes sobre uma imagem e as transformações e otimizações que devem ser aplicadas a ela. Os formatos de URL variam dependendo do CDN de imagem que você está usando, mas, de modo geral, todos têm recursos semelhantes. Confira alguns dos recursos mais comuns.
Origem
Uma CDN de imagem pode ser hospedada no seu próprio domínio ou no domínio da sua CDN de imagem. As CDNs de imagens de terceiros geralmente oferecem a opção de usar um domínio personalizado por uma taxa. Usar seu próprio domínio facilita a troca de CDNs de imagem mais tarde, porque não será necessário fazer mudanças no URL.
O exemplo anterior usa o domínio do CDN de imagem ("example-cdn.com") com um subdomínio personalizado, em vez de um domínio personalizado.
Imagem
Geralmente, as CDNs de imagens podem ser configuradas para recuperar imagens automaticamente dos
locais existentes quando necessário. Esse recurso geralmente é alcançado
ao incluir o URL completo da imagem atual no URL da imagem
gerada pelo CDN de imagem. Por exemplo, um URL pode ser parecido com
este: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Esse URL vai recuperar e otimizar a imagem que existe em https://flowers.com/daisy.jpg.
O formato de arquivo solicitado (JPG, no exemplo) pode não ser o mesmo que o
formato de arquivo de imagem retornado (WebP, no exemplo). O cabeçalho HTTP content-type
informa ao navegador em qual formato o URL está para que ele possa processá-lo
adequadamente. Isso pode causar confusão se o arquivo for salvo no disco e usado por
outro programa que espera que o formato corresponda à extensão do arquivo.
Outra maneira amplamente aceita de fazer upload de imagens para uma CDN de imagens é enviá-las em uma solicitação POST HTTP para a API da CDN de imagens.
Chave de segurança
Uma chave de segurança impede que outras pessoas criem novas versões das suas imagens. Com esse recurso ativado, cada nova versão de uma imagem exige uma chave de segurança única.
Se alguém tentar mudar os parâmetros do URL da imagem, mas não fornecer uma chave de segurança válida, não será possível criar uma nova versão. O CDN de imagens cuida dos detalhes de geração e rastreamento de chaves de segurança para você.
Transformações
As CDNs de imagem oferecem dezenas, e em alguns casos centenas, de diferentes transformações de imagem. Essas transformações são especificadas na string de URL, e não há restrições para usar várias transformações ao mesmo tempo. Para a performance da Web, as transformações de imagem mais importantes são tamanho, densidade de pixels, formato e compactação. Essas transformações são a razão pela qual mudar para uma CDN de imagem geralmente torna os arquivos de imagem do site menores.
Como geralmente há uma configuração objetivamente melhor para transformações de desempenho, alguns CDNs de imagem oferecem suporte a um modo "automático" para essas transformações. Por exemplo, em vez de especificar que as imagens sejam transformadas no formato WebP, você pode permitir que o CDN selecione e ofereça automaticamente o formato ideal. Um CDN de imagem pode determinar a melhor maneira de transformar uma imagem usando os seguintes indicadores, entre outros:
- Dicas do cliente, por exemplo, largura da janela de visualização, DPR e largura da imagem.
- O cabeçalho
Save-Data - O cabeçalho de solicitação User-Agent
- A API Network Information
Por exemplo, o CDN de imagem pode fornecer AVIF para um navegador Chrome, WebP para um navegador Edge e JPEG para um navegador muito antigo. As configurações automáticas são populares porque permitem aproveitar a experiência das CDNs de imagens na otimização de imagens sem precisar mudar o código para adotar novas tecnologias quando a CDN de imagens começar a oferecê-las.
Tipos de CDNs de imagem
Há duas categorias principais de CDNs de imagem: autogerenciadas e gerenciadas por terceiros.
CDNs de imagem autogerenciadas
As CDNs autogerenciadas podem ser uma boa escolha para sites com equipes de engenharia que se sentem confortáveis em manter a própria infraestrutura.
- O Thumbor é o CDN de imagem autogerenciado mais conhecido. Ele é de código aberto e sem custo financeiro, mas tem menos recursos do que a maioria dos CDNs comerciais, e a documentação dele é um pouco limitada. Os sites que usam o Thumbor incluem a Wikipedia, o Square e o 99designs. Consulte Como instalar o CDN de imagens do Thumbor para instruções de configuração.
- Imaginário
- Imagor
CDNs de imagens de terceiros
As CDNs de imagem de terceiros oferecem CDNs de imagem como serviço. Assim como os provedores de nuvem fornecem servidores e outra infraestrutura mediante uma taxa, os CDNs de imagem oferecem otimização e entrega de imagens mediante uma taxa. Como as CDNs de imagens de terceiros mantêm a tecnologia subjacente, geralmente é possível começar a usar uma com bastante rapidez, embora uma migração completa para um site grande possa levar mais tempo. As CDNs de imagens de terceiros geralmente têm preços com base nos níveis de uso, e a maioria delas oferece um nível sem custo financeiro ou uma avaliação sem custo financeiro para você testar o produto.
Escolher um CDN de imagem
Há muitas boas opções de CDNs de imagem. Alguns têm mais recursos do que outros, mas qualquer um deles pode ajudar a economizar bytes nas imagens e, portanto, carregar as páginas mais rapidamente. Além dos conjuntos de recursos, outros fatores a serem considerados ao escolher uma CDN de imagem são custo, suporte, documentação e facilidade de configuração ou migração.
Efeitos na maior exibição de conteúdo (LCP)
As imagens são uma parte vital da experiência do usuário em muitos sites. Por isso, elas são um fator importante na Largest Contentful Paint de um site. Confira algumas considerações importantes se você decidir usar uma CDN de imagens:
- As imagens veiculadas por CDNs podem vir de um servidor de origem cruzada, o que pode aumentar o tempo de configuração da conexão do seu site. Sempre que possível, use um CDN de imagem que faça proxy pela origem principal para não adicionar origens extras para o navegador se conectar. Isso tem o mesmo efeito de hospedar imagens na origem principal.
- Considere usar um valor de atributo
fetchpriorityde"high"no elemento de imagem do LCP para que o navegador possa começar a carregar essa imagem o mais rápido possível. - Se uma imagem não for detectável imediatamente no HTML inicial, use
uma sugestão
rel=preloadpara a imagem candidata do LCP para que o navegador possa carregar essa imagem com antecedência. - Se não for possível usar o proxy pela origem e o navegador não souber qual imagem carregar até mais tarde no carregamento da página, configure uma conexão com o CDN de imagens entre origens o mais cedo possível para encurtar a fase de carregamento de recursos para possíveis imagens candidatas da LCP.