Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Como o Lighthouse calcula imagens superdimensionadas
  • Estratégias para dimensionar imagens adequadamente
  • Orientações para pilhas específicas
    • AMP
    • Angular
    • Drupal
    • Gatsby
    • Joomla
    • WordPress
  • Recursos

Redimensione imagens corretamente

May 2, 2019 — Atualizado Jun 20, 2020
Available in: 한국어, Русский, English
Appears in: Auditorias de desempenho
Nesta página
  • Como o Lighthouse calcula imagens superdimensionadas
  • Estratégias para dimensionar imagens adequadamente
  • Orientações para pilhas específicas
    • AMP
    • Angular
    • Drupal
    • Gatsby
    • Joomla
    • WordPress
  • Recursos

A seção Oportunidades de seu relatório Lighthouse lista todas as imagens em sua página que não têm o tamanho adequado, junto com a economia potencial em kibibytes (KiB). Redimensione essas imagens para economizar dados e melhorar o tempo de carregamento da página:

Uma captura de tela da auditoria Lighthouse Redimensione imagens corretamente

Como o Lighthouse calcula imagens superdimensionadas #

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 leva em consideração a proporção de pixels do dispositivo. Se o tamanho renderizado for pelo menos 4 KB menor do que o tamanho real, a imagem será reprovada na auditoria.

Estratégias para dimensionar imagens adequadamente #

O ideal é que sua página nunca sirva imagens maiores do que a versão renderizada na tela do usuário. Qualquer coisa maior do que apenas resulta em bytes perdidos e diminui o tempo de carregamento da página.

A principal estratégia para servir imagens de tamanhos adequados é chamada de "imagens responsivas". Com imagens responsivas, você gera várias versões de cada imagem e, a seguir, especifica qual versão usar em seu HTML ou CSS usando media queries, dimensões da viewport e assim por diante. Veja Sirva imagens responsivas para saber mais.

Os CDNs de imagem são outra boa estratégia para servir imagens de tamanho apropriado. Você pode pensar em CDNs de imagem como APIs de serviços web para transformar imagens.

Outra estratégia é usar formatos de imagem vetoriais, como SVG. Com uma quantidade finita de código, uma imagem SVG pode ser redimensionada para qualquer tamanho. Veja Substitua ícones complexos por SVG para saber mais.

Ferramentas como gulp-responsive ou responsive-images-generator podem ajudar a automatizar o processo de conversão de uma imagem em múltiplos formatos. Existem também CDNs de imagem que permitem gerar múltiplas versões, seja ao fazer upload de uma imagem ou ao solicitá-la em sua página.

Orientações para pilhas específicas #

AMP #

Use o suporte ao componente amp-img srcset para especificar quais ativos de imagem usar com base no tamanho da tela. Veja também Imagens responsivas com srcset, sizes e heights .

Angular #

Considere o uso do utilitário BreakpointObserver do Component Dev Kit (CDK) para gerenciar pontos de interrupção de imagem.

Drupal #

Use o recurso integrado Responsive Image Styles (disponível no Drupal 8 e superior) ao renderizar campos de imagem por meio de modos de visualização, visualizações ou imagens carregadas através do editor WYSIWYG.

Gatsby #

Use o plugin gatsby-image para gerar várias imagens menores para smartphones e tablets. Ele também pode criar placeholders de imagem SVG para carregamento lazy e eficiente.

Joomla #

Considere o uso de um plugin para imagens responsivas .

WordPress #

Carregue imagens diretamente pela biblioteca de mídia para garantir que os tamanhos de imagem necessários estejam disponíveis e, em seguida, insira-as da biblioteca de mídia ou use o widget de imagem para garantir que os tamanhos de imagem ideais sejam usados (incluindo aqueles para os breakpoints responsivos). Evite usar imagens Full Size a menos que as dimensões sejam adequadas para seu uso. Veja Inserindo imagens em postagens e páginas.

Recursos #

  • Código fonte para a auditoria Redimensione imagens corretamente
  • Sirva imagens com dimensões corretas
Last updated: Jun 20, 2020 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Web Fundamentals
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.