Exibe imagens com proporção incorreta
Published on • Updated on
Se uma imagem renderizada tem uma proporção de aspecto significativamente diferente da proporção de seu arquivo de origem (a proporção de aspecto natural), a imagem renderizada pode parecer distorcida, possivelmente criando uma experiência desagradável para o usuário.
Como a auditoria da proporção da imagem do Lighthouse falha
O Lighthouse sinaliza qualquer imagem com uma dimensão renderizada com mais do que alguns pixels de diferença da dimensão esperada quando renderizada em sua proporção natural:
Existem duas causas comuns para uma proporção de imagem incorreta:
- Uma imagem é definida para valores explícitos de largura e altura que diferem das dimensões da imagem de origem.
- Uma imagem é definida para uma largura e altura como uma porcentagem de um contêiner de tamanho variável.
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.
Certifique-se de que as imagens sejam exibidas com a proporção correta
Use um CDN de imagem
Um CDN de imagem pode facilitar a automatização do processo de criação de versões de tamanhos diferentes de suas imagens. Confira Usar CDNs de imagem para otimizar imagens para ter uma visão geral e Como instalar o CDN de imagem Thumbor para ver um codelab prático.
Verifique o CSS que afeta a proporção da imagem
Se você estiver tendo problemas para encontrar o CSS que está causando a proporção incorreta, o Chrome DevTools pode mostrar as declarações CSS que afetam uma determinada imagem. Consulte a página do Google Ver apenas o CSS que está realmente aplicado a um elemento para obter mais informações.
Verifique os atributoswidth e height da imagem
Quando possível, é uma boa prática especificar os width e height de cada imagem em seu 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 se desloque depois que 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é que você saiba as dimensões da janela de visualização. Considere o uso da biblioteca de proporções CSS ou caixas de proporções para ajudar a preservar as proporções das imagens responsivas.
Por fim, confira a postagem Exibir imagens com dimensões corretas para aprender como exibir imagens com o tamanho certo para o dispositivo de cada usuário.
Recursos
Updated on • Improve article