【译】如何正确选择图像格式？

图像格式是数字图像的标准，可以是未压缩的、压缩的、基于光栅的或基于矢量的。您可以使用所采用的格式来确定图像的 DNA，每种格式都提供不同的功能。例如，光栅生成带有像素的图像；矢量，带有矢量或比例公式。PNG 可以显示没有背景的徽标；JPEG 总是带有背景。本文解释了各种图像格式的主要属性，包括它们的基本概念和优缺点。

通过仔细选择图像格式，您可以优化性能、确保与用户设备的兼容性、优化存储、符合交付要求和最佳画质。

光栅与矢量

光栅和矢量是图像格式的两个主要区别。

光栅图像

栅格是形成图像的块或像素的集合，具有定义的分辨率，具体取决于像素的数量。如果光栅图像拉伸超出其分辨率支持的尺寸，则由于像素不足以自然填充尺寸，它们会失去质量和清晰度。

矢量图像

矢量图像由定义颜色或阴影显示的矢量或比例公式组成。由于矢量图像的显示不是基于预定义的像素计数，因此您可以将这些图像缩放到任何尺寸，而不会损失清晰度和质量。

传统图像格式

尽管图像格式比比皆是，但本文中描述的格式是最常见的。下图按受欢迎程度显示了栅格和矢量类别中的格式，这些格式通常受到广泛支持或提供其他格式所不具备的功能。

可缩放矢量图形 (SVG)：优点和缺点

XML 定义的可扩展矢量图形 (SVG) 往往是轻量级的，支持动画和交互性，因此非常适合网站。

优点

• 由于 SVG 不依赖于大小，因此它们可以响应式缩放并在所有显示器上渲染得同样好。
• 由于 SVG 是用代码编写的，因此您可以轻松地为整个 SVG 或其中的一部分设置动画。
• 您可以通过编辑 SVG 图像的元素、类或标签，使用 JavaScript 或 CSS 以编程方式转换 SVG 图像。
• SVG 与流行的编辑工具兼容，包括 Affinity、Sketch 和 Photoshop。

缺点

• SVG 无法重新创建照片质量的细节，也无法很好地转换 3D 场景或对象。
• 较旧的浏览器通常不支持 SVG。
• 解释和修改 SVG 代码涉及学习曲线较高。

标记图像文件格式 (TIFF)：优点和缺点

标记图像文件格式 (TIFF) 图像是栅格，通常用于确保应用程序和内部文件共享之间的兼容性。经常利用 TIFF 格式的应用程序包括用于桌面出版和光学字符识别 (OCR) 的应用程序；还有图像编辑器、文字处理器和扫描仪。

优点

• 您可以将 TIFF 及其元数据存储在单个文件中，例如压缩的 JPEG 和 PackBits 图像，以及应用的压缩、数据排列和标头的元数据。
• 您可以使用任何颜色编码渲染 TIFF，例如 RGB 全彩、青色洋红黄黑 (CMYK) 或灰度。
• 您可以将 TIFF 文件存储为无损图像，非常适合主副本或存档。

缺点

• TIFF 很大（通常为 100 MB 或更大）并且通常不被压缩。
• TIFF 的大尺寸使得存储、上传或提供文件变得更具挑战性，这会导致页面加载缓慢。
• 任何浏览器都不支持 TIFF。

便携式网络图形 (PNG)：优点和缺点

可移植网络图形 (PNG) 是具有开源格式的栅格，通常取代 GIF 和 JPEG。

优点

• PNG 支持无损压缩，无论您编码或解码多少次，都可以保留质量和元数据。
• 由于 PNG 支持较宽的颜色深度，即 24 位 RGB、32 位 RGBA 和灰度调色板，因此这些图像非常适合照片。 *即使在压缩的 PNG 中透明度也有效。

缺点

• 由于采用无损压缩，PNG 比 JPEG 更大。
• CMYK 不适用于 PNG，因此不适合打印。但是，除非您出售用于打印的图像，否则请随意在网站上显示 PNG。

图形交换格式 (GIF)：优点和缺点

您可以使用图形交换格式 （GIF） 图像创建静止图像或动画。通常，您只能使用 GIF 生成简短的动画，因为它们的静止图像质量落后于其他替代方案。

优点

• GIF 动画比其他图像格式的动画小。当部署在网站上时，GIF 加载速度快并节省带宽。
• GIF 支持透明背景。
• GIF 的无损压缩功能可防止质量损失。

缺点

• GIF 仅支持有限的调色板（256 种颜色），这可能会为图像和动画产生不希望的像素化外观。
• 您无法编辑编码的 GIF 动画文件。若要合并更改，必须重新生成整个图像。
• GIF 动画源自多个静止图像，分别渲染它们。因此，动画可能看起来生涩或生硬。此外，互联网连接不良可能会导致静止图像加载缓慢。
• GIF 仅支持二进制透明度，因此在不透明和透明模式之间的边缘周围没有半透明或抗锯齿。

渐进式和非渐进式 JPEG

联合图像专家组 （JPEG） 格式可能是最著名的格式。JPEG 有两种类型：渐进式和非渐进式（或正常）。非渐进式 JPEG 是首先开发的。渲染时，非渐进式 JPEG 从上到下加载，这意味着在慢速连接下，在加载完成之前，您只能看到图像的一部分。

渐进式 JPEG 是较新的版本，在渲染时提供更好的用户体验，因为它们首先以较低的分辨率加载整个图像。随着加载的进行，图像会变得更加清晰。

渐进式 JPEG 的优点

• 从一开始就为用户提供全图像预览。
• 由于压缩效率更高，渐进式 JPEG 往往比非渐进式 JPEG 小。

渐进式 JPEG 的缺点

• 可能很难判断渐进式 JPEG 何时完成加载。用户可能会将其归因于图像模糊导致的网站质量差。
• 渐进式 JPEG 的文件大小优势不适用于缩略图等小图像。在这些情况下，渐进式渲染不值得麻烦。
• 渐进式 JPEG 需要更多的内存和 CPU 资源来编码和解码，因为它们必须多次扫描图像。

下一代图像格式

图像和 Web 技术的出现导致了新格式或下一代格式的发展，这些格式通常比传统格式提供更好的质量和压缩，从而降低带宽要求和加快加载速度。例如 WebP 和 JPEG 2000。

影响采用下一代格式的另一个主要因素是谷歌对使用它们的网站的优惠待遇。根据 Google Lighthouse 基准测试（这是搜索排名算法的一部分），具有旧格式图像的网站被分配了较低的分数。

webP 和动画 webP

WebP 是 Google 创建的一种格式，可以更高的压缩率保持图像质量。有损压缩和无损压缩都可以在 WebP 中使用，在大多数现代浏览器中都能很好地显示。

优点

• WebP 往往比质量相当的传统格式小得多------这一优势适用于无损（与 PNG 相比）和有损（与 JPEG 相比）文件。
• WebP 支持透明度，因此非常适合品牌和徽标。此外，动画 WebP 的一些特殊特征胜过 GIF 的功能，如下所示：
• 动画 WebP 支持更多颜色：具有 8 位通道的 24 位 RGB 与具有 1 位通道的 8 位颜色相比。
• 可以在单个动画中组合压缩类型，这样可以更轻松地从视频创建动画。
• 动画 WebP 的大小比 GIF 小 19-64%。

缺点

• 与其他格式相比，解码 WebP 需要更长的时间，并且占用更多的 CPU。
• WebP 不显示在 Internet Explorer、Safari 和较旧的浏览器中。
• WordPress 是最受欢迎的网站框架之一，它本身不支持 WebP。您需要一个插件才能在 WorldPress 中使用 WebP。

WebP 动画落后于 GIF，GIF 几乎受到普遍支持，但 WebP 并非如此。向浏览器添加 WebP 支持需要额外的库和解码器。这意味着浏览器中的代码更多，安全攻击的风险更大。

JPEG 2000 格式

优点

• JPEG 2000 支持渐进式解码，以改善用户体验。
• 有损压缩和无损压缩都可以在 JPEG 2000 中在单个代码流中无缝工作。
• 透明度是 JPEG 2000 的一项功能。

缺点

• JPEG 2000 不向后兼容 JPEG，这意味着您需要两个不同的解码器来处理两种格式的图像
• 对 JPEG 2000 进行编码会占用大量 CPU 和内存，因此该格式对于较旧或资源不足的设备来说是一个糟糕的选择。

其他下一代图像格式

AV1 图像文件格式 （AVIF） 是流行的视频文件格式 AV1 的图像版本，AV1 是一种开源格式，可替代专有的高效视频编码 （HEVC） 格式。AVIF 与高动态范围成像 （HDR） 兼容，支持高效的有损和无损压缩，使文件比 JPEG 小 10 倍。

AVIF 支持高达 10 位的色深和单色通道，适用于图像和视频。缺点是 AVIF 没有得到广泛支持。目前，它可以在 Chrome 和 Firefox 浏览器上运行或即将运行。

注意：Cloudinary 支持 AVIF 格式，这意味着您需要做的就是添加到 f_avif 您的 URL。如果您的网址已包含 f_auto ，则一切就绪，无需进行其他编辑。但是，要将 Cloudinary 和 AVIF 与 结合 f_auto 使用，请联系客户支持以启用它。

JPEG XL 格式

JPEG XL 是一种正在开发的格式，旨在提供比 JPEG 更高的压缩效率。基于自由有损图像格式 （FUIF） 和 Pik 格式。JPEG XL 旨在使文件的大小达到传统 JPEG 的三分之一。

JPEG XL 计划于 2021 年成为国际标准，之后 TIFF、GIF、PNG 和 JPEG 到 JPEG XL 的无损转换将成为现实。

使用 Cloudinary 自动进行图像格式转换

Cloudinary 是一项基于云的服务，用于管理图像和视频，提供慷慨的永久免费订阅计划。使用 Cloudinary，您可以上传图像、应用内置效果、滤镜和转换，并将图像交付给用户。Cloudinary 提供的转换包括自动图像格式转换。

您可以将图像转换为任何图像格式，甚至可以在 Cloudinary 中仅使用一行代码即可为每个用户自动选择最佳格式。为此，要么修改图像 URL（一旦图像托管在 Cloudinary 上）或利用平台方便的 SDK，这些 SDK 服务于所有流行的编程语言。

下面我们将介绍如何使用 Cloudinary 自动进行图像转换。有关更多详细信息，请参阅 Cloudinary Cookbook。

自动格式选择

为了简化格式选择，Cloudinary 为您提供了一种方法，您可以根据用户的设备规格以最佳格式自动将图像交付给用户。您需要做的就是设置 fetch_format 参数 auto ，定义为 ，用于选择适当的格式。

设置格式后，Cloudinary 将按如下方式提供图像：

• Chrome 用户会收到 WebP。
• IE 用户会收到 JPEG XR。
• Safari 用户会收到 JPEG 2000。
• 对于具有不受支持的格式的图像，Cloudinary 提供文件扩展名所表示的格式。

例如，下面的 URL 根据浏览器提供首选的下一代格式。如果该格式未显示在浏览器中，Cloudinary 将提供 PNG 图像。

https://res.cloudinary.com/demo/image/upload/w_500,f_auto/sample

图像转换

Cloudinary 还提供了通过 format 参数或调整图像文件扩展名来转换图像格式的方法（无论是动态的还是在上传过程中）。目前，Cloudinary 支持所有标准格式和下一代格式 WebP、JPEG XR 和 Windows Media Photo （WDP）。

例如，以下 URL 以原始格式（JPEG）提供图像：

https://res.cloudinary.com/demo/image/upload/nice_beach

要将格式替换为文件扩展名方法，请将 URL 编辑为下面的 URL。然后，Cloudinary 将图像作为 GIF 上传。

https://res.cloudinary.com/demo/image/upload/nice_beach.gif

您可以将更改的格式与其他转换组合在一起。例如，要为侧边栏图像创建透明度，请将 URL 编辑为如下所示：

https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_fill,r_max/nice_beach.png

您还可以通过 quality （网址中的 q） 参数结合其他更改来控制图像的质量，如下例所示：

https://res.cloudinary.com/demo/image/upload/q_80/nice_beach.jpg

当与自动质量 （ ） 一起使用时 f_auto q_auto ，当自动质量算法确定 PNG 格式更适合特定图像时，可以选择 PNG 格式。这样可以提供更好看、更经济的图像文件。

其他资源

Cloudinary 网站包含许多有关图像格式的信息性文章。以下是一些示例。

JPEG 2000 大辩论：分析广泛采用的利弊

许多可用的图像格式可以消除不太流行的图像格式。因此，很少采用没有得到良好支持或与其他格式相比没有显着优势的格式。

尽管 JPEG 排名不高，但它仍然是可行的。文章 JPEG 2000 大辩论：分析广泛采用的利弊介绍了 JPEG 2000 格式、其功能、局限性以及与其他格式的区别。

渐进式 JPEG 和绿色火星人

加载图像时，您希望在质量和性能之间取得平衡。使用渐进式解码技术，您可以确保用户不会陷入等待仅可见一半的图像的困境。

渐进式 JPEG 和绿色火星人一文讲述了渐进式 JPEG 的功能、渐进式解码的优缺点以及优化解码的过程。

动画 WebP：如何将动画 GIF 转换为 WebP 并节省高达 90% 的带宽

简短的动画 GIF 图像正在成为吸引注意力和提升网站的标准。尽管如此，这种格式也有缺点，许多网站所有者正在考虑切换到 WebP。

文章Animated WebP: How to Convert Animated GIF to WebP and Save up to 90% Bandwidth向您展示如何将 GIF 转换为 WebP、调整 GIF 大小和裁剪 GIF 以及通过自动化提供动画 WebP。

使用 JPEGmini 和 Cloudinary 在不影响质量的情况下进行 JPEG 图像优化

JPEGmini 是一项在线服务，可在不损失质量的情况下缩小 JPEG 的大小。使用 Cloudinary 和 JPEGmini，您可以优化图像并提高网站性能。

文章JPEG Image Optimization Without Compromising Quality With JPEGmini and Cloudinary 描述如何优化 JPEG、执行复杂的图像转换和保护 URL。

验证 WebP 浏览器对动态传送图像的支持

与传统格式相比，WebP 具有显着优势。Cloudinary 使您能够在可行的情况下提供该格式。

文章检查 WebP 浏览器支持以动态传送图像详细阐述了 WebP 的好处、大小和质量的权衡、检查浏览器支持的过程、将 WebP 用于半透明和无损图像以及动态生成 WebP 图像的过程。

适用于 Android 网站或本机应用程序的 WebP 图像格式

谷歌开发的 WebP 是 Android 网站或应用程序的明显选择，文件大小较小。WebP 图像在不牺牲质量的情况下加载速度快。

文章Adopting the WebP Image Format for Android on Websites Or Native Apps讨论 Android 上的 WebP 的优势，并引导您完成在移动应用程序中使用 WebP 以及使用 Cloudinary 转换和转换 WebP 图像的过程。

使用有损压缩优化动画 GIF

尽管 WebP 在许多网站上取代了 GIF，但 GIF 与所有浏览器兼容，而 WebP 则不兼容。

文章Optimizing Animated GIFs With Lossy Compression向您展示如何优化 GIF 使其性能与 WebP 相当，并应用有损压缩。还描述了将 GIF 转换为 WebP 的注意事项以及 Cloudinary 转换 GIF 的选项。

文献

cloudinary.com/blog/image_...