[译]2021 年 Web 应用程序的最佳图像格式

2021年Web应用程序的最佳图像格式

在2021年，Web应用程序的图像格式选择变得更为丰富和多样化。了解最新的图像格式以及何时使用它们，对于优化网站性能和用户体验至关重要。以下是四种值得关注的图像格式：

1. WebP

WebP是谷歌在2010年开发的一种开源图片格式。尽管它目前尚未普及，但许多知名组织都在使用WebP。例如，Facebook在Android应用程序中使用WebP，与JPEG相比，图像尺寸缩小了25–35%，与PNG相比则缩小了80%。根据Google的WebP研究，在有损压缩方面，WebP比JPEG小25-34%。此外，当谷歌将Youtube缩略图移动到WebP时，他们观察到页面速度提高了10%。

WebP的优点包括：

• 支持无损和有损压缩。
• 与其他图像格式相比，图像文件大小大大减小。
• 支持无损透明。
• 支持网页动画。

然而，WebP的浏览器支持情况是其普及的主要障碍。尽管Chrome、Firefox、Opera Mini和Edge支持WebP，但Safari直到最近才开始支持。随着Safari的支持加入，我们可以期待在未来几年内WebP的快速采用。

2. AVIF

AV1图像文件格式（AVIF）是一种由开放媒体联盟（AOM）开发的免版税开源文件格式。在某些情况下，AVIF可以将图像尺寸与JPEG相比缩小50%，与WebP相比缩小30%。

AVIF图像类型的优点包括：

• 支持网页动画。
• 支持透明。
• 支持无损压缩。
• 支持任何图像编解码器。
• 在全分辨率下支持10位和12位颜色。

尽管Chrome 85、Opera和Firefox（仅基础）支持AVIF，但其浏览器支持比WebP少。然而，随着技术的不断发展，AVIF有望成为未来图像格式的主流选择。

3. SVG

SVG（可缩放矢量图形）是一种用于二维图形的基于XML的矢量文件类型。SVG图像类型的优点包括：

• 可以搜索、索引、缩放和压缩SVG图像。
• 支持使用CSS和JavaScript的网络动画。
• 在任何分辨率或尺寸下都保持清晰。
• 支持透明。

然而，SVG图像尺寸通常比其他图像格式大，且不适合摄影图像。因此，在选择SVG时需要考虑其适用场景。

4. HEIF

HEIF（高效图像文件格式）是JPEG图像格式的另一个主要竞争对手。HEIF图像格式由运动图像专家组（MPEG）于2015年开发。HEIF压缩尺寸较小但图像质量高于JPEG的图像。

HEIF图像类型的优点包括：

• 与JPEG图像相比大小减半，但保留了相同或更好的图像质量。
• 采用高效视频压缩格式压缩和快速编解码。
• 支持网页动画。
• 支持有损和无损压缩。
• 支持透明度和16位颜色。

然而，HEIF目前仅支持原生MacOS和iOS。对于浏览器支持方面来说，目前尚未有可用的浏览器支持HEIF。因此，如果考虑将HEIF用于Web应用程序，需要等待适当的浏览器支持公告。

如何选择一个？

在选择图像格式时，除了考虑上述四种格式外，还需要考虑常见的图像格式如JPEG、PNG和GIF。以下是一个决策树来帮助您根据您的要求选择合适的格式：

• 如果需要高质量的彩色照片，请选择JPEG。
• 如果需要保留精细的细节、最高分辨率图形的透明度以及颜色较少的屏幕截图，请选择PNG。
• 如果需要动画图形，请选择GIF。
• 如果需要高质量且可以缩放到任何大小的图像，请选择SVG。
• 如果需要一种更新的替代JPEG和PNG的图像格式，且支持无损和有损压缩，请选择WebP。
• 如果需要JPEG的替代品且具有快速编码和解码能力，且不介意目前有限的浏览器支持，请选择HEIF。
• 如果期待一种即将推出的最佳替代品，且希望在未来获得更广泛的浏览器支持，请选择AVIF。

关键要点：

• JPEG：彩色照片的理想图像格式。
• PNG：保留精细细节、透明度和颜色较少屏幕截图的理想图像格式。
• GIF：动画图形的理想图像格式。
• SVG：高质量且可以缩放到任何大小的图像的理想图像格式。
• WebP：JPEG和PNG的更新替代方案，支持无损和有损压缩。
• HEIF：JPEG的替代品，具有快速编码和解码能力。
• AVIF：即将推出的图像格式，是JPEG和WebP的最佳替代品。

小结：

现阶段有许多图像选项可供选择。很明显目前还没有完美的图像格式选项，您需要根据自己的要求选择类型，同时考虑其优点和浏览器支持情况。随着最新的发展，WebP的使用量稳步增加，而随着浏览器支持的增加，AVIF可能成为一个不错的选择。是否还有其他领先的图像格式没有在此处展示？欢迎发表评论。