首先,您应该问问自己,实际上是否必须使用某张图片才能实现您所需的效果。好的设计应简单明了,而且始终能带来最佳性能。 如果您能消除某个图片资源(相对于 HTML、CSS、JavaScript 以及网页上的其他资源,此类资源通常需要大量的字节),那么这始终是最佳优化策略。尽管如此,一幅恰当的图片所传达的信息并非千言万语,因此需要由您来找到平衡。
接下来,您应考虑是否存在某种替代技术,从而以更高效的方式实现所期望的结果:
- CSS 效果(例如阴影或渐变)和 CSS 动画可用于生成与分辨率无关的资源,这些资源在任何分辨率和缩放级别下始终都清晰可见,所需字节数通常仅为图片文件的一小部分。
- 网页字体支持使用精美的字体,同时保留选择文本、搜索文本和调整文本大小的功能,显著提高了易用性。
如果您发现自己在图片资源中编码了文本,请停下来重新考虑。 出色的排版对于良好的设计、品牌推广和可读性至关重要,但图片中的文本会带来糟糕的用户体验:文本不可选择、不可搜索、不可缩放、无法访问,且不适合高 DPI 设备。使用网页字体需要有自己的一组优化,但这可以解决所有这些问题,并且始终是显示文本的更好选择。
选择合适的图片格式
如果您确定某张图片是正确的选项,则应仔细选择适合该任务的图片。
![放大后的矢量和光栅图像](https://web.developers.google.cn/static/articles/choose-the-right-image-format/image/zoomed-vector-raster-im-c090b61f8ec5a.png?authuser=8&hl=da)
每种格式都有自己的优缺点。 矢量格式非常适合由简单几何形状(例如徽标、文本或图标)组成的图片。此类图片可在任何分辨率和缩放设置下提供清晰的效果,因此非常适合高分辨率屏幕和需要以不同尺寸显示的资源。
但是,当场景复杂(例如照片)时,矢量格式的效果就达不到要求了:用于描述所有形状的 SVG 标记量可能非常高,并且输出看上去可能仍然无法达到“逼真”效果。在这种情况下,您应该使用 PNG、JPEG、WebP 或 AVIF 等光栅图片格式。
光栅图像没有与分辨率或缩放无关的好属性,当您放大光栅图像时,您会看到参差不齐且模糊的图形。因此,您可能需要以不同的分辨率保存多个版本的光栅图像,以便为用户提供最佳体验。
高分辨率屏幕的影响
像素分为以下两种:CSS 像素和设备像素。单个 CSS 像素可能直接对应于单个设备像素,也可能由多个设备像素提供支持。 这是什么意思?设备像素越多,屏幕上显示的内容就越精细。
![三张图片,展示了 CSS 像素和设备像素之间的差异。](https://web.developers.google.cn/static/articles/choose-the-right-image-format/image/three-images-showing-dif-674a2b17f1ab7.png?authuser=8&hl=da)
高 DPI (HiDPI) 屏幕可以实现精美的效果,但有一个明显的权衡点:图像资源需要更多的细节,才能利用更高的设备像素数。好消息是,矢量图像非常适合此任务,因为它们可以在任何分辨率下渲染并获得清晰的效果。要渲染更精细的细节,您可能需要支付更高的处理成本,但底层资源是相同的,并且与分辨率无关。
另一方面,光栅图像的挑战更大,因为它们基于像素对图像数据进行编码。因此,像素数越大,光栅图片的文件大小就越大。例如,让我们考虑以 100x100 (CSS) 像素显示的照片素材资源之间的差异:
屏幕分辨率 | 像素总数 | 未压缩文件大小(每像素 4 字节) |
---|---|---|
1 倍 | 100 x 100 = 10,000 | 40000 字节 |
2x | 100 x 100 x 4 = 40,000 | 160000 字节 |
3 倍 | 100 x 100 x 9 = 90,000 | 360000 字节 |
当我们将物理屏幕的分辨率翻倍时,像素总数将增加四倍:双倍的水平像素数乘以双倍的垂直像素数。因此,“2x”屏幕不仅会增加所需的像素数量,还会翻倍!
那么,这在实践中意味着什么呢? 高分辨率屏幕让您可以提供精美的图片,这是一项很棒的产品功能。 不过,高分辨率屏幕也需要高分辨率图片,因此:
- 请尽可能优先选择矢量图像,因为它们与分辨率无关,并且始终能够提供清晰的效果。
- 如果需要光栅图片,请提供自适应图片。
不同光栅图像格式的功能
除了不同的有损和无损压缩算法之外,不同的图片格式还支持不同的功能,例如动画和透明度 (alpha) 通道。因此,需要综合考虑预期视觉效果和功能要求,才能为特定图像选择“正确的格式”。
形式 | 透明度 | 动画 | Browser |
---|---|---|---|
PNG | 是 | 否 | All |
JPEG | 否 | 否 | All |
WebP | 是 | 是 | 所有现代浏览器。有关详情,请参阅我可以使用吗? |
AVIF | 是 | 是 | 不可以。请参阅下方的我可以使用吗? |
有两种普遍支持的光栅图片格式:PNG 和 JPEG。除了这些格式之外,现代浏览器还支持较新的 WebP 格式,只有部分浏览器支持较新的 AVIF 格式。这两种新的格式都可以提供更好的整体压缩效果,并且具有更多功能。那么,您应使用哪种格式呢?
WebP 和 AVIF 通常比旧格式提供更好的压缩效果,因此应尽可能使用。您可以将 WebP 或 AVIF 图片与 JPEG 或 PNG 图片一起用作后备图片。如需了解详情,请参阅使用 WebP 图片。
对于较旧的图片格式,请考虑以下因素:
- 是否需要动画?使用
<video>
元素。- GIF 呢?GIF 将调色板限制为最多 256 种颜色,并且创建的文件大小明显大于
<video>
元素。请参阅将动画 GIF 替换为视频。
- GIF 呢?GIF 将调色板限制为最多 256 种颜色,并且创建的文件大小明显大于
- 您是否需要以最高分辨率保留微小细节?请使用 PNG 或无损 WebP。
- 除了选择调色板的大小外,PNG 不采用任何有损压缩算法。因此,它可以生成最高质量的图片,但代价是文件大小要比其他格式大得多。谨慎使用。
- WebP 具有无损编码模式,可能比 PNG 更高效。
- 如果图片资源包含由几何形状组成的图像,请考虑将其转换为矢量 (SVG) 格式!
- 如果图片素材资源包含文字,请停下来重新考虑。图片中的文本无法选择、搜索或“缩放”。 如果您需要表现一种自定义外观(出于品牌推广或其他原因),请改用网页字体。
- 您是否要优化照片、屏幕截图或类似的图片素材资源?请使用 JPEG、有损 WebP 或有损 AVIF。
- JPEG 结合使用有损和无损优化来减小图片资源的文件大小。尝试使用多个 JPEG 质量级别,为您的资源找到最佳画质与文件大小的权衡取舍。
- 有损 WebP 或有损 AVIF 可能是可接受的 JPEG 替代方案,但请注意,WebP 的有损模式尤其会舍弃一些色度信息,以获得较小的图像。这意味着,选定颜色可能与等效的 JPEG 不同。
最后请注意,如果您使用 WebView 在平台专用应用中呈现内容,那么您可以完全控制客户端,并且只能使用 WebP!Facebook 和许多其他公司都使用 WebP 在其应用中传送所有图片,节省的开支绝对物有所值。
对 Largest Contentful Paint (LCP) 的影响
图片可能是 LCP 候选项。这意味着图片的大小会影响其加载时间。当图片是 LCP 候选版本时,高效编码图片对于提高 LCP 至关重要。
您应尽量遵循本文中提供的建议,以便尽可能地快速提升网页的感知性能。LCP 是感知性能的一部分,因为它用于衡量网页上最大(也就是最易感知)元素的显示速度。