Mostra imagens com proporção incorreta

Se uma imagem renderizada tiver uma proporção significativamente diferente da proporção no arquivo de origem (a proporção natural), a imagem renderizada poderá parecer distorcida, possivelmente criando uma experiência desagradável para o usuário.

O Lighthouse sinaliza qualquer imagem com uma dimensão renderizada de mais de alguns pixels de diferença em relação à dimensão esperada quando renderizada na proporção natural:

A auditoria do Lighthouse mostra imagens exibidas com proporção incorreta

Há duas causas comuns para uma proporção incorreta da imagem:

  • Uma imagem é definida com valores explícitos de largura e altura que são diferentes das dimensões da imagem de origem.
  • A largura e a altura de uma imagem são definidas como uma porcentagem de um contêiner de tamanho variável.

Verifique se as imagens são exibidas com a proporção correta

Usar uma CDN de imagem

Uma CDN de imagem pode facilitar a automatização do processo de criação de versões de tamanhos diferentes das imagens. Confira Usar CDNs de imagem para otimizar imagens para ter uma visão geral e Como instalar a CDN de imagem do Thumbor para ver um codelab prático.

Verifique o CSS que afeta a proporção da imagem

Se você estiver com dificuldade para encontrar o CSS que está causando a proporção incorreta, o Chrome DevTools pode mostrar as declarações de CSS que afetam uma determinada imagem. Para mais informações, consulte a página Visualizar apenas o CSS que está realmente aplicado a um elemento do Google.

Verifique os atributos width e height da imagem no HTML

Quando possível, é recomendável especificar os atributos width e height de cada imagem no HTML para que o navegador possa alocar espaço para a imagem. Essa abordagem ajuda a garantir que o conteúdo abaixo da imagem não mude quando a imagem for carregada.

No entanto, especificar as dimensões da imagem em HTML pode ser difícil se você estiver trabalhando com imagens responsivas, porque não há como saber a largura e a altura até conhecer as dimensões da janela de visualização. Use a biblioteca Proporção CSS ou as caixas de proporção para ajudar a preservar as proporções de imagens responsivas.

Por fim, confira a postagem Exibir imagens com dimensões corretas para saber como exibir imagens do tamanho certo para o dispositivo de cada usuário.

Recursos