在网页中选择正确的图像格式

在网页中选择正确的图像格式

好的设计很简单,也总是能产生最好的性能。如果可以消除图像资源,该资源通常需要大量相对于 HTML、CSS、JavaScript 和页面上的其他资源的字节数,那么这始终是最好的优化策略。也就是说,一个良好的图像可以传达比一千个字更多的信息。

接下来,你应该考虑是否有替代技术可以提供预期的结果,但以更高效的方式:

  • CSS 效果(如阴影或渐变)和 CSS 动画可用于生成与分辨率无关的资源,这些资源始终在每个分辨率和缩放级别上看起来锐利,通常只有图像文件所需的字节的一小部分。
  • Web 字体支持使用漂亮的字体,同时保持选择、搜索和调整文本大小的能力,这是可用性的显著改进。

如果你发现自己在图像资源中编码文本,请停止并重新考虑。出色的排版对于良好的设计、品牌和可读性至关重要,但图像文本提供糟糕的用户体验:文本不可选择、不可搜索、不可缩放、不可访问且对高 DPI 设备不友好。使用Web字体需要它自己的一组优化,但它解决了所有这些问题,并且总是显示文本的更好选择。

选择正确的图像格式

如果你确定图像是正确的选项,你应该仔细选择适合作业的图像。

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

放大矢量图像(L)栅格图像(R)

每种格式都有其自己的优缺点集。矢量格式非常适合由简单的几何形状(如徽标、文本或图标)组成的图像。它们在每个分辨率和缩放设置上都提供清晰的效果,这使得它们成为高分辨率屏幕和需要以不同尺寸显示的资源的理想格式。

但是,当场景变得复杂时(例如,照片),矢量格式不足:用于描述所有形状的 SVG 标记量可能高得令人望而却步,并且输出可能仍不能看起来"逼真"。在这种情况下,你应该使用栅格图像格式,如 PNG、JPEG 或 WebP。

栅格图像没有分辨率或缩放独立的相同好属性 - 当你放大栅格图像时,你会看到锯齿状和模糊的图形。因此,你可能需要以各种分辨率保存栅格图像的多个版本,以便为用户提供最佳体验。

高分辨率屏幕的含义

有两种不同类型的像素:CSS 像素和设备像素。单个 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 字节

当我们将物理屏幕的分辨率翻倍时,像素总数将增加四倍:水平像素数翻倍,垂直像素数翻倍。因此,"2x"屏幕不仅翻倍,而且使所需像素数量翻两番!

那么,这在实践中意味着什么呢?高分辨率屏幕使你能够提供漂亮的图像,这可以是一个伟大的产品功能。但是,高分辨率屏幕也需要高分辨率图像,因此:

  • 尽可能喜欢矢量图像,因为它们与分辨率无关,并且始终提供清晰的结果。
  • 如果需要栅格图像,请使用响应式图像。

不同栅格图像格式的功能

除了不同的有损和无损压缩算法,不同的图像格式支持不同的功能,如动画和透明度 (alpha) 通道。因此,为特定图像选择"正确格式"是所需视觉结果和功能要求的组合。

格式 透明度 动画 浏览器
PNG 支持 不支持 所有
Jpeg 不支持 不支持 所有
WebP 支持 支持 所有现代浏览器

有两种普遍支持的栅格图像格式:PNG 和 JPEG。除了这些格式,现代浏览器支持较新的格式 WebP,它提供更好的整体压缩和更多的功能。那么,你应该使用哪种格式呢?

WebP 格式通常比旧格式具有更好的压缩效果,应在可能的情况下使用。你可以将 WebP 与其他图像格式一起用作回退。

在较旧的图像格式方面,请考虑以下事项:

  1. 需要动画?使用 <video> 元素。

    • GIF 将调色板限制在最多 256 种颜色,并创建比 <video> 元素大得多的文件大小。
  2. 需要以最高分辨率保留精细细节?使用 PNG。

    • PNG 不应用任何有损压缩算法,超出调色板大小的选择范围。因此,它将生成最高质量的图像,但代价是文件化率明显高于其他格式。明智地使用。
    • 如果图像资源包含由几何形状组成的影像,请考虑将其转换为矢量 (SVG) 格式!
    • 如果图像资源包含文本,请停止并重新考虑。图像中的文本不可选择、不可搜索或"可缩放"。如果需要传达自定义外观(出于品牌或其他原因),请改为使用 Web 字体。
  3. 正在优化照片、屏幕截图或类似的图像资源?使用 JPEG。

    • JPEG 使用有损和无损优化的组合来减少图像资源的文件中化。尝试几个 JPEG 质量级别,以找到最佳质量,而不是为资源提供文件权衡。

最后,请注意,如果你使用 WebView 在特定于平台的应用程序中呈现内容,那么你可以完全控制客户端,并且可以独占使用 WebP!Facebook 和许多其他网站使用 WebP 在应用程序中提供所有图像,这些节省绝对值得。