选择正确的图片格式

Ilya Grigorik

Jeremy Wagner

您首先要问自己的问题是，是否真的需要图片来实现您想要的效果。如果您可以移除图片资源（与 HTML、CSS、JavaScript 和网页上的其他资源相比，图片资源通常需要大量字节），这始终是最佳优化策略。不过，一张恰到好处的图片也能传达比千言万语更多的信息，因此您需要自己找到合适的平衡点。

接下来，您应考虑是否有其他技术可以更高效地提供更好的结果：

• CSS 效果（例如阴影或渐变）和 CSS 动画可用于制作与分辨率无关的素材资源，这些素材资源在任何分辨率和缩放级别下始终看起来都很清晰，而且所需的字节数通常只占图片文件所需字节数的一小部分。
• Web 字体可让您使用美观的字体，同时保留选择、搜索和调整文本大小的功能，大大提升了易用性。

如果您发现自己在图片素材资源中编码文本，请停止并重新考虑。出色的排版对于优质设计、品牌推广和可读性至关重要，但图片中的文本会带来糟糕的用户体验：文本不可选择、不可搜索、不可放大、不可访问，并且不适用于高 DPI 设备。使用 Web 字体需要进行一系列优化，但它可以解决所有这些问题，并且在显示文本方面始终是更好的选择。

选择合适的图片格式

如果您确定图片是正确的选项，则应仔细为作业选择合适的图片类型。

• 矢量图形使用线条、点和多边形来表示图片。
• 光栅图形通过在矩形网格中编码每个像素的各个值来表示图片。

每种格式都有各自的优点和缺点。矢量格式非常适合由不太复杂的几何图形组成的图片，例如徽标、文字或图标。 这种格式可在任何分辨率和缩放设置下提供清晰的图片，因此非常适合高分辨率屏幕和需要以不同尺寸显示的素材资源。

不过，当场景复杂（例如照片）时，矢量格式就显得不足：用于描述所有形状的 SVG 标记量可能非常大，并且输出可能仍然看起来不够“逼真”。在这种情况下，您应使用 PNG、JPEG、WebP 或 AVIF 等光栅图片格式。

光栅图片不具备与分辨率或缩放级别无关的相同优良特性：当您放大光栅图片时，您会看到锯齿状和模糊的图形。因此，您可能需要保存不同分辨率的光栅图片的多个版本，以便为用户提供最佳体验。

高分辨率屏幕的影响

像素有两种：CSS 像素和设备像素。单个 CSS 像素可能直接对应于单个设备像素，也可能由多个设备像素提供支持。有什么意义？设备像素越多，屏幕上显示的内容细节就越精细。

高 DPI (HiDPI) 屏幕可呈现出精美的效果，但有一个明显的权衡：图片素材资源需要更精细，才能充分利用设备更高的像素数。好消息是，矢量图片非常适合此任务，因为它们可以在任何分辨率下呈现清晰的结果。虽然您可能需要承担更高的处理费用来呈现更精细的细节，但底层素材资源是相同的，并且不受分辨率影响。

另一方面，光栅图片会带来更大的挑战，因为它们会按像素编码图片数据。因此，像素数越多，光栅图片的文件大小就越大。请考虑以下以 100 x 100 (CSS) 像素显示的照片素材资源之间的差异：

将实体屏幕的分辨率翻倍后，像素总数会增加 4 倍：水平像素数翻倍，乘以垂直像素数翻倍。因此，“2x”屏幕所需的像素数不仅翻了一番，而是翻了四倍！

那么，这在实践中意味着什么？ 高分辨率屏幕可让您提供精美的图片，这可能是一项出色的商品功能。不过，高分辨率屏幕也需要高分辨率图片，因此：

• 尽可能使用矢量图像，因为它们不受分辨率影响，并且始终能提供清晰的结果。
• 如果需要使用光栅图片，请提供响应式图片。

不同光栅图像格式的特点

除了不同的有损和无损压缩算法之外，不同的图片格式还支持不同的功能，例如动画和透明度 (Alpha) 通道。因此，为特定图片选择“合适的格式”需要综合考虑合适的视觉效果和功能要求。

有两种通用的光栅图像格式：PNG 和 JPEG。 除了这些格式之外，现代浏览器还支持较新的 WebP 和 AVIF 图片格式。这两种新格式都具有更好的整体压缩率和更多功能。那么，您应该使用哪种格式？

WebP 和 AVIF 通常比旧格式的压缩效果更好，应尽可能使用。您可以将 WebP 或 AVIF 图片与 JPEG 或 PNG 图片搭配使用，作为后备。如需了解详情，请参阅使用 WebP 图片。

对于旧版图片格式，请考虑以下事项：

1. 您需要动画吗？使用 <video> 元素。
   • GIF 呢？GIF 将调色板限制为最多 256 种颜色，并且生成的文件大小比 <video> 元素大得多。APNG 比 GIF 提供更多颜色，但也比画质相当的视频格式大得多。请参阅将 GIF 动画替换为视频。
2. 您是否需要以最高分辨率保留精细细节？使用 PNG 或无损 WebP。
   • 除了选择调色板的大小之外，PNG 不会应用任何有损压缩算法。因此，它可以生成画质最高的图片，但与其他格式相比，文件大小要大得多。请谨慎使用。
   • WebP 具有无损编码模式，可能比 PNG 更高效。
   • 如果图片素材资源包含由几何图形组成的图像，请考虑将其转换为矢量 (SVG) 格式！
   • 如果图片素材资源包含文字，请停止操作并重新考虑。图片中的文本无法选择、搜索或“放大”。 如果您需要传达自定义外观（出于品牌推广或其他原因），请改用 Web 字体。
3. 您要优化的是照片、屏幕截图还是类似的图片素材资源？使用 JPEG、有损 WebP 或 AVIF。
   • JPEG 结合使用有损和无损优化来缩减图片素材资源的文件大小。尝试使用几种 JPEG 质量级别，以便找到最适合资源的质量与文件大小权衡。
   • 有损 WebP 或有损 AVIF 是 Web 图片质量的绝佳 JPEG 替代方案，但请注意，有损模式会丢弃一些信息以缩减图片大小。这意味着，部分颜色可能与等效的 JPEG 图片不同。

最后，请注意，如果您使用 WebView 在特定平台的应用中呈现内容，则可以完全控制客户端，并且可以专门使用 WebP！Facebook 和许多其他应用都使用 WebP 在应用中传送所有图片，节省下来的资源绝对值得。

对 Largest Contentful Paint (LCP) 的影响

图片可能是LCP 候选图片。也就是说，图片的大小会影响其加载时间。如果某张图片是 LCP 候选图片，那么高效编码该图片对于缩短 LCP 用时至关重要。

您应努力遵循本指南中的建议，以便为所有用户提供尽可能快速的网页感知性能。LCP 属于感知性能的一部分，因为它衡量的是网页上最大的（因此最易于感知）元素的显示速度。