A seção "Oportunidades" do relatório do Lighthouse lista todas as imagens da sua página que não estão no tamanho adequado, além da possível economia em kibibytes (KiB). Redimensione estas imagens para economizar dados e melhorar o tempo de carregamento da página:
Como o Lighthouse calcula imagens muito grandes
Para cada imagem na página, o Lighthouse compara o tamanho da imagem renderizada com o tamanho da imagem real. O tamanho renderizado também considera a proporção de pixels do dispositivo. Se o tamanho renderizado for pelo menos 4 KiB menor que o tamanho real, a imagem vai ser reprovada na auditoria.
Estratégias para dimensionar imagens corretamente
O ideal é que a página nunca veicule imagens maiores do que a versão renderizada na tela do usuário. Qualquer valor maior do que isso resulta em bytes desperdiçados e reduz o tempo de carregamento da página.
A principal estratégia para exibir imagens de tamanho adequado é chamada de "imagens responsivas". Com as imagens responsivas, você gera várias versões de cada imagem
e especifica qual delas usar no HTML ou CSS usando consultas de mídia, dimensões da janela de visualização e assim por diante. Além disso, RespImageLint é um marcador útil para identificar os valores srcset e sizes ideais para suas imagens. Consulte Exibir imagens responsivas para saber mais sobre esses atributos.
CDNs de imagens são outra estratégia principal para exibir imagens de tamanho adequado. Pense nas CDNs de imagem como APIs de serviços da Web para transformar imagens.
Outra estratégia é usar formatos de imagem baseados em vetores, como SVG. Com uma quantidade finita de código, uma imagem SVG pode ser dimensionada para qualquer tamanho. Consulte Substituir ícones complexos por SVG para saber mais.
Ferramentas como gulp-responsive ou reply-images-generator podem ajudar a automatizar o processo de conversão de uma imagem em vários formatos. Há também CDNs de imagem, que permitem gerar várias versões ao fazer upload de uma imagem ou solicitá-la na sua página.
Orientações específicas para a pilha
AMP
Use o
suporte do componente
amp-img
para
srcset
para especificar quais recursos de imagem serão usados com base no tamanho da tela. Consulte também Imagens responsivas com srcset, tamanhos e alturas.
Angular
Use o utilitário BreakpointObserver no Component Dev
Kit (CDK) para gerenciar pontos de interrupção de imagem.
Drupal
Use o recurso integrado Estilos de imagem responsivas (disponível no Drupal 8 e versões mais recentes) ao renderizar campos de imagem usando modos de visualização, visualizações ou imagens enviadas pelo editor WYSIWYG.
Gatsby
Use o plug-in gatsby-image para gerar várias imagens menores para smartphones e tablets. Ele também pode criar marcadores de imagem SVG para um carregamento lento eficiente.
Joomla
Considere usar um plug-in de imagens responsivas.
WordPress
Faça upload de imagens diretamente pela biblioteca de mídia para garantir
que os tamanhos de imagem necessários estejam disponíveis. Em seguida, insira as imagens da biblioteca
ou use o widget de imagem para garantir que os tamanhos ideais sejam usados,
incluindo os dos pontos de interrupção responsivos. Evite usar imagens Full Size,
a menos que as dimensões sejam adequadas para o uso. Consulte Como inserir imagens em postagens e páginas.