Imagens para web: WebP, AVIF e alt para um site rápido

Você publicou o novo catálogo, as fotos ficaram lindas e o cliente abre a página no celular, na rua. Ele vê um quadro cinza por quatro segundos, desvia o olhar e escreve para a concorrência. A foto que mais custou para produzir pode ser justamente a que faz você perder a venda.

Qual formato de imagem devo usar no meu site?

Use WebP ou AVIF como formato principal e deixe JPEG ou PNG apenas como alternativa. Segundo o web.dev, esses formatos modernos geralmente comprimem melhor que os antigos e funcionam em todos os navegadores modernos. Suas versões com perda são uma boa alternativa ao JPEG para fotos, e o WebP sem perda pode ser mais eficiente que o PNG.

Formato	Melhor para	Transparência
JPEG	Fotos, compatibilidade total	Não
PNG	Logos e capturas nítidas	Sim
WebP	Fotos e gráficos em geral	Sim
AVIF	Fotos com boa compressão	Sim

A contrapartida é que a compressão com perda descarta informação, e algumas cores podem não coincidir com o JPEG equivalente. Revise sempre o resultado antes de publicar.

O Google consegue indexar minhas imagens WebP e AVIF?

Sim, o Google as entende sem problema. O guia de imagens do Google Search Central lista BMP, GIF, JPEG, PNG, WebP, SVG e AVIF como formatos compatíveis. Ele também recomenda que a extensão do arquivo coincida com o tipo real e que o nome seja curto e descritivo, por exemplo zapatos-cuero-negro.webp e não img1.jpg.

Erro comum: subir fotos direto da câmera ou do celular, com vários megabytes, e confiar que o navegador as “encolhe”. Elas são baixadas inteiras do mesmo jeito. Redimensione e comprima antes de publicar.

O que escrevo no texto alternativo (alt)?

Descreva o que se vê, de forma útil e específica para aquela página. O Google o chama de atributo mais importante de uma imagem. O exemplo dele é claro: “filhote” é melhor que nada, mas “filhote de dálmata brincando de buscar a bolinha” é ainda melhor. Use palavras-chave só se surgirem de forma natural: o guia alerta que encher o alt de palavras-chave prejudica a experiência e pode parecer spam.

Se você usa versões para diferentes tamanhos de tela, o Google indica que é possível servi-las com picture ou srcset, sempre com um src de reserva. E se o seu site tem vários idiomas, traduza também os nomes dos arquivos e os alt, como explicamos em hreflang para sites em vários idiomas.

Quando não devo usar carregamento adiado?

Na imagem principal da página, a que aparece ao abri-la. O web.dev é categórico: “nunca adie o carregamento da sua imagem LCP”, porque isso acrescenta um atraso desnecessário. Para essa imagem, considere fetchpriority="high", mas com moderação: dar prioridade alta a mais de uma ou duas imagens deixa de ajudar.

A meta, segundo a mesma fonte, é um LCP de 2,5 segundos ou menos em pelo menos 75% das visitas. Se quiser entender as três métricas completas, leia velocidade do site e Core Web Vitals.

Qual checklist sigo antes de publicar uma imagem?

Cinco verificações rápidas evitam quase todos os problemas:

1. Formato moderno (WebP ou AVIF) e peso razoável.
2. Nome de arquivo curto e descritivo, sem img1.
3. Alt útil e específico, sem encher de palavras-chave.
4. Largura e altura definidas, para que a página não pule ao carregar.
5. Carregamento adiado nas imagens de baixo, nunca na principal.

Além disso, a imagem que aparece quando seu link é compartilhado nas redes tem suas próprias regras: nós as explicamos em Open Graph, como seu link aparece ao ser compartilhado. E quando publicar páginas novas, avise o Google como explicamos em Search Console e sitemap.

Em resumo

Uma foto lenta ou sem descrição desperdiça o trabalho de quem a tirou e a paciência de quem a espera. Escolha WebP ou AVIF, escreva um alt honesto, não adie a imagem principal e meça de novo. Se quiser que revisemos seu site de ponta a ponta, conheça nosso serviço de desenvolvimento web.