Publicado em: 8 de outubro de 2025
Reduzir o tempo de download das imagens pode melhorar o tempo de carregamento percebido da página e a LCP.
Como o insight falha
O insight vai destacar imagens com tamanhos de download desnecessariamente grandes. A economia estimada de bytes é calculada comparando o tamanho do download da imagem com uma proporção eficiente de bytes/pixel para o formato da imagem.
Como melhorar o tempo de download de imagens
Há várias estratégias recomendadas por esse insight para melhorar o tempo de download da imagem, dependendo do tamanho exibido e do formato do arquivo. Implantar uma CDN de imagens pode ser muito útil para todas essas estratégias.
Aumentar o fator de compactação da imagem
A maioria dos formatos de imagem oferece suporte a um nível de compactação que pode ser ajustado para melhorar o tamanho do arquivo de imagem, mas isso afeta a qualidade da imagem. Você pode usar ferramentas de imagem como ImageOptim, Squoosh e Imagemin para otimizar o fator de compactação de imagens.
Usar formatos de imagem modernos
AVIF e WebP são formatos de imagem com características de qualidade e compactação superiores em comparação com os formatos mais antigos JPEG e PNG. Codificar as imagens nesses formatos mais recentes é uma boa estratégia para reduzir o tamanho do download.
O AVIF é compatível com a versão mais recente de todos os principais navegadores e oferece tamanhos de arquivo menores em comparação com outros formatos com as mesmas configurações de qualidade. Consulte o codelab sobre como veicular imagens AVIF para mais informações sobre o formato.
O WebP é compatível com todos os principais navegadores e oferece melhor compactação com e sem perda para imagens na Web. Consulte Usar imagens WebP para saber mais sobre o WebP.
Use formatos de vídeo para conteúdo animado
GIFs grandes não são eficientes para exibir conteúdo animado em comparação com vídeos. Para economizar bytes de rede, use vídeos MPEG4/WebM para animações e PNG/WebP em vez de GIF.
Consulte Substituir GIFs animados por vídeos para carregar páginas mais rápido e saiba como fazer isso.
Exibir imagens com tamanho responsivo
O ideal é que sua página nunca veicule imagens maiores do que a versão renderizada na tela do usuário. Qualquer coisa maior do que isso resulta em bytes desperdiçados e diminui o tempo de carregamento da página.
Uma estratégia é usar formatos de imagem baseados em vetor, 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.
Se as imagens baseadas em vetores não forem uma opção, é melhor veicular imagens responsivas. Com imagens responsivas, você gera várias versões de cada imagem e especifica qual versão usar em HTML ou CSS usando consultas de mídia, dimensões da janela de visualização e assim por diante.
Por exemplo, o elemento <img> tem atributos srcset e sizes que podem especificar URLs de imagens para diferentes tamanhos:
Se você precisar mudar a imagem completamente, use o elemento <picture>:
Consulte Imagens responsivas e O elemento picture para saber mais.
Orientações específicas para a pilha
Esse insight também oferece orientação específica para páginas que usam as seguintes tecnologias:
AMP
- Considere exibir todos os componentes
amp-imgem formatos WebP ao especificar um substituto adequado para outros navegadores. - Para conteúdo animado, use
amp-animpara reduzir o uso da CPU quando o conteúdo estiver fora da tela.
Drupal
- Use um módulo que otimiza e reduz automaticamente o tamanho das imagens enviadas pelo site sem afetar a qualidade.
- Use os Estilos de imagens responsivas integrados fornecidos pelo Drupal em todas as imagens renderizadas no site.
Joomla
Use um plug-in ou serviço que converta automaticamente as imagens enviadas para os formatos ideais.
Magento
Use uma extensão do Magento de terceiros que otimiza imagens.
WordPress
Use um plug-in do WordPress para otimização de imagens, que as compacta sem afetar a qualidade.