Otimização imagens web: checklist completo para SEO
O Google não ranqueia palavra, ranqueia intenção. E quando a intenção é encontrar uma resposta rápida, uma imagem de 5 MB carregando em câmera lenta pode custar o clique. Otimizar imagens para web é um dos ajustes de maior retorno em performance: reduz o tempo de carregamento, economiza banda e ainda melhora a indexação no Google Imagens. Este checklist cobre cada etapa, do formato ao SEO, para que você não precise adivinhar o que fazer.
Formato e compressão
Escolha o formato certo para cada imagem
Fotografias e gradientes funcionam melhor com JPEG ou WebP com perda controlada. Ilustrações, logos e gráficos com áreas sólidas pedem PNG ou WebP sem perda. O WebP, suportado por Chrome, Firefox e Edge, entrega compressão 25-34% menor que JPEG para mesma qualidade.
Use compressão com perda para fotos
Uma foto JPEG comprimida em 80% de qualidade reduz o peso em até 70% sem artefatos visíveis em monitores comuns. Ferramentas como ImageOptim, Squoosh ou o compressor nativo do Photoshop fazem isso. Para WebP, qualidade 75-80 é o ponto ideal.
Prefira compressão sem perda para PNG com texto
Logos com texto ou gráficos com bordas nítidas perdem definição com compressão com perda. Use PNG-8 (256 cores) em vez de PNG-24 quando a paleta for limitada. O peso cai pela metade sem alterar pixel.
Converta imagens legadas para WebP
O WebP é o formato mais eficiente hoje. Converta JPEGs e PNGs existentes para WebP com qualidade equivalente. Cuidado: navegadores Safari antigos (iOS <14) não suportam. Use a tag <picture> com fallback em JPEG/PNG.
Dimensões e redimensionamento
Redimensione a imagem para o tamanho máximo de exibição
Nunca suba uma foto de 4000 px para ser mostrada em 800 px. Redimensione no editor antes de enviar ao servidor. O peso de uma imagem de 1920 px é cerca de 4x menor que uma de 4000 px na mesma compressão.
Gere múltiplas versões para breakpoints responsivos
Uma imagem de 1200 px não precisa carregar em um celular de 375 px. Crie versões para desktop (1200 px), tablet (768 px) e mobile (480 px). Use srcset no HTML para que o navegador escolha a correta.
Evite upscaling de imagens pequenas
Ampliar uma imagem de 200 px para 600 px no CSS borra o conteúdo e aumenta o peso desnecessariamente. Sempre trabalhe com a resolução real de exibição ou maior.
SEO e metadados
Nomeie o arquivo com palavras-chave descritivas
Foto-1.jpg não diz nada ao Google. Use otimizacao-imagens-web-checklist.jpg, separado por hífen, sem caracteres especiais. O nome do arquivo é um sinal de relevância para o algoritmo de busca.
Preencha o alt text com descrição funcional
O alt text deve descrever o conteúdo da imagem para leitores de tela e para o Google. Se for uma captura de tela de um gráfico, escreva "Gráfico de barras mostrando redução de 40% no tempo de carregamento após otimização". Evite "imagem de" ou "foto de".
Adicione título e legenda quando fizer sentido
O atributo title aparece como tooltip e pode reforçar contexto. A legenda (<figcaption>) é texto visível que complementa a imagem. Ambos ajudam na acessibilidade e na indexação semântica.
Configure lazy loading para imagens abaixo da dobra
Imagens que só aparecem após o scroll não precisam carregar na abertura da página. Use loading="lazy" no <img>. O navegador adia o download até que a imagem este prestes a entrar no viewport. Isso reduz o tempo de carregamento inicial em até 30% em páginas com muitas imagens.
Performance e entrega
Habilite cache de navegador para imagens
Defina cabeçalhos Cache-Control com max-age de pelo menos 30 dias para imagens que não mudam com frequência. O navegador reutiliza o arquivo baixado, eliminando requisições repetidas.
Use CDN para servir imagens globalmente
Uma CDN (Content Delivery Network) armazena cópias das imagens em servidores geograficamente próximos ao usuário. O tempo de resposta cai de 200 ms para menos de 50 ms em média. Serviços como Cloudflare, ImageKit ou Cloudinary oferecem planos gratuitos.
Monitore o impacto com Lighthouse ou PageSpeed Insights
O Google Lighthouse reporta se as imagens estão otimizadas, se há redimensionamento necessário e se o lazy loading está ativo. Rode o teste mensalmente. Uma nota acima de 90 em Performance é o mínimo desejável.
O erro mais comum na otimização de imagens
O erro mais frequente é comprimir imagens sem redimensionar primeiro. Uma foto de 4000 px comprimida em 80% ainda pesa 1,5 MB. Redimensione para 1920 px e depois comprima: o mesmo arquivo cai para 200 KB. A ordem importa. Faça primeiro o redimensionamento, depois a compressão, e por último a conversão de formato.
Perguntas frequentes sobre otimização de imagens para web
Qual o melhor formato de imagem para web em 2025?
O WebP é o formato mais equilibrado entre qualidade e peso. Para fotografias, use WebP com perda (qualidade 80). Para gráficos com texto, use WebP sem perda ou PNG-8. O AVIF oferece compressão ainda maior, mas o suporte entre navegadores ainda é menor.
Como otimizar imagens sem perder qualidade?
Use compressão com perda controlada: qualidade 80% para JPEG e WebP. Redimensione para o tamanho máximo de exibição. Nunca re-salve uma imagem já comprimida, a perda é cumulativa. Prefira ferramentas que mostrem pré-visualização lado a lado.
O que é lazy loading e como ativar?
Lazy loading adia o carregamento de imagens que não estão visíveis na tela no momento da abertura. Ative adicionando loading="lazy" ao atributo da tag <img>. Funciona nativamente em Chrome, Firefox e Edge desde 2020.
Qual o tamanho ideal de imagem para cada dispositivo?
Desktop: 1200-1920 px de largura. Tablet: 768-1024 px. Mobile: 375-480 px. Use srcset no HTML para servir a versão correta. O peso ideal por imagem é de 100 a 300 KB, dependendo do conteúdo.
Como nomear arquivos de imagem para SEO?
Use palavras-chave descritivas separadas por hífen, sem acentos ou caracteres especiais. Exemplo: checklist-otimizacao-imagens-web.jpg. Evite nomes genéricos como foto1.jpg ou DSC_001.jpg.
O que é alt text e por que é importante?
Alt text é um texto alternativo que descreve o conteúdo da imagem para leitores de tela e mecanismos de busca. Ele melhora a acessibilidade e ajuda o Google a entender o assunto da imagem. Deve ser descritivo e natural, sem excesso de palavras-chave.