改进图片传送

发布时间：2025 年 10 月 8 日

缩短图片下载时间可优化网页的感知加载时间和 LCP。

数据分析失败的原因

该数据洞见会突出显示下载大小过大的图片。系统会比较图片的下载大小与图片格式的有效字节/像素比，从而计算出估计的字节节省量。

开发者工具“改进图片传送”数据分析
开发者工具“改进图片传送”数据分析

如何缩短图片下载时间

此数据分析建议了多种策略来缩短图片下载时间，具体取决于图片的显示大小和文件格式。部署图片 CDN 对所有这些策略都非常有帮助。

提高图片压缩因子

大多数图片格式都支持可调整的压缩级别，以牺牲图片质量为代价来减小图片文件大小。您可以使用 ImageOptim、Squoosh 和 Imagemin 等图片工具来优化图片压缩率。

使用现代图片格式

AVIF 和 WebP 都是图片格式，与较旧的 JPEG 和 PNG 格式相比，它们在压缩和质量特性方面表现更出色。以这些较新的格式对图片进行编码是缩减图片下载大小的好策略。

所有主流浏览器的最新版本均支持 AVIF，与其他具有相同质量设置的格式相比，AVIF 的文件大小更小。如需详细了解 AVIF，请参阅 提供 AVIF 图片 Codelab。

所有主流浏览器都支持 WebP，并且这种格式可为网络上的图片提供出色的有损压缩和无损压缩效果。如需详细了解 WebP，请参阅使用 WebP 图片。

使用视频格式制作动画内容

与视频相比，使用大型 GIF 提供动画内容会导致效率低下。建议您改用 MPEG4/WebM 视频（来提供动画）和 PNG/WebP（来提供静态图片）以减少网络活动消耗的字节数。

如需了解如何将 GIF 图片替换为视频，请参阅将 GIF 动画替换为视频以加快网页加载速度。

提供自适应尺寸的图片

理想情况下，网页提供的图片不应大于在用户屏幕上呈现的版本。如果图片大于此值，只会浪费字节并减慢网页加载时间。

一种策略是使用基于矢量的图片格式，例如 SVG。借助有限的代码，SVG 图像可以缩放到任意大小。如需了解详情，请参阅使用 SVG 替换复杂图标。

如果无法使用基于矢量的图片，最好提供“自适应”图片。借助自适应图片，您可以生成每个图片的多个版本，然后使用媒体查询、视口尺寸等在 HTML 或 CSS 中指定要使用的版本。

例如，<img> 元素具有 srcset 和 sizes 属性，可用于指定不同尺寸的图片网址：

如果您需要完全更改图片，可以使用 &lt;picture> 元素：

如需了解详情，请参阅自适应图片和 picture 元素。

针对特定堆栈的指南

此数据分析还针对使用以下技术的网页提供特定于堆栈的指导：

AMP

Drupal

  • 建议您使用模块自动优化通过网站上传的图片，并在不影响图片质量的前提下缩减这些图片的大小。
  • 请确保为网站上呈现的所有图片使用 Drupal 提供的内置自适应图片样式。

Joomla

建议您使用可自动将您上传的图片转换为最佳格式的插件或服务。

Magento

不妨考虑使用可优化图片的第三方 Magento 扩展程序。

WordPress

建议您使用图片优化 WordPress 插件，以在不影响图片质量的前提下压缩图片大小。

资源