网络图像格式

在视觉内容至上的数字环境中，对高效和高质量网络图像格式的需求从未如此强烈。 浏览器中的下一代格式有望重新定义我们消费和共享视觉信息的方式，探索这些格式背后的秘密。 本文重点介绍现代浏览器直接支持的图像格式。 有损图像格式是使用有损压缩的图像格式。有损压缩是指在压缩图像数据时会丢失一些信息。例如，对于屏幕截图来说，无损压缩会更好，因为屏幕截图中的文字会更易读。

GIF

图形交换格式（GIF）是一种位图图像格式，于 1987 年由 CompuServe 推出。 GIF 使用一种基于 Lempel-Ziv-Welch (LZW) 无损数据压缩技术的特殊压缩算法。 该格式支持简单的动画。 自 HTML 诞生之初，浏览器就支持 GIF。因此，如今所有浏览器都支持 GIF。

规范：https://www.w3.org/Graphics/GIF/spec-gif89a.txt

JPEG

目前，JPEG（联合图像专家组图像）是网络上最流行的图像格式。它支持有损压缩，而且到目前为止，该格式的所有美国专利都已过期。 所有现代浏览器都支持 JPEG。

规范：https://jpeg.org/jpeg

PNG

PNG（便携式网络图形）格式是一种无损格式，是作为 GIF 的替代品而设计的。 因此，它比 GIF 支持更高的颜色深度，效率更高。所有现代浏览器都支持 PNG。

规格：https://www.w3.org/TR/png/

APNG

APGN 是 "Animated Portable Network Graphics（动画便携式网络图形）"的缩写。与同样支持动画的 GIF 相比，APGN 增强了对颜色深度的支持。根据 caniuse.com 的数据，在撰写本文时，96.14% 的浏览器都支持 APNG。 当今所有的现代浏览器都支持 APNG。

规范：https://wiki.mozilla.org/APNG_Specification

SVG

SVG（可缩放矢量图形）是一种用于网络的矢量图形格式。其他格式都是位图格式。SVG 非常适合用于徽标和图标，并且在不降低质量的情况下也能很好地缩放。 所有现代浏览器都支持 SVG。

规格：https://www.w3.org/TR/SVG2

WebP

WebP 图像格式由 Google 开发，基于 VP8 视频编解码器。它支持有损和无损压缩，还支持透明度和动画。 它被设计为 JPEG、PNG 和 GIF 的替代品。AVIF 和 JPEG XL 未来可能会取代 WebP。 WebP 的许可证是开源和免版税的。根据 caniuse.com 的数据，96.63% 的浏览器都支持 WebP。

规格：https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification 和 https://datatracker.ietf.org/doc/html/rfc6386

AVIF

AV1 图像文件格式（AVIF）是一种开源和免版税的图像文件格式。 它植根于 AV1 视频编解码器，提供极佳的有损压缩，可与 JPEG、PNG 和 WebP 等其他图像格式相媲美。 它还提供无损压缩和动画功能。 此外，它还支持 HDR 和广色域，可生成高质量图像。目前，根据 caniuse.com 的数据，全球浏览器对 AVIF 的支持率为 83.97%。 在现代浏览器中，只有 Edge 不支持 AVIF。

规格：https://aomediacodec.github.io/av1-avif

结论

总之，如今网络上有多种图像格式可供选择。例如，对于徽标和图标，SVG 是不错的选择。对于照片，JPEG 是不错的选择。屏幕截图最好保存为 PNG 格式。 如果使用较新的图像文件格式（如 WebP 和 AVIF），则应为旧版浏览器指定备用格式。

参考资料

• MDN 图像文件类型和格式指南：https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

封面图像由 Alvin Lenin 在 Unsplash 上制作。