Skip to content
Aprender Medir Blog Case studies Sobre
Nesta página
  • Como a auditoria da proporção da imagem do Lighthouse falha
  • Certifique-se de que as imagens sejam exibidas com a proporção correta
    • Use um CDN de imagem
    • Verifique o CSS que afeta a proporção da imagem
    • Verifique os atributoswidth e height da imagem
  • Recursos

Exibe imagens com proporção incorreta

May 2, 2019 — Atualizado Apr 29, 2020
Available in: Español, 한국어, 中文, English
Appears in: Auditorias de práticas recomendadas
Nesta página
  • Como a auditoria da proporção da imagem do Lighthouse falha
  • Certifique-se de que as imagens sejam exibidas com a proporção correta
    • Use um CDN de imagem
    • Verifique o CSS que afeta a proporção da imagem
    • Verifique os atributoswidth e height da imagem
  • Recursos

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:

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

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 #

  • Código-fonte para a auditoria Exibe imagens com proporção incorreta
  • Proporção CSS
  • Caixas de proporção de aspecto
  • Sirva imagens com dimensões corretas
Last updated: Apr 29, 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.