Skip to content
学习 衡量 博客 Case studies 关于
本页内容
  • Lighthouse 图像纵横比审计失败的原因
  • 确保图像以正确的纵横比显示
    • 使用图像 CDN
    • 检查影响图像纵横比的 CSS
    • 检查图像在 HTML 中的width和height属性
  • 资源

显示纵横比不正确的图像

May 2, 2019 — 更新日期 Apr 29, 2020
Available in: Español, 한국어, Português, English
Appears in: 最佳做法审核
本页内容
  • Lighthouse 图像纵横比审计失败的原因
  • 确保图像以正确的纵横比显示
    • 使用图像 CDN
    • 检查影响图像纵横比的 CSS
    • 检查图像在 HTML 中的width和height属性
  • 资源

如果渲染图像的纵横比与其源文件(自然纵横比)的纵横比存在显著不同,那么呈现的图像会很失真,可能会造成很不愉快的用户体验。

Lighthouse 图像纵横比审计失败的原因 #

Lighthouse 会标记出其渲染尺寸与以自然比例渲染时的预期尺寸相差超过几个像素的图像:

Lighthouse 审计显示展示的图像纵横比不正确

图像纵横比不正确的常见原因有两个:

  • 图像被设置为与源图像尺寸不同的显式宽度和高度值。
  • 图像的宽度和高度被设为可变大小容器的百分比。
Each Best Practices audit is weighted equally in the Lighthouse Best Practices Score. Learn more in The Best Practices score.

确保图像以正确的纵横比显示 #

使用图像 CDN #

图像 CDN 可以更轻松地将创建不同大小版本图像的过程自动化。查看使用图像 CDN 优化图像来了解基本情况,并查看如何安装 Thumbor 图像 CDN来了解 codelab 实践。

检查影响图像纵横比的 CSS #

如果您找不到导致纵横比不正确的 CSS,Chrome DevTools 可以为您显示影响给定图像的 CSS 声明。有关详细信息,请参阅 Google 的《仅查看实际应用于元素的 CSS》页面。

检查图像在 HTML 中的width和height属性 #

如有可能,最好在 HTML 页面中指定每个图像的width和height属性,以便浏览器为图像分配空间。这种方法有助于确保图像加载后图像下方的内容不会发生偏移。

但是,如果您使用的是响应式图像,那么在 HTML 中指定图像尺寸可能会很困难,因为您无法在知道视区尺寸之前知道宽度和高度的值。请考虑使用 CSS Aspect Ratio 库或纵横比框来保留响应式图像的纵横比。

最后,查看以正确尺寸提供图像一文,了解如何为每个用户的设备提供合适尺寸的图像。

资源 #

  • 显示纵横比不正确的图像审计的源代码
  • CSS Aspect Ratio
  • 纵横比框
  • 以正确尺寸提供图像
Last updated: Apr 29, 2020 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 网站开发基础
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

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.