新旧图像格式对比

流行的图像文件格式，如 JPG、PNG 和 GIF，已经存在很长时间了。 它们相对高效，并且 Web 开发人员引入了许多优化解决方案来进一步压缩其大小。 然而，随着更新、更高效的图像文件格式旨在取代它们，JPG、PNG 和 GIF 的时代可能即将结束。

我们将在本文中探讨这些较新的文件格式，以及它们彼此之间以及与先前格式相比如何堆叠的分析。 我们还将介绍优化技术以改进图像的交付。

为什么我们需要新的图像格式？

除了图像质量之外，旧图像格式和新图像格式之间最明显的区别是文件大小。 新格式使用更有效地压缩数据的算法，因此文件大小可以小得多。 在 Web 开发的背景下，较小的文件意味着更快的加载时间，这转化为更低的跳出率、更多的流量和更多的转化。 所有这些都是 我们 经常 宣扬 的好事。

与大多数技术创新一样，新图像格式的推出将是一个渐进的过程，因为浏览器会考虑并采用其标准。 与此同时，我们作为 Web 开发人员将不得不适应不同支持级别的用户。 值得庆幸的是，Can I Use 已经掌握了这一点，并报告了特定图像格式的浏览器支持情况。

新兴格式

当我们进入图像文件格式的新领域时，我们将拥有许多格式选择。 以下是一些已经出现并正在取代现有标准的候选者。

WebP

WebP 由 Google 开发，作为 JPG 的替代品，其大小最多可以比包含相同图像的 JPEG 小 80%。

WebP 的浏览器支持一直在不断改进。 Opera 和 Chrome 目前都支持它。 Firefox 宣布计划 实现它。 目前，Internet Explorer 和 Safari 仍然不支持。 像 Google 和 Facebook 这样拥有大量影响力的大公司目前正在试验这种格式，它已经占到 eBay 首页上约 95% 的图像。 YouTube 也使用 WebP 用于大型缩略图。

如果您使用的是 WordPress 或 Joomla 等 CMS，则有一些扩展程序可以帮助您轻松实现对 WebP 的支持，例如 WordPress 的 Optimus 和 Cache Enabler 以及 Joomla 自身的支持扩展。 只要您提供 PNG 或 JPG 备用方案，这些扩展就不会破坏不支持该格式的浏览器的网站。 因此，支持较新格式的浏览器将看到性能提升，而其他浏览器则获得标准体验。 考虑到 WebP 的浏览器支持正在增长，这是一个节省延迟的好机会。

HEIF

高效图像文件（或 HEIF）实际上使用扩展名 HEIC（.heic），代表高效图像容器，但这两个首字母缩略词可以互换使用。 今年早些时候，苹果宣布其最新产品线将默认支持 HEIF 格式。

除了文件尺寸更小之外，HEIF 还提供了比其他格式更多的多功能性，因为它可以同时支持静止图像和图像序列。 因此，可以在单个文件中存储连拍照片、焦堆栈、曝光堆栈、从视频捕获的图像和其他图像集合。 HEIF 还支持透明度、3D 和 4K。

除了图像之外，HEIF 文件还可以保存图像属性、缩略图、元数据和辅助数据，例如深度图和音频。 由于非破坏性编辑操作，还可以存储图像派生。 这意味着裁剪、旋转和其他更改可以随时撤消。 想象一下，所有图像变体都包含在一个文件中！

苹果正在尽其所能使过渡尽可能顺利。 例如，当用户与不支持该格式的应用程序共享 HEIF 文件时，苹果会自动将图像转换为更兼容的格式，例如 JPG。

在撰写本文时，尚无浏览器支持 HEIF。

也就是说，该文件格式为视频和图像提供了令人印象深刻的文件节省。 随着我们的设备变得越来越强大，并且能够拍摄更高质量的图像和视频，这变得越来越重要，从而导致对高效媒体文件的需求越来越大。

FLIF

免费无损图像格式（或 FLIF）使用一种压缩算法，生成的 文件比旧格式小 14-74%，而不会牺牲质量（即无损）。 因此，FLIF 非常适合任何类型的图像或动画。

FLIF 主页 声称 FLIF 文件平均比典型的 PNG 文件小 43%。 下面的图表说明了 FILF 在这方面与其他格式的比较情况。

FLIF 利用了一种称为元自适应近零整数算术编码或（恰当地）MANIAC 的技术。 FLIF 还支持渐进交错，以便图像在开始下载后立即显示完整，这是另一个已被证明可以降低网页跳出率的功能。

FLIF 的潜力非常令人兴奋，但目前没有任何浏览器支持，也不像任何浏览器目前正在考虑添加它。 虽然该格式的创建者正在努力实现对流行的 Web 浏览器和图像编辑工具的原生支持，但开发人员可以访问 FLIF 源代码 并获取 polyfill 解决方案 进行测试。

现有格式

如前所述，我们可能还需要几年时间才能完全过渡到新格式。 在某些情况下，坚持使用久经考验的格式可能更好。 让我们回顾一下我们正在讨论的格式，并讨论它们为何能够存在如此之久。

JPG

作为大多数数码相机和照片共享设备的统治标准，JPG 是互联网上使用最广泛的图像格式。 W3Techs 报告称，几乎四分之三的网站 使用 JPG 文件。 同样，大多数流行的照片编辑软件默认将图像保存为 JPG 文件。

JPG 以 联合图像专家组 的名称命名，该组织开发了这项技术； 因此，JPG 也称为 JPEG。 您可能会看到这些首字母缩略词可以互换使用。

该格式可追溯到 1992 年，旨在促进位图图像的有损压缩。 有损压缩是一个不可逆的过程，它依赖于不精确的近似值。 其想法是允许开发人员调整压缩比率以实现他们期望的文件大小和图像质量之间的平衡。

JPG 格式非常适合捕捉的照片； 然而，顾名思义，有损压缩会降低图像质量。 每次编辑和重新保存图像时，质量都会进一步下降，这就是为什么开发人员被教导避免多次调整图像大小的原因。

GIF

GIF是图形交换格式（Graphics Interchange Format）的缩写。它依赖于一种名为LZW的压缩算法，这种算法不会降低图像质量。GIF格式缺乏JPG和PNG的颜色支持，但由于其能够通过将多个图像捆绑到单个文件中来渲染动画，因此仍然存在。存储在GIF文件中的图像可以依次渲染，从而创建类似短片的视觉效果。GIF可以配置为显示图像序列一定的次数或无限循环。

PNG

优秀的便携式网络图形（PNG）最初被设想为GIF格式的继任者，并于1996年首次亮相。它专为在网络上表示图像而设计。在流行度方面，PNG紧随JPG之后。W3Techs声称72%的网站使用这种格式。与JPG不同，PNG图像能够进行无损压缩（意味着不会丢失图像质量）。

另一个优于JPG的优势是PNG支持透明度和不透明度。由于大照片在JPG格式下往往看起来更好，因此PNG格式通常用于非复杂图形和插图。

改进图像优化和交付的方法

在为网络优化图像时，有一些至关重要的事情需要考虑，因为任何文件格式（包括新的文件格式）最终都可能增加另一层复杂性。图像通常占据网页大部分字节，因此图像优化被认为是提高网站性能的低成本方法。Google Dev Guide有一篇关于该主题的综合文章，但这里列出了几个加快图像交付速度的简要提示。

实现对新图像格式的支持

由于像WebP这样的较新格式尚未得到普遍支持，因此您必须配置您的应用程序，以便它们向用户提供合适的资源。

您必须能够检测客户端支持哪些格式并提供最佳选项。对于WebP，有几种方法可以做到这一点。

投资CDN

内容分发网络（CDN）通过将其缓存到其边缘服务器网络中来加速图像的交付。因此，当访客访问您的网站时，他们会被路由到最接近的边缘服务器，而不是源服务器。这可以节省大量时间，尤其是在您的用户远离您的源服务器时。

我们有一篇关于该主题的完整文章，以帮助您了解CDN的工作原理以及如何将其用于您的项目。

使用CSS代替图像

由于较旧的浏览器不支持图像阴影和圆角，因此经验丰富的Web开发人员习惯于将某些元素（如按钮）显示为图像。还记得那些显示自定义字体需要为标题制作图像的日子吗？这些做法仍然存在，但它们是效率极低的方法。相反，尽可能使用CSS。

检查您的图像缓存设置

对于不经常更改的图像文件，您可以利用HTTP缓存指令来改善普通访客的加载时间。这样，当有人第一次访问您的网站时，他们的浏览器会缓存图像，以便在后续访问中不必再次下载。此做法还可以通过减少带宽成本来节省您的资金。

当然，不正确的缓存可能会导致问题。为您的图像添加指纹（例如时间戳）可以帮助防止缓存冲突。幸运的是，大多数Web开发平台会自动执行此操作。

为不同设备调整图像大小

确定如何最好地适应屏幕分辨率较低的移动设备是一个持续的过程。一些开发人员甚至不费心，只是为所有用户提供相同的图像文件，但这会导致浪费您的带宽和移动访客的时间。考虑使用srcset，以便浏览器根据客户端的大小尺寸确定应提供哪种图像尺寸。

图像压缩测试

查看每种图像格式提供的尺寸差异总是很有趣的。在本篇文章中，我们比较了无损和有损图像格式。当然，这不是常见的做法，因为很多时候有损格式的尺寸会小于无损格式，因为图像质量会受到影响以产生更小的图像尺寸。

无论如何，在无损和有损图像格式之间进行选择应该基于您的网站的图像密集程度以及它已经运行的速度。例如，电子商务商店可能可以接受略微降低的图像质量以换取更快的加载时间，而摄影师网站则可能是相反的情况，以便展示才能。

为了比较本文中提到的六种图像格式的尺寸，我们从三张JPG图像开始，并将它们转换为其他每种格式。以下是性能结果。

• 图像1
• 图像2
• 图像3

如前所述，以下结果由于无损/有损图像格式而存在很大差异。例如，PNG和FLIF图像都是无损的，因此导致图像文件更大。

	图像1大小	图像2大小	图像3大小
WebP	1.8 MB	293 KB	1.6 MB
HEIF	1.2 MB	342 KB	1.1 MB
FLIF	7.4 MB	2.5 MB	6.6 MB
JPG	3.9 MB	1.3 MB	3.5 MB
GIF	6.3 MB	3.9 MB	6.7 MB
PNG	13.2 MB	5 MB	12.5 MB

根据以上结果，HEIF图像总体上比任何其他格式都小。但是，由于缺乏支持，目前无法将HEIF格式集成到Web应用程序中。WebP位居第二，并且确实提供了解决浏览器支持不足的方法。对于使用Chrome或Opera的用户，WebP图像肯定会帮助加速交付。

至于无损图像格式，PNG明显大于其有损JPG对应格式。但是，如果使用FLIF进行优化，则可以节省约50%的容量。这使得FLIF成为需要以较小文件大小获得高质量图像的用户的绝佳替代方案。也就是说，FLIF目前尚不受其他Web浏览器支持，类似于HEIF。

---

结论

旧的图像格式可能在未来很多年内仍然存在，但一旦开发人员意识到节省文件大小的好处，就会越来越多地采用更新的格式。

总的来说，相机、移动设备和许多小工具都变得越来越复杂，这意味着拍摄的图像和视频质量更高，占用空间也更大。必须采用新的格式来缓解这种情况，而且看起来我们有一些非常有前景的选择可以期待，即使要看到它们正式采用还需要一些时间。