CDN de Imagens: Como o Formato Dinâmico Otimiza Seu Site e SEO Empresarial

Para quem gerencia um site empresarial, a velocidade de carregamento é crucial. Ela impacta diretamente a experiência do usuário, as taxas de conversão e, claro, o SEO. Um dos maiores vilões da lentidão são as imagens pesadas. Mas e se o seu site já estiver otimizando isso automaticamente, sem você saber? Isso é possível graças à negociação de conteúdo dos CDNs (Content Delivery Networks) de imagens.

Muitas ferramentas de auditoria de sites podem mostrar um problema com imagens que, na prática, seus visitantes nunca encontram. Isso acontece porque o formato e o tamanho da imagem entregue podem variar drasticamente dependendo do navegador do usuário. Compreender esse mecanismo é fundamental para tomar decisões estratégicas sobre a performance e o SEO do seu site.

A negociação de conteúdo é um processo inteligente onde o servidor (neste caso, o CDN de imagens) decide qual versão de um arquivo enviar com base nas capacidades do navegador do usuário. Um exemplo prático de uma loja Shopify mostrou que a mesma URL de imagem foi requisitada três vezes, e em cada uma, um arquivo diferente foi entregue, tudo na mesma fração de segundo:

A única diferença entre as requisições foi o cabeçalho Accept enviado pelo navegador, que informa quais formatos ele consegue processar. Isso é excelente para os visitantes, pois garante que eles sempre recebam a versão mais leve e compatível da imagem. No entanto, significa que a pergunta "qual o formato desta imagem?" não tem uma resposta única.

Todo navegador envia um cabeçalho Accept com as requisições de imagem. O Chrome atual, por exemplo, envia algo como Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8. Um CDN de imagens que realiza negociação lê essa lista e escolhe o melhor formato que pode produzir.

Para indicar que a resposta pode variar, o CDN adiciona o cabeçalho Vary: Accept à resposta. Isso informa a todos os caches intermediários que aquela URL possui múltiplas versões, e que a versão correta depende do cabeçalho Accept da requisição. Se você vir Vary: Accept na resposta de uma imagem, seu servidor está negociando. Se não, você está recebendo o mesmo arquivo, independentemente do navegador.

Para entender o que seu site está entregando, você pode usar a ferramenta curl. Com ela, é possível simular diferentes cabeçalhos Accept.

Para simular um navegador moderno:

Para simular um navegador antigo (sem o cabeçalho -H, que faz o curl enviar Accept: */* por padrão):

Se as respostas forem diferentes, seu CDN está negociando. Essa é uma forma prática de garantir que seu site está otimizando a entrega de imagens para diversos cenários.

Não é apenas o suporte do navegador que define o formato. O tamanho da imagem solicitado também pode mudar o que é entregue. O mesmo CDN que enviou WebP (87 KB) para uma imagem de 1200px pode enviar AVIF (14 KB) para a mesma imagem redimensionada para 300px, mesmo que o navegador suporte AVIF em ambos os casos.

Um estudo com 199 páginas de produtos Shopify em 2026-10-12 revelou que 94% das imagens eram WebP ou AVIF, e 97% dessas respostas continham Vary: Accept. No entanto, ao verificar fotos principais de produtos em 24 lojas com 600px, 22 delas retornaram WebP, e nenhuma AVIF. O AVIF apareceu em algumas variantes menores, mas não de forma consistente. Isso mostra que "meu CDN suporta AVIF" é diferente de "minhas fotos de produto são servidas como AVIF". É crucial verificar a entrega real.

Ferramentas de auditoria que buscam imagens sem um cabeçalho Accept similar ao de um navegador moderno verão a versão "antiga", ou seja, o arquivo original maior (por exemplo, um PNG de 1.2 MB em vez de um WebP de 87 KB). Isso leva a relatórios que indicam problemas de otimização que seus visitantes modernos não enfrentam.

Ao ler uma auditoria de imagens, sempre verifique qual cabeçalho Accept foi usado. Se essa informação não estiver clara, compare os números da auditoria com os resultados de suas próprias verificações (como as feitas com curl). O erro inverso também ocorre: testar apenas com ferramentas como o Chrome DevTools mostra o melhor cenário. Visitantes com navegadores antigos, alguns clientes de e-mail ou pré-visualizações de links em redes sociais podem receber o arquivo original, menos otimizado.

A negociação de conteúdo só funciona se todos os caches entre o CDN e o visitante respeitarem o cabeçalho Vary: Accept. Se você adicionar um proxy próprio ou um segundo CDN na frente das suas imagens e ele ignorar esse cabeçalho, o formato da imagem entregue ao primeiro visitante será armazenado em cache para todos os outros.

Isso pode resultar em um PNG pesado sendo servido para todos, ou um AVIF sendo entregue a um cliente que não consegue decodificá-lo. Se você adicionar uma camada extra, certifique-se de que ela passe o Vary: Accept e use-o como chave de cache, ou deixe que o CDN original gerencie as imagens diretamente. Isso é vital para a segurança e performance do seu site.

Para garantir que suas imagens estão sendo entregues da melhor forma, siga este checklist:

Para uma análise mais completa de uma página inteira, há ferramentas que auditam as imagens da página com um cabeçalho Accept de navegador atual, mostrando o tipo e tamanho reais. Garantir a entrega otimizada de imagens é um passo fundamental para um site empresarial de alta performance. Agências especializadas como a UP Developer podem ajudar a implementar e monitorar essas otimizações, garantindo que seu site esteja sempre um passo à frente.

O que é a negociação de conteúdo em CDNs de imagens?

É um processo onde o CDN escolhe o formato e tamanho de imagem mais adequado para o navegador do usuário, com base nas capacidades informadas pelo cabeçalho Accept do navegador. Isso garante que o usuário receba a versão mais leve e compatível.

Por que meu site pode estar entregando imagens pesadas para algumas ferramentas de auditoria?

Muitas ferramentas de auditoria não simulam um navegador moderno e não enviam o cabeçalho Accept correto. Assim, o CDN entrega a versão original, mais pesada, o que leva a um relatório incorreto sobre a performance real para seus visitantes.

Como posso saber se meu CDN está negociando o formato das imagens?

Você pode usar a ferramenta curl para simular requisições com e sem o cabeçalho Accept de um navegador moderno. Se as respostas (Content-Type e Content-Length) forem diferentes, e houver o cabeçalho Vary: Accept, seu CDN está negociando.

O que acontece se eu usar um proxy ou segundo CDN que ignora Vary: Accept?

Se um proxy ou CDN intermediário ignorar o Vary: Accept, ele pode armazenar em cache a primeira versão da imagem que recebeu e servi-la para todos os usuários, independentemente de seus navegadores. Isso pode levar a imagens pesadas para usuários modernos ou formatos incompatíveis para navegadores antigos.

Fonte: DEV Community