As redes de fornecimento de conteúdo (CDNs) de imagem são excelentes para otimizar imagens para a Web. Mudar seu site para uma CDN de imagem pode gerar uma economia de 40% a 80% no tamanho do arquivo de imagem e, na maioria dos casos, elas podem otimizar suas imagens melhor do que um script de otimização de imagem no tempo de compilação.
O que é uma CDN de imagem?
As CDNs de imagem são especializadas em transformar, otimizar e exibir imagens. Você também pode pensar neles 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 imagem são diferentes dos scripts de otimização de imagem no momento da criação, porque 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 precisam ser aplicadas a ela. Os formatos de URL variam de acordo com a CDN de imagem que você está usando, mas, em um nível geral, todos têm recursos semelhantes. Confira alguns dos recursos mais comuns.
Origem
Uma CDN de imagem pode estar no seu próprio domínio ou no domínio da CDN de imagem. As CDNs de imagem 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 mudar o URL.
O exemplo anterior usa o domínio da CDN de imagem ("example-cdn.com") com um subdomínio personalizado, em vez de um domínio personalizado.
Imagem
As CDNs de imagem geralmente podem ser configuradas para recuperar automaticamente as imagens dos
locais atuais quando necessário. Esse recurso geralmente é alcançado
incluindo o URL completo da imagem atual no URL da imagem
gerada pela CDN de imagem. Por exemplo, você pode ver um URL como
este: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Esse URL recupera e otimiza a imagem que existe em https://flowers.com/daisy.jpg.
O formato do arquivo solicitado (JPG, no exemplo) pode não ser o mesmo que o formato do arquivo de imagem retornado (WebP, no exemplo). O cabeçalho HTTP content-type informa ao navegador o formato do URL 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 de 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 requer uma chave de segurança exclusiva.
Se alguém tentar alterar 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. A CDN de imagem 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 transformações de imagem diferentes. Essas transformações são especificadas na string do URL, e não há restrições quanto ao uso de várias transformações ao mesmo tempo. Para o desempenho na Web, as transformações de imagem mais importantes são tamanho, densidade de pixels, formato e compactação. Essas transformações são o motivo pelo qual mudar para uma CDN de imagem geralmente reduz o tamanho dos arquivos de imagem do site.
Como geralmente há uma configuração objetivamente melhor para transformações de desempenho, algumas CDNs de imagem oferecem 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 a CDN selecione e exiba automaticamente o formato ideal. Uma CDN de imagem pode determinar a melhor maneira de transformar uma imagem usando os seguintes indicadores, entre outros:
- Dicas de cliente HTTP (por exemplo, largura da janela de visualização, DPR e largura da imagem)
- O cabeçalho
Save-Data - O cabeçalho da solicitação User-Agent
- A API Network Information
Por exemplo, a CDN de imagem pode exibir AVIF para um navegador Chrome, WebP para um navegador Edge e JPEG para um navegador muito antigo. As configurações automáticas são muito usadas porque permitem que você aproveite a experiência das CDNs de imagem na otimização de imagens sem precisar mudar seu código para adotar novas tecnologias quando a CDN de imagem começar a oferecer suporte a elas.
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 opção para sites com equipes de engenharia que se sentem confortáveis em manter a própria infraestrutura.
- O Thumbor é a CDN de imagens autogerenciada mais conhecida. Ele é de código aberto e sem custo financeiro, mas tem menos recursos do que a maioria das CDNs comerciais, e a documentação é um pouco limitada. Os sites que usam o thumbor incluem Wikipedia, Square e 99designs. Consulte Como instalar a CDN de imagens do Thumbor para ver instruções de configuração.
- Imaginary
- Imagor
CDNs de imagens de terceiros
As CDNs de imagem de terceiros oferecem CDNs de imagem como um serviço. Da mesma forma que os provedores de nuvem fornecem servidores e outras infraestruturas por uma taxa, as CDNs de imagem fornecem otimização e entrega de imagens por uma taxa. Como as CDNs de imagem de terceiros mantêm a tecnologia, geralmente é possível começar a usar uma rapidamente, embora uma migração completa para um site grande possa levar mais tempo. As CDNs de imagem de terceiros normalmente têm preços baseados em níveis de uso, e a maioria delas oferece um nível sem custo financeiro ou um teste sem custo financeiro para você testar o produto.
Escolher uma CDN de imagem
Há muitas opções boas de CDNs de imagem. Algumas têm mais recursos do que outras, mas todas podem ajudar você a economizar bytes nas imagens e, portanto, carregar as páginas mais rapidamente. Além dos conjuntos de atributos, 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 Largest Contentful Paint (LCP)
As imagens são uma parte vital da experiência do usuário em muitos sites, por isso são um fator importante na Largest Contentful Paint de um site. Confira alguns pontos a serem considerados se você decidir usar uma CDN de imagem:
- As imagens veiculadas por CDNs podem vir de um servidor entre origens, o que pode aumentar o tempo de configuração da conexão do site. Quando possível, tente usar uma CDN de imagem que faça proxy pela origem principal para não adicionar outras origens para o navegador se conectar. Isso tem o mesmo efeito que a auto-hospedagem de imagens na origem principal.
- Considere usar um valor de atributo
fetchpriorityde"high"no elemento de imagem 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 dica
rel=preloadpara a imagem candidata à LCP, de modo que o navegador possa carregá-la com antecedência. - Se não for possível usar um proxy na origem e o navegador não souber qual imagem carregar até mais tarde no carregamento de página, configure uma conexão com a CDN de imagens entre origens o mais cedo possível para reduzir a fase de carregamento de recursos para possíveis imagens candidatas à LCP.