优化图片

当 PageSpeed Insights 检测到以下情形时,就会触发此规则:网页上的图片可被优化以减小其文件尺寸,且不会显著影响其视觉效果。

概览

对于网页来说,在所下载的字节数中,图片往往会占很大比例。因此,优化图片通常可以卓有成效地减少字节数和改进性能:浏览器需要下载的字节数越少,对客户端带宽的争用就越少,浏览器下载内容并在屏幕上呈现内容的速度就越快。

建议

在为您的图片资源寻找最理想的格式和优化策略时,您需要仔细分析多个方面:要编码的数据的类型、图片格式功能、质量设置、分辨率,等等。此外,您还需要考虑:是否最好以矢量格式提供某些图片、是否可通过 CSS 实现所需的效果,以及如何为每类设备传送已进行相应调整的资源。

针对所有类型的图片进行优化

针对 GIF、PNG 和 JPEG 图片进行优化

GIFPNGJPEG 格式在整个互联网的图片流量中占 96%。鉴于这些图片格式的热门程度,PageSpeed Insights 提供了具体的优化建议。为方便起见,您可以直接从 PageSpeed Insights(它使用的是 modpagespeed.com 中提供的图片优化库)下载经过优化的图片。

您还可以使用相关工具(例如 ImageMagick 提供的 convert 库)来应用类似的优化 - 请参阅下面的示例说明。

如果您使用第三方工具,则请注意:倘若您的图片在此之前已进行了充分的优化,转换后的图片可能会变大。如果发生这种情况,请使用您的原始图片。

GIFPNG 均是无损格式,因为压缩过程不会对这两类图片的外观做出任何修改。对于静止图片,PNG 可以实现更好的压缩宽高比和更好的外观质量。对于动画图片,请考虑使用 video 元素(而不是 GIF)以实现更好的压缩效果。

  • 始终将 GIF 转换为 PNG 格式,除非原始图片是动画图片或非常小(不足几百字节)。
  • 对于 GIF 和 PNG,如果所有像素都是不透明的,请移除 Alpha 通道。

例如,您可以使用 convert 库通过如下命令优化 GIF 和 PNG 图片(括号内的参数是可选的):

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png

cuppa.png
cuppa.png(1763 字节)

convert cuppa.png -strip cuppa_converted.png

cuppa_converted.png
cuppa_converted.png(856 字节)

JPEG 是一种有损格式。压缩过程会去除此类图片的外观细节,但压缩宽高比可能会是 GIF 或 PNG 的 10 倍。

  • 如果图片质量较高,请将其降至 85。当图片质量大于 85 时,图片会迅速变大,但外观上的改善却微乎其微。
  • 将色度采样率降至 4:2:0,因为人类视觉系统对亮度(与颜色相较而言)更敏感。
  • 对超过 10k 字节的图片使用渐进式格式。渐进式 JPEG 通常可为大型图片实现更高的压缩宽高比(与基准 JPEG 相较而言),并具有渐进式呈现图片的优势。
  • 如果图片是黑白的,请使用灰度色彩空间。

例如,您可以使用 convert 库通过如下命令优化 JPEG 图片(括号内的参数是可选的):

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg

puzzle.jpg
puzzle.jpg(13501 字节)

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

puzzle_converted.jpg
puzzle_converted.jpg(4599 字节)