1. Classifique a imagem antes de otimizá-la
Faça inventário das imagens por template. Registre o papel de cada imagem, a maior e menor largura renderizada, se está na viewport inicial e se telas pequenas precisam de outro corte. Isso transforma trabalho de redução de arquivo em decisões que você pode testar nas páginas importantes.
Fotos frequentemente toleram compressão lossy revisada. Logos, símbolos de interface, arte em linhas e gráficos podem se adequar a SVG ou a um formato raster que proteja arestas nítidas. SVG é indicado para arte vetorial, diagramas e gráficos, não para fotos detalhadas.
Mantenha detalhes essenciais e forneça texto que transmita a finalidade da imagem.
Use um texto alternativo vazio (alt=""); não faça dela a única fonte de informação importante.
Nomeie a ação ou destino, não apenas os pixels da imagem.
2. Dimensione para o slot renderizado e ofereça candidatos responsivos
Faça corresponder as dimensões intrínsecas ao slot definido em CSS. Um arquivo em escala desktop dentro de um card estreito desperdiça transferência; um raster pequeno esticado demais fica com aparência borrada. Considere device pixel ratio, mas valide visualmente em vez de assumir que toda tela precisa do maior candidato.
Para uma mesma composição em várias larguras, use descritores de largura (width descriptors) em srcset e use sizes para declarar a largura real do slot. O navegador então escolherá um candidato. Use <picture> para art direction: um corte em tela pequena que preserve o assunto é diferente de simplesmente encolher a imagem desktop. Mantenha um <img> de fallback com src e alt dentro de <picture>.
Mesma composição, diferentes dimensões em pixels.
Corte ou composição diferente quando o redimensionamento esconde a mensagem.
Mantenha src no <img> para clientes que não usam atributos responsivos.
3. Escolha formato e compressão conforme as características da imagem
WebP e AVIF podem reduzir a transferência raster em casos adequados, mas formato não é garantia de qualidade. Teste rostos representativos, texturas finas, gradientes de marca, texto embutido e transparência. JPEG continua sendo fallback comum para fotos; PNG pode servir para detalhe raster sem perda ou transparência. Verifique suporte a AVIF e adequação operacional ao seu público e à sua cadeia de entrega.
Compressão lossy remove informação para economizar bytes e costuma ser mais tolerável em fotos ricas em detalhes do que em linhas nítidas ou texto. Compressão lossless preserva pixels codificados, mas pode reduzir menos o tamanho. Escolha a qualidade por revisão lado a lado no tamanho renderizado, não apenas por um número. Remova metadados somente após confirmar orientação, cor e necessidades do fluxo de trabalho.
Compare AVIF e WebP com perdas e o fallback JPEG no tamanho de exibição.
Prefira SVG quando adequado ou proteja arestas nítidas do raster por meio de testes.
Confirme a aparência do canal alfa em cada formato entregue e no fallback.
4. Faça a marcação proteger velocidade e estabilidade de layout
Dê a todo <img> de conteúdo atributos width e height que correspondam à sua proporção de aspecto intrínseca. O navegador pode reservar espaço antes do arquivo chegar, reduzindo movimento de layout. O CSS ainda pode ajustar as dimensões exibidas.
Use loading=lazy somente fora da viewport inicial. Não faça lazy-load de uma imagem que provavelmente será visível no carregamento, particularmente um candidato a Largest Contentful Paint (LCP). fetchpriority=high é apenas uma indicação relativa; aplique com parcimônia e meça o resultado. Use marcação HTML de imagem para conteúdo que precisa de texto alternativo ou descoberta de imagem; o Google documenta que ele não indexa imagens definidas via CSS.
Defina width e height, inclusive em imagens de galeria carregadas de forma preguiçosa.
Mantenha imagens prováveis de LCP carregadas imediatamente e inspecione prioridade de requisição.
Carregue com lazy imagens fora da tela e teste a rolagem em rede restrita.
5. Preserve significado, descoberta e qualidade visual
O texto alternativo depende de propósito e contexto. Descreva informações essenciais para uma imagem informativa, use alt="" para decoração e nomeie a função de uma imagem vinculada ou botão. Para um gráfico ou diagrama complexo, forneça uma explicação equivalente em texto próximo. Não use listas de palavras‑chave.
Para imagens descobríveis, use elementos HTML de imagem padrão, texto relevante nas proximidades, nomes de arquivo curtos e descritivos quando prático, e um fallback com marcação responsiva. Não transforme fundos decorativos em conteúdo redundante apenas para descoberta.
Revise arquivos comprimidos nos maiores e menores tamanhos pretendidos.
Prefira texto real; caso contrário, forneça a redação equivalente.
Coloque imagens informativas próximas ao texto relevante da página.
6. Verifique a página, não apenas o ativo
Teste páginas representativas em viewports estreitas e largas. Nas ferramentas de desenvolvedor do navegador, inspecione o candidato selecionado em srcset, o tamanho transferido, as dimensões renderizadas e o movimento de layout. Faça throttle na rede para revelar imagens hero tardias e galerias lentas. Uma comparação de exportação não revela um valor sizes impreciso, um corte inesperado ou um problema de transformação em produção.
Use sinais de laboratório e de campo quando disponíveis. Lighthouse e PageSpeed Insights podem identificar imagens com tamanho inadequado; o LCP de campo reflete visitas reais ao longo do tempo. Compare o mesmo template, classe de dispositivo, versão de release e janela de medição. Não credite imagens por uma mudança de métrica quando tempo de servidor, scripts, fontes ou terceiros também mudaram. Estageie alterações em templates compartilhados e mantenha um caminho de rollback até a validação.
Confirme que o slot não seleciona um candidato inesperadamente superdimensionado.
Verifique corte, nitidez, cor, alternativas e estabilidade de layout.
Nomeie o responsável, o sinal esperado e o caminho de reversão.