Imagens em Formatos de Próxima Geração

O aviso do Lighthouse significa converter os seus ficheiros JPEG e PNG para WebP ou AVIF, e depois disponibilizá-los através de um elemento picture com o original como alternativa. A auditoria é uma das mais fáceis de resolver, porque a correção é mecânica e não arquitetural.

O Lighthouse emite o aviso quando encontra imagens que acredita que seriam substancialmente mais pequenas num formato moderno. A estimativa baseia-se no ficheiro descarregado, pelo que a poupança reportada é normalmente alcançável e, por vezes, conservadora.

O que o Lighthouse está a medir

O Lighthouse recodifica internamente cada imagem como WebP e reporta a diferença quando a poupança excede um limite. O número no relatório é uma estimativa real e não uma recomendação genérica.

As imagens abaixo do limite são ignoradas, razão pela qual uma página com 30 imagens pode mostrar apenas 4 na auditoria. Os ficheiros listados são os que vale a pena corrigir primeiro. Resolvê-los costuma remover o aviso por completo, mesmo que outras imagens na página permaneçam em formatos mais antigos.

A marcação que satisfaz a auditoria

Utilize um elemento picture com AVIF em primeiro lugar, WebP em segundo e o JPEG original na tag img. O navegador escolhe a primeira origem que compreende, pelo que os navegadores mais recentes obtêm o ficheiro pequeno e os mais antigos continuam a obter uma imagem.

A tag img deve permanecer, pois é ela que carrega o texto alternativo, as dimensões e a alternativa. Omitir os atributos width e height causa desvios de layout à medida que as imagens carregam, o que prejudica outra métrica do Core Web Vitals enquanto corrige esta. Defina ambos os atributos para o tamanho intrínseco em píxeis da imagem alternativa.

Como resolver a auditoria

Para resolver o aviso corretamente, siga estes 6 passos.

1. Abra o relatório do Lighthouse e liste as imagens que ele identifica, que são as que apresentam poupanças mensuráveis.
2. Verifique o tamanho de exibição de cada imagem, uma vez que muitas estão sobredimensionadas, além de estarem no formato errado.
3. Redimensione cada imagem para a sua largura real de exibição, duplicada para ecrãs de alta densidade.
4. Converta para WebP com qualidade 80, e para AVIF com qualidade 65 para as maiores imagens da página.
5. Disponibilize os resultados através de um elemento picture com o original como alternativa na img.
6. Execute novamente o Lighthouse para confirmar que o aviso desapareceu e que não surgiram desvios de layout.

O passo 3 importa mais do que o passo 4. As dimensões controlam a maior parte do tamanho do ficheiro, e um WebP sobredimensionado continua a ser uma imagem sobredimensionada. A conversão em lote demora um par de minutos, enquanto a escrita da marcação costuma demorar mais tempo.

Qual o formato para cada imagem

A sua plataforma já faz isto

Muitos sistemas de conteúdo e alojamentos convertem imagens automaticamente, por isso verifique antes de criar algo manualmente. Fazer o trabalho duas vezes é comum e desnecessário.

Teste em 2 minutos. Abra a página publicada, clique com o botão direito numa imagem e abra-a num novo separador, depois leia a extensão do ficheiro na barra de endereço. Uma extensão .webp num ficheiro que carregou como JPEG significa que a plataforma já está a converter. O Shopify, a maioria dos alojamentos geridos de WordPress e vários construtores de sites fazem isto por predefinição.

Por que razão o aviso por vezes regressa

Novos carregamentos reintroduzem o problema quando a etapa de conversão é manual e não automática. Um site limpo em janeiro mostrará o aviso novamente em junho se os editores carregarem as imagens diretamente de uma câmara.

Corrija o processo em vez de apenas os ficheiros. Ative a conversão automática ao nível da plataforma ou defina uma regra simples de que as imagens devem ser redimensionadas e convertidas antes do carregamento. Escrever a regra é importante em qualquer site onde publique mais do que uma pessoa, uma vez que a auditoria mede a pior imagem e não a média.

Deve utilizar AVIF, WebP ou ambos

Utilize apenas WebP na maioria dos sites, e adicione AVIF apenas para as maiores imagens da página. Suportar ambos duplica o número de ficheiros a gerar, armazenar e manter sincronizados para uma poupança que é pequena em imagens comuns.

O cálculo muda em sites com forte componente fotográfica, onde o AVIF poupa mais 20 a 30 por cento em ficheiros que já se medem em centenas de kilobytes. Numa página com uma imagem principal de 600 KB, trata-se de uma redução real. Numa página de miniaturas de 40 KB, o pipeline extra custa mais esforço do que o retorno que traz, e o WebP sozinho resolve a auditoria.

Verificar o resultado corretamente

Execute novamente o Lighthouse numa janela anónima com as extensões desativadas, porque as extensões do navegador distorcem a medição. As pontuações também variam entre execuções, por isso compare 3 execuções em vez de confiar num único número.

Confirme que o navegador está a receber o novo formato em vez de apenas assumir que sim. Abra as ferramentas de programador, mude para o separador Rede, filtre por imagens e recarregue a página. A coluna Tipo mostra o que foi realmente servido. Uma página que ainda serve JPEG após uma conversão significa normalmente que a marcação do elemento picture está errada, ou que uma camada de cache está a reter a versão anterior.

Auditorias relacionadas que aparecem em conjunto

• Dimensionar imagens adequadamente. A imagem é maior do que o espaço onde é exibida. Redimensione em vez de apenas comprimir.
• Codificar imagens de forma eficiente. A compressão é demasiado leve. Diminua a definição de qualidade.
• Adiar imagens fora do ecrã. Adicione carregamento diferido (lazy loading) às imagens abaixo da dobra.
• Elemento Largest Contentful Paint. Normalmente a sua imagem principal, que merece atenção primeiro.
• Os elementos de imagem não têm largura e altura explícitas. Adicione ambos os atributos para evitar desvios de layout.

Estas 5 auditorias costumam aparecer juntas, e redimensionar mais converter as imagens identificadas no relatório resolve a maioria delas de uma só vez.

Quanto é que isto realmente melhora uma página

A conversão para formatos modernos reduz tipicamente 25 a 35 por cento do peso da imagem, e redimensionar primeiro remove frequentemente muito mais. Numa página com muitas imagens, o efeito combinado é muitas vezes de 70 a 80 por cento.

A melhoria reflete-se no Largest Contentful Paint, que mede a rapidez com que o conteúdo principal aparece. Essa medição é normalmente decidida por uma única imagem, pelo que reduzir o ficheiro principal tem um efeito desproporcional à sua quota na página. Reduzir 20 imagens pequenas importa menos do que reduzir 1 grande.

O que não fazer

Não remova a alternativa em JPEG e não converta imagens que os visitantes irão descarregar. Ambos os erros trocam uma funcionalidade real por uma pequena melhoria na pontuação.

Kits de imprensa, guias para impressão, modelos descarregáveis e ficheiros de fornecedores devem permanecer em JPEG ou PNG, uma vez que o WebP não se comporta bem fora dos navegadores. Disponibilizar estes ficheiros em formatos modernos gera pedidos de suporte de utilizadores que não os conseguem abrir, o que custa mais do que a largura de banda poupada.

Converter as imagens identificadas no relatório

Converta a partir dos ficheiros originais e não das versões já publicadas, porque um JPEG comprimido transporta danos para o novo ficheiro. O codificador não consegue distinguir artefactos existentes de detalhes reais e gasta bits a preservá-los.

Arraste até 500 ficheiros de uma só vez, ou um arquivo ZIP diretamente, e todo o conjunto é convertido numa única passagem. Tudo corre no seu navegador, no seu próprio processador, pelo que os sites de clientes, recursos de desenvolvimento e páginas não publicadas nunca chegam a um servidor. A conversão de um site completo termina em poucos minutos sem que um único ficheiro atravesse a rede.

Mantenha os ficheiros convertidos ao lado dos originais utilizando nomes correspondentes, para que a marcação do elemento picture possa ser gerada com um padrão previsível, em vez de editada manualmente para cada imagem. Uma pasta que contém hero.jpg, hero.webp e hero.avif é simples de estruturar em templates, e torna a próxima migração de formato numa conversão em lote em vez de uma reescrita de cada página.