Como otimizar imagens para deixar o site rápido (WebP vs AVIF) | We.Inc
Escolha o formato certo, redimensione com srcset, use lazy loading nas imagens certas e nunca no hero. Inclui um gerador de código para picture, srcset e fetchpriority.
Como otimizar imagens para um site
Otimizar imagens se resume a quatro passos: escolher o formato que combina com a imagem, exportar só as larguras em pixels de que o layout precisa, comprimir cada arquivo e controlar quando ele carrega. Sirva AVIF ou WebP com um JPEG de fallback, liste as larguras no srcset, use lazy loading nas imagens abaixo da dobra e, no hero, use fetchpriority high.
Qual formato para qual imagem
Imagem
Melhor formato
Fallback
Foto
AVIF ou WebP
JPEG
Captura de tela com texto
WebP sem perdas ou PNG
PNG
Logo, ícone, formas simples
SVG
PNG
Animação curta
Vídeo (MP4 ou WebM)
WebP animado
As imagens costumam ser a parte mais pesada de uma página, e o hero muitas vezes é o elemento medido no Largest Contentful Paint. A maior parte da economia vem de configurações que você escolhe uma vez: formato, larguras, qualidade e comportamento de carregamento. O gerador abaixo escreve o código certo para essas escolhas, e o checklist depois dele cobre o resto.
Decida o formato pela tabela: fotos em AVIF ou WebP, gráficos simples em SVG.
Redimensione para três a cinco larguras que cubram de celulares a telas grandes.
Comprima cada arquivo, conferindo o resultado em tamanho real em busca de borrões e faixas de cor.
Gere o código com o gerador, marcando o hero como alta prioridade e o resto como lazy.
Rode um teste de velocidade da página e olhe as auditorias relacionadas a imagens para confirmar.
Nunca use lazy loading no hero nem em qualquer imagem visível na primeira pintura; o web.dev avisa que isso atrasa o Largest Contentful Paint.
Sempre defina width e height para o navegador reservar espaço e o layout não se deslocar.
Remova os metadados da câmera ao exportar; dados de localização e do aparelho acrescentam bytes e podem vazar informações privadas.
Use background em CSS só para decoração; imagens de conteúdo ficam em tags img com texto alternativo.
Compare as configurações de qualidade a olho, com zoom de 100%, já que o número certo muda de um codificador para outro.
Perguntas frequentes
WebP vs AVIF: qual devo usar?
Os dois superam o JPEG em fotos. O AVIF é o formato mais novo e muitas vezes comprime mais, enquanto o WebP codifica mais rápido e tem suporte há mais tempo. Um padrão seguro é um elemento picture oferecendo AVIF primeiro, depois WebP e, por fim, um JPEG na tag img para navegadores mais antigos.
O que o atributo sizes faz?
Ele diz ao navegador qual será a largura da imagem desenhada, antes de o layout acontecer, para ele escolher o arquivo certo no srcset. Sem sizes, o navegador assume que a imagem ocupa a viewport inteira e pode baixar um arquivo muito maior do que o necessário.
Toda imagem deve usar loading lazy?
Só as imagens abaixo da dobra. O lazy loading espera até o navegador saber onde a imagem fica, e esse é um atraso que você não quer em nada que as pessoas veem logo de cara.
Quanto devo comprimir?
Reduza a qualidade até começar a ver diferença em tamanho real e depois volte um nível. Fotos cheias de detalhes escondem bem a compressão; degradês suaves, céus e textos mostram artefatos mais cedo.
Preciso de um plugin ou serviço para otimizar imagens?
Não. Você pode redimensionar e converter em um editor ou com uma ferramenta gratuita no navegador e depois escrever o código à mão. Serviços ajudam quando você tem milhares de imagens ou envios de usuários para processar automaticamente.
Primeiro, o formato
O guia de formatos do web.dev resume bem: prefira vetores quando a imagem for formas e texto e use um formato raster moderno para fotos. O PNG preserva cada pixel exatamente, o que é bom para capturas de tela, mas deixa fotos desnecessariamente grandes.
O elemento picture permite oferecer formatos novos sem quebrar navegadores antigos. O navegador pega o primeiro source cujo tipo ele entende e recorre ao img de dentro como fallback.
Tamanho certo em cada tela
O web.dev observa que mandar imagens de tamanho desktop para celulares pode usar de duas a quatro vezes mais dados do que o necessário e sugere de três a cinco tamanhos por imagem. Liste-os com descritores de largura no srcset e descreva o layout em sizes.
Meça a largura renderizada no seu layout em vez de chutar. Um card que ocupa um terço da tela no desktop e a largura total no celular precisa de um valor de sizes que diga exatamente isso.
Ordem de carregamento
O lazy loading economiza banda em páginas longas, então coloque loading lazy nas imagens mais abaixo. Para a imagem principal acima da dobra, adicione fetchpriority high para que ela seja pedida antes de arquivos menos importantes.
decoding async permite que o navegador pinte o texto antes de terminar de decodificar uma imagem grande. É uma sugestão, e os navegadores podem ignorá-la.
Checklist de otimização de imagens
O que conferir e por quê
Verificação
Como
Por que ajuda
Formato moderno
picture com sources AVIF e WebP
Arquivos menores com o mesmo visual
Larguras responsivas
srcset com descritores w mais sizes
Celulares não baixam arquivos de tamanho desktop
Compressão
Qualidade ajustada a olho por tipo de imagem
Menos bytes por pixel
Dimensões
Atributos width e height
Evita deslocamento de layout
Lazy loading
loading="lazy" só abaixo da dobra
Economiza dados em páginas longas
Prioridade do hero
fetchpriority="high" na imagem principal
Largest Contentful Paint mais rápido
Texto alternativo
Descreva as imagens de conteúdo; alt vazio para decoração
Acessibilidade e busca de imagens
Padrões de código para copiar
AVIF e WebP com fallback em JPEG
O navegador usa o primeiro tipo de source que suporta. O img leva o tamanho, o texto alternativo e as dicas de carregamento para todos os formatos.
Redimensionar e converter em lote com sharp
Um pequeno script Node usando o pacote sharp: cada JPEG em ./src vira três larguras em WebP em ./out.
Deck de cedro com banco embutido ao pôr do sol
Gerador de código de imagem
Defina o nome do arquivo, as larguras, os formatos e onde a imagem fica na página. O gerador escreve o código de picture e img com as dicas de carregamento certas.