选择正确的图片格式

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

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

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

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

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

<ph type="x-smartling-placeholder">
</ph> 矢量图像和光栅图像放大后
放大后的矢量图像 (L) 光栅图像 (R)
  • 矢量图形 使用线、点和多边形来表示图像。
  • 光栅图形 通过对矩形网格中每个像素的各个值进行编码来表示图像。

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

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

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

高分辨率屏幕的影响

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

<ph type="x-smartling-placeholder">
</ph> 三张图片,显示了 CSS 像素和设备像素之间的区别。
CSS 像素和设备像素之间的区别。

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

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

屏幕分辨率 总像素数 未压缩文件大小(每像素 4 字节)
1x 100 x 100 = 10,000 40,000 个字节
2 倍 100 x 100 x 4 = 40,000 160,000 字节
3 倍 100 x 100 x 9 = 90,000 360,000 字节

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

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

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

不同光栅图片格式的功能

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

格式 透明度 动画 浏览器
PNG 支持 (APNG) 全部
JPEG 全部
WebP 所有现代浏览器。请参阅下方的我可以使用?
AVIF 所有现代浏览器。请参阅下方的我可以使用?

有两种普遍支持的光栅图片格式: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 是感知性能的一部分,因为它用于衡量网页上最大(也就是最容易察觉)元素的显示速度。