选择正确的图片格式

Ilya Grigorik

Jeremy Wagner

您首先要问问自己，图片是否为 才是实现所需效果的必要条件 如果您可以删除某个图片资源 相对于 HTML、CSS、JavaScript 和网页上的其他资源，这通常需要大量的字节， 那么这始终是最好的优化策略。 也就是说，如果使用得当，图片传达的信息可能比千言万语还多， 因此，是否找到平衡点取决于您自己

接下来，您应考虑是否有替代技术可以带来更好的效果， 只是为了提高效率：

• CSS 效果（例如阴影或渐变）和 CSS 动画 可用于生成与分辨率无关的资源，这些资源在任何分辨率和缩放级别下总是清晰可见， 通常只占图片文件所需字节的一小部分。
• 网页字体支持使用美观的字体 同时保留选择、搜索 和调整文字大小 - 这显著提高了易用性。

如果您发现自己正在图像资产中编码文本，请停下来重新考虑。 出色的排版对于良好的设计、品牌信息和可读性至关重要， 但图片中的文字会导致用户体验不佳： 文字不可选择、不可搜索、不可缩放 不便于访问，并且不适合高 DPI 设备。 使用网页字体需要有自己的一套优化措施， 但它能够解决上述所有问题，而且在显示文字方面始终是更好的选择。

选择正确的图片格式

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

</ph>

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

每种格式各有利弊。 矢量格式非常适合包含不太复杂的几何形状（例如徽标、文本或图标）的图片。 它们可在任何分辨率和缩放设置下呈现清晰的画面， 因此非常适合需要以不同尺寸显示的高分辨率屏幕和素材资源。

然而，当场景复杂（例如照片）时，矢量格式的效果会不太好： 描述所有形状的 SVG 标记数量可能非常高 输出可能仍然无法达到“逼真”效果。 在这种情况下，您应该使用光栅图片格式 例如 PNG、JPEG、WebP 或 AVIF。

光栅图像没有与分辨率或缩放无关的良好属性 ，放大光栅图片时，您会看到图形参差不齐且模糊不清。 因此，您可能需要以不同的分辨率保存多个版本的光栅图片 为用户提供最佳体验。

高分辨率屏幕的影响

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

</ph>

高 DPI (HiDPI) 屏幕可以产生精美的效果，但有一个明显的折衷方案： 图片素材资源需要更多详细信息，才能充分利用较高的设备像素数。 好消息是，矢量图像非常适合这项任务， 因为它们能以任何分辨率渲染，而且能够呈现出清晰的效果。 您可能需要支付更高的处理成本来呈现更精细的细节 但基础资源相同，与分辨率无关。

另一方面，光栅图像是按像素对图像数据进行编码的，因此带来了更大的挑战。 因此，像素数越大，光栅图片的文件大小就越大。 考虑以 100x100 (CSS) 像素显示的照片素材资源之间的差异：

当我们将物理屏幕的分辨率翻倍时， 那么总像素数增加四倍 双倍水平像素数乘以双倍垂直像素数。 因此，“2 倍”不仅如此，屏幕的所需像素数也会增加一倍！

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

• 尽可能首选矢量图像，因为它们与分辨率无关，并且始终能提供清晰的结果。
• 如果需要光栅图片，请提供自适应图片。

不同光栅图片格式的功能

除了不同的有损和无损压缩算法外， 不同的图片格式支持不同的功能，例如动画和透明度 (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) 格式！
   • 如果图片资产包含文本，请停下来重新考虑。图片中的文字无法选择、搜索或“缩放”。 如果您需要表现一种自定义外观（出于品牌推广或其他原因），请改用网页字体。
3. 您是否要优化照片、屏幕截图或类似的图片素材资源？请使用 JPEG、有损 WebP 或 AVIF。
   • JPEG 组合使用有损和无损优化来减小图片资产的文件大小。请尝试使用多种 JPEG 质量级别，为您的资产找到最佳质量与文件大小权衡点。
   • 有损 WebP 或有损 AVIF 是网络质量图片的理想 JPEG 替代方案，但请注意，有损模式会舍弃一些信息以获得较小的图片。这意味着，所选颜色可能与等效的 JPEG 不同。

最后，请注意，如果您使用 WebView 在针对具体平台的应用中呈现内容， 那么您就可以完全控制客户端，并能仅使用 WebP 格式！ Facebook 和许多其他平台都使用 WebP 在其应用内传送所有图片， 节省的费用绝对物有所值

对 Largest Contentful Paint (LCP) 的影响

图片可能是 LCP 候选项。也就是说，图片的大小会影响其加载时间。当图片为 LCP 候选图片时，对图片进行高效编码对于改进 LCP 至关重要。

您应尽量采纳本指南中的建议，使网页的感知性能尽可能快，可满足所有用户的需求。LCP 是感知性能的一部分，因为它用于衡量网页上最大（也就是最容易察觉）元素的显示速度。