Como corrigir “Melhorar a entrega de imagens” no PageSpeed Insights

1. 01Abra a página no PageSpeed Insights ou Lighthouse. Selecione o relatório para celular ou computador, expanda “Melhorar a entrega de imagens” e anote a URL e a alteração sugerida.
2. 02Localize a imagem na página. Nas ferramentas do navegador, compare o arquivo recebido com as dimensões exibidas, considerando a densidade da tela. Confira a fonte escolhida, não só o original da biblioteca.
3. 03Se a imagem entregue tem pixels em excesso, ajuste primeiro tamanhos responsivos ou configurações do tema. Se as dimensões servem, compare compressão ou outro formato aceito.
4. 04Prepare uma cópia nas dimensões necessárias em um editor. Use o compressor Bitinz para arquivos adequados e confira textos, bordas, transparência e degradês antes de substituir.
5. 05Publique a imagem ou o modelo atualizado. Confirme que a página solicita a imagem nova, não uma versão antiga em cache, e repita o relatório com o mesmo dispositivo.

O Chrome estima a economia pelo tamanho baixado e uma proporção eficiente de bytes por pixel do formato. Imagens com economia estimada abaixo de 4 KiB não são indicadas. É um limite do relatório, não um tamanho máximo recomendado.

O Lighthouse 13 substituiu auditorias antigas por essa análise; o Lighthouse 12 já exibia análises por padrão. Formato, dimensões excessivas e animações pesadas exigem soluções distintas. Para o fluxo completo, veja como comprimir imagens para sites.

• WordPress: confira o tamanho escolhido no bloco ou tema e a marcação real de srcset e sizes. O WordPress gera opções responsivas, mas um modelo personalizado ou uma descrição incorreta do leiaute pode entregar dimensões inadequadas. Alterar apenas o original pode deixar cópias geradas em uso.
• Shopify: o CDN já otimiza imagens da loja, inclusive escolhendo formatos. A Shopify informa que compressão manual antes do envio é desnecessária. Diante de um aviso, confira a largura solicitada e a marcação responsiva do tema, sem degradar a fonte repetidamente. Quem desenvolve o tema pode verificar image_url e image_tag.
• Next.js: use as opções responsivas do componente Image e ajuste sizes ao leiaute real, especialmente com fill. Sem valor adequado, uma imagem estreita pode ser tratada como ocupando toda a janela e baixar uma opção maior. Mudar apenas a qualidade não corrige esse desalinhamento.

Guarde um original editável. Para imagens servidas independentemente, compare peso real e aparência; a comparação JPG, PNG e WebP ajuda. O Bitinz não redimensiona. Converter para WebP pode aumentar o arquivo: conserve a versão adequada à página.

Para publicações recorrentes, a API para desenvolvedores processa arquivos adequados com conta e cota mensal. Não corrige marcação do tema nem leiaute responsivo. Confira novamente a página entregue após integrar a automação.

• A URL indicada corresponde à imagem e à versão alteradas.
• O navegador seleciona uma fonte adequada no celular e em telas maiores.
• A compressão preserva detalhes úteis, transparência e degradês suaves.
• A imagem principal visível não é atrasada por carregamento adiado inadequado.
• O novo relatório usa o mesmo dispositivo; aparência e carregamento reais também foram conferidos.