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.
Como a auditoria de proporção de imagem do Lighthouse falha
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:
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.