Por que imagens mal otimizadas são o maior inimigo do Core Web Vitals
Em auditorias técnicas de SEO, a Trilion frequentemente encontra um padrão: sites que parecem rápidos visualmente, mas que têm scores de Core Web Vitals abaixo do ideal. Em mais de 70% dos casos, o principal culpado é imagens mal otimizadas. Imagens pesadas, nos formatos errados, sem lazy loading ou com dimensões inadequadas ão o fator individual que mais frequentemente derruba as métricas de performance que o Google usa como sinal de ranqueamento.
O impacto é especialmente crítico no Largest Contentful Paint (LCP) — a métrica que mede quanto tempo leva para o maior elemento visual da página ser renderizado. Em páginas de produto de e-commerce, landing pages e artigos de blog, o LCP quase sempre é uma imagem. Se essa imagem for um JPEG de 2MB sem compressão, o LCP vai ultrapassar facilmente os 4 segundos, o que o Google classifica como 'Poor' e penaliza indiretamente no ranqueamento.
Mas o impacto vai além do LCP. O Cumulative Layout Shift (CLS) — que mede instabilidade visual da página — também é frequentemente causado por imagens sem atributos de dimensão definidos, que fazem o layout 'pular' enquanto carrega.
O processo completo de otimização de imagens
Otimizar imagens não é apenas comprimir. É um processo que envolve cinco dimensões que precisam ser tratadas em conjunto:
1. Compressão: reduzir o tamanho sem perder qualidade perceptível
A compressão de imagens pode ser com perda (lossy) ou sem perda (lossless). Para a maioria das imagens na web, a compressão lossy com qualidade de 80-85% reduz o tamanho do arquivo em 60-80% sem que a diferença de qualidade seja perceptível pelo usuário médio.
Ferramentas recomendadas:
- Squoosh (squoosh.app): ferramenta gratuita do Google com interface visual que permite comparar o original com diferentes níveis de compressão e formatos.
- ImageOptim (Mac): ferramenta local para compressão em lote.
- TinyPNG / TinyJPEG: serviço online com API para integração automática no pipeline de upload.
- Sharp (Node.js): biblioteca de alto desempenho para compressão e conversão programática de imagens no servidor.
2. Formato: WebP e AVIF como padrão
O formato da imagem tem impacto enorme no tamanho do arquivo. Comparando mesma qualidade percepção:
- JPEG: formato legado, bom para fotografias. Tamanho base de referência.
- PNG: ideal para imagens com transparência, mas tende a ser maior do que JPEG para fotografias.
- WebP: formato moderno do Google, 25-35% menor do que JPEG com qualidade equivalente. Suportado por todos os navegadores modernos (Chrome, Firefox, Safari 14 , Edge).
- AVIF: formato mais recente, baseado em AV1, 50% menor do que JPEG com qualidade superior. Suporte crescente (Chrome, Firefox, Safari 16 ).
A estratégia recomendada pela Trilion é: servir AVIF para navegadores que suportam, WebP como fallback, e JPEG/PNG para navegadores mais antigos. Isso pode ser implementado com o elemento HTML <picture> com múltiplas fontes.
3. Dimensões corretas: nunca maior do que o container exige
Servir uma imagem de 2000x1500 pixels em um container que exibe apenas 400x300 pixels é desperdiçar até 25 vezes mais dados do que necessário. Cada imagem deve ser redimensionada para as dimensões máximas em que será exibida, considerando também telas de alta densidade (Retina/2x). Para uma imagem exibida em 400px de largura em uma tela Retina, 800px é o máximo necessário.
Use o atributo srcset para servir diferentes resoluções conforme o dispositivo:
<img src='imagem-400.webp' srcset='imagem-400.webp 400w, imagem-800.webp 800w, imagem-1200.webp 1200w' sizes='(max-width: 600px) 400px, 800px' alt='[alt text]'>
O navegador escolherá automaticamente a resolução mais adequada para o dispositivo e a largura de banda disponível.
4. Lazy loading nativo: não carregue o que não está visível
O lazy loading adia o carregamento de imagens que estão fora da viewport (fora da área visível da tela). Com o atributo nativo loading='lazy' do HTML5, implementar lazy loading é trivial:
<img src='imagem.webp' loading='lazy' alt='[alt text]'>
Esse único atributo instrui o navegador a adiar o carregamento da imagem até que o usuário esteja próximo de rolar até ela. O impacto no tempo de carregamento inicial pode ser significativo em páginas com muitas imagens (gallerias de produtos, portfólios).
Atenção crucial: não use loading='lazy' na imagem que será o LCP (geralmente a primeira imagem grande acima do fold). Para ela, use loading='eager' e considere adicionar <link rel='preload'> no head da página para pré-carregar a imagem o mais cedo possível.
5. CDN: servir imagens de servidores próximos ao usuário
Uma CDN (Content Delivery Network) armazena cópias dos assets do site (incluindo imagens) em servidores distribuídos geograficamente. Quando um usuário solicita uma imagem, a CDN serve a cópia do servidor mais próximo, reduzindo a latência.
Para sites brasileiros com usuários em todo o país, uma CDN com ponto de presença no Brasil (como Cloudflare, Bunny.net ou AWS CloudFront com região São Paulo) pode reduzir o tempo de entrega de imagens em 30-50% para usuários fora das capitais.
Definindo dimensões de imagem para evitar CLS
O Cumulative Layout Shift (CLS) acontece quando o navegador não sabe as dimensões de uma imagem antes de carregá-la e reserva espaço zero para ela inicialmente. Quando a imagem carrega, empurra o conteúdo abaixo dela, causando um 'pulo' visual que o Google penaliza.
A correção é simples: sempre defina os atributos width e height na tag <img> com as dimensões naturais da imagem:
<img src='imagem.webp' width='800' height='600' loading='lazy' alt='[alt text]'>
Com esses atributos definidos, o navegador calcula a proporção da imagem e reserva o espaço correto antes mesmo de carregar, eliminando o layout shift.
Como escrever alt texts que ajudam SEO e acessibilidade
O alt text serve dois propósitos simultâneos: tornar a imagem acessível para usuários de leitores de tela e fornecer informações ao Googlebot sobre o conteúdo da imagem.
Princípios para alt texts eficazes:
- Descreva o que está na imagem: seja específico sobre o conteúdo visual. 'Notebook aberto exibindo código Python em um estúdio de desenvolvimento' é melhor do que 'notebook'.
- Inclua keywords contextualmente: se a imagem ilustra o tópico do artigo, inclua a keyword principal naturalmente. Não faça keyword stuffing — 'keyword keyword keyword SEO SEO' não funciona e pode ser tratado como spam.
- Evite 'imagem de' ou 'foto de': o leitor de tela já anuncia que é uma imagem. Comece direto com a descrição.
- Alt vazio para imagens decorativas:
alt=''instrui o leitor de tela a pular a imagem, evitando interrupções desnecessárias. - Não repita o conteúdo do caption: se a imagem tem um caption (legenda), o alt text pode ser mais conciso para evitar repetição.
Nome do arquivo: um detalhe frequentemente ignorado
O nome do arquivo de imagem também é lido pelo Googlebot. IMG_20241203_142301.jpg não diz nada sobre o conteúdo da imagem. auditoria-seo-tecnico-checklist.webp reforça o contexto e a keyword da página.
Use nomes descritivos com hifens (não underscores) e keywords relevantes. Mantenha os nomes concisos (3 a 5 palavras).
Ferramentas para monitorar performance de imagens
- Google PageSpeed Insights: identifica imagens com potencial de melhoria e estima o impacto em segundos de LCP.
- Google Search Console (relatório Core Web Vitals): mostra URLs com LCP ruim, frequentemente causado por imagens.
- WebPageTest: análise detalhada com cascata de requisições, mostrando exatamente quais imagens estão atrasando o carregamento.
- Lighthouse (Chrome DevTools): auditoria completa com recomendações específicas de otimização de imagens.
Resultado real da Trilion: em um projeto de e-commerce de moda, a otimização das imagens de produto (conversão para WebP, compressão, implementação de srcset e lazy loading) reduziu o LCP médio das páginas de produto de 5.8 segundos para 1.9 segundos. O resultado foi um aumento de 28% na taxa de conversão móvel e uma melhora significativa no ranqueamento orgânico para as principais keywords do catálogo.
Otimização de imagens é um dos investimentos de SEO técnico com melhor relação esforço-resultado. Pode ser feita progressivamente, página a página, começando pelas mais importantes. E o impacto é imediato: usuários percebem o site mais rápido, o Google mede melhores Core Web Vitals, e o ranqueamento melhora.
Se as imagens do seu site estão prejudicando a velocidade e o SEO, a Trilion pode realizar uma auditoria completa de Core Web Vitals com foco em imagens e implementar as correções necessárias. Solicite uma avaliação gratuita de performance e descubra o potencial de melhora do seu site.
Também oferecemos implementação de pipelines automatizados de otimização de imagens, que processam e otimizam cada imagem enviada ao CMS automaticamente. Conheça nossos serviços de SEO Técnico e veja como a Trilion transforma performance em ranqueamento.
