Por que usar uma CDN de imagem?
As redes de fornecimento de conteúdo de imagem (CDNs) são excelentes para a otimização de imagens. Mudar para uma CDN de imagem pode reduzir de 40 a 80% no tamanho do arquivo de imagem. Teoricamente, é possível alcançar os mesmos resultados usando apenas scripts de build, mas isso é raro na prática.
O que é uma CDN de imagem?
As CDNs de imagens são especializadas na transformação, otimização e entrega de 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, o URL indica não apenas qual imagem carregar, mas também parâmetros como tamanho, formato e qualidade. Isso facilita a criação de 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 cada cliente individual do que scripts de build.
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 devem ser aplicadas a ela. Os formatos de URL variam dependendo da CDN de imagem, mas, em alto nível, todos eles têm recursos semelhantes. Vamos conferir 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 geralmente 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 acima 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 as 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. Por exemplo, é possível que você encontre 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.
Outra maneira amplamente aceita de fazer upload de imagens para uma CDN de imagens é enviá-las por meio de 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. Se esse recurso estiver ativado, cada nova versão de uma imagem vai exigir 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 vai cuidar dos detalhes da geração e do rastreamento das 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 por meio da string de URL, e não há restrições para o uso de várias transformações ao mesmo tempo. No contexto do 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 a razão pela qual a mudança para uma CDN de imagem normalmente resulta em uma redução significativa no tamanho da imagem.
Tende a haver uma configuração objetivamente melhor para transformações de desempenho, então 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. Os sinais que uma CDN de imagem pode usar para determinar a melhor maneira de transformar uma imagem incluem:
- 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 do 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 o conhecimento significativo das CDNs de imagens em otimização de imagens sem a necessidade de alterar o código para adotar novas tecnologias assim que forem compatíveis com essa CDN.
Tipos de CDNs de imagens
As CDNs de imagens podem ser divididas em duas categorias: 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 confortáveis em manter sua própria infraestrutura.
- O Thumbor é a CDN de imagem autogerenciada mais conhecida. Embora seja de código aberto e sem custo financeiro, ele geralmente possui menos recursos do que a maioria das CDNs comerciais, e sua documentação é um pouco limitada. Wikipédia, Square e 99designs são três sites que usam o Thumbor. Consulte a postagem Como instalar a CDN de imagens 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 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 imagem de terceiros mantêm a tecnologia subjacente, começar é bastante simples e pode ser realizado em 10 a 15 minutos, embora a migração completa de um site grande possa demorar muito mais. As CDNs de imagens de terceiros geralmente têm o preço baseado em níveis de uso, e a maioria delas fornece um nível ou uma avaliação sem custo financeiro para que você tenha a oportunidade de testar o produto.
Como escolher uma CDN de imagem
Há várias boas opções de CDNs de imagem. Alguns terão mais recursos que outros, mas todos eles provavelmente ajudarão você a economizar bytes em suas imagens e, portanto, carregar suas 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.
Testar por conta própria antes de tomar uma decisão também pode ser útil. Confira abaixo codelabs com instruções sobre como começar rapidamente a usar várias CDNs de imagem.
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, influenciam o desempenho deles na Maior exibição de conteúdo. Confira alguns pontos a serem considerados se você decidir usar uma CDN de imagem:
- As imagens veiculadas de CDNs podem vir de um servidor de origem cruzada, o que exige mais tempo de configuração da conexão. Quando possível, tente usar uma CDN de imagem que faça proxy pela origem principal para não adicionar origens extras para a conexão do navegador. Isso tem o mesmo efeito que a autohospedagem 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 a 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 não for possível saber a imagem exata a ser carregada durante o carregamento da página, configure uma conexão com a CDN de imagem de origem cruzada o mais rápido possível para reduzir a fase de carregamento de recursos da imagem candidata a LCP da sua página.
CDNs de imagens são ferramentas indispensáveis que eliminam o trabalho de otimizar manualmente imagens e devem ser consideradas. No entanto, como sempre, há vantagens e desvantagens a serem consideradas. Monitorar as imagens candidatas à LCP do seu site e adicionar dicas conforme apropriado pode reduzir a latência adicional a essas solicitações principais.