As redes de fornecimento de conteúdo (CDNs, na sigla em inglês) de imagens são excelentes para otimizar imagens para a Web. Alternar seu site para uma CDN de imagem pode reduzir de 40 a 80% no tamanho do arquivo de imagem e, na maioria dos casos, pode otimizar suas imagens melhor do que um script de otimização de imagem durante a criação.
O que é uma CDN de imagem?
As CDNs de imagens são especializadas em transformar, otimizar e exibir imagens. Pense nelas também como APIs para acessar e manipular as imagens usadas no site. Para imagens carregadas de uma CDN de imagem, um URL 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 de tempo de build, porque criam novas versões de imagens conforme são necessárias. Como resultado, as CDNs geralmente são mais adequadas para criar imagens altamente personalizadas para clientes individuais do que scripts de criação.
Como as CDNs de imagem usam URLs para indicar opções de otimização
Os URLs de imagens usados por CDNs de imagens 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 alto nível, todos eles têm recursos semelhantes. Confira alguns dos recursos mais comuns.
Origem
Ela pode ficar em seu próprio domínio ou no domínio da CDN de imagem. As CDNs de imagens de terceiros normalmente oferecem a opção de usar um domínio personalizado mediante o pagamento de uma taxa. Usar seu próprio domínio facilita a troca de CDNs de imagem posteriormente, porque não será necessária nenhuma alteração de 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
Os CDNs de imagens geralmente podem ser configurados para recuperar automaticamente imagens dos
locais existentes quando necessário. Esse recurso geralmente é alcançado com a inclusão do URL completo da imagem existente no URL da imagem gerada pela CDN da imagem. Por exemplo, você pode encontrar um URL parecido com
este: https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto.
Esse URL recuperaria e otimizaria a imagem que existe em https://flowers.com/daisy.jpg.
O formato de arquivo solicitado (JPG, no exemplo) pode não ser igual ao
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 processar o URL
adequadamente. Isso pode causar confusão se o arquivo for salvo em 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 imagem é enviá-las em uma solicitação HTTP POST para a API da CDN de imagens.
Chave de segurança
Uma chave de segurança impede que outras pessoas criem 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. Sua CDN de imagem cuida dos detalhes da geração e do rastreamento de chaves de segurança para você.
Transformações
As CDNs de imagens 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 para o uso de várias transformações ao mesmo tempo. Para o desempenho da 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 normalmente torna os arquivos de imagem do seu site menores.
Como geralmente há uma configuração objetivamente melhor para transformações de desempenho, algumas CDNs de imagem aceitam um modo “auto” para essas transformações. Por exemplo, em vez de especificar que as imagens serão transformadas para o formato WebP, você pode permitir que o CDN selecione e disponibilize automaticamente o formato ideal. Uma CDN de imagem pode determinar a melhor maneira de transformar uma imagem usando os seguintes sinais, 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 da solicitação User-Agent
- A API Network Information
Por exemplo, a CDN de imagem pode disponibilizar 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 imagens na otimização de imagens sem precisar alterar o código para adotar novas tecnologias quando a CDN de imagens começar a oferecer suporte a elas.
Tipos de CDNs de imagens
Há duas categorias principais de CDNs de imagens: autogerenciadas e gerenciadas por terceiros.
CDNs de imagens autogerenciadas
CDNs autogerenciadas podem ser uma boa opção para sites com equipes de engenharia que se sentem à vontade para manter sua própria infraestrutura.
- O Thumbor é a CDN de imagem autogerenciada mais conhecida. Ele é de código aberto e sem custo financeiro, mas tem menos recursos do que a maioria das CDNs comerciais e sua documentação é um pouco limitada. Os sites que usam o thumbor incluem Wikipédia, Square e 99designs. Consulte Como instalar a CDN de imagens do Thumbor para instruções sobre como configurá-la.
- Imaginário
- Imagor (link em inglês)
CDNs de imagens de terceiros
As CDNs de imagens de terceiros fornecem CDNs de imagens como um serviço. Assim como os provedores de nuvem fornecem servidores e outras infraestruturas mediante o pagamento de uma taxa, as CDNs de imagens oferecem otimização e entrega de imagens mediante o pagamento de uma taxa. Como as CDNs de imagens de terceiros mantêm a tecnologia subjacente, geralmente é possível começar a usar uma rapidamente, embora a migração completa de um site grande possa demorar mais. As CDNs de imagens de terceiros geralmente têm o preço baseado em níveis de uso, e a maioria das CDNs de imagem fornece um nível ou teste sem custo financeiro para que você possa testar o produto.
Escolher uma CDN de imagem
Há várias boas opções de CDNs de imagem. Alguns têm mais recursos que outros, mas qualquer um pode ajudar a economizar bytes em suas imagens e, assim, 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, na sigla em inglês)
As imagens são uma parte vital da experiência do usuário em muitos sites e, por isso, são um fator importante na Maior exibição de conteúdo 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 de origem cruzada, 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 origens extras às quais 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 imediatamente detectável no HTML inicial, use uma dica
rel=preloadpara sua imagem candidata a LCP para que o navegador possa carregar essa imagem antecipadamente. - Se não for possível usar o proxy na sua origem, e o navegador não saberá qual imagem carregar até mais tarde no carregamento da página, configure uma conexão com a CDN de imagem de origem cruzada o mais cedo possível para reduzir a fase de carregamento de recursos para possíveis imagens candidatas a LCP.