如果光是读到图像格式这个短语，你可能会第一时间想到 JPEG。又或者 PNG。
这两种都是图像格式。而 WebP 和 AVIF 只是两个不同的、稍新的版本。
为什么会出现这两种格式呢？
就像当初开发 T 型车是为了取代马匹一样，这些现代格式也是为了在速度和质量方面改变和改善现状。
那么，你到底为什么要继续阅读呢？
如果你想确保你的小型企业网站尽可能跟上现代技术和不断变化的消费者需求，你就需要从亨利-福特的书中汲取灵感，发挥创造力。
幸运的是，如今这项工作不那么油腻，但可能更有技术含量。本指南为您提供了理解、选择甚至实施图片格式的理由、技巧和工具，让您的网站获得巨大成功。
为什么要关注网站的图片格式？
网站上的文件格式，尤其是图片格式，似乎是您最不需要考虑的问题。
我们建议您再想一想。
以下就是为什么图片格式是网站体验和性能的关键所在。
图片无处不在…
无论您的业务是什么，图片都可能在您的网站中占很大比重。
根据 Web Almanac 的数据，在网站的全部 2315 KB 内容中，桌面图像占了 1000KB 以上。这接近 50%！对于移动网站，在 2,020 KB 的总容量中，图片占了近 900 KB。其次使用最多的内容类型（JavaScript）甚至不及图片的一半！
几乎 100% 的网站页面都包含图片，这并不奇怪。而且，在 80% 的桌面网站（移动网站为 70%）中，图片是最具影响力的组成部分。Core Web Vitals 的最大内容图片（LCP）指标就证明了这一点，该指标确定了网站页面首屏的最大元素。
换句话说，要夸大图片在网络上的存在和重要性几乎是不可能的。
…所以它们的表现很重要！
当你考虑到图片占网站页面权重的大部分时，如何格式化图片（这会影响图片的表现）就成了关键问题。
不同的格式，例如我们接下来要深入讨论的 AVIF 和 WebP，会影响图片的大小和重量。
此外，不同格式的大小调整和压缩方式也不同。如果不能将图片编辑到网站所需的理想尺寸或重量，就会导致图片过重和/或变形，从而影响加载速度和用户体验。
这种糟糕的体验不仅会让访问者扫兴。随着时间的推移，搜索引擎会发现加载时间过慢以及不雅图片导致的跳转，您的排名就会下降，从而影响您的知名度、转化率，最终影响收入。
听起来是时候学习如何优化网络图片了？
在本文中，我们将介绍每个网站所有者和管理者都应该了解的两种流行的现代图片格式。
探索WebP
WebP 是一种图像格式，最初由谷歌于 2010 年创建，旨在改进 JPEG 的图像质量和可压缩性。所有这些都不会增大图像文件的大小。
它做到了这一点！
WebP 的独特之处在于它同时使用了有损压缩（文件大小缩小，部分图像数据丢失）和无损压缩（文件大小缩小，但不丢失图像数据）技术。这意味着图像文件可以在需要的时候进行压缩，而视觉质量基本保持不变。WebP 还支持图像透明（PNG 就是著名的透明）和动画等功能（GIF 是最早处理这种功能的文件类型）。
WebP 已成为网络开发人员、设计师以及几乎所有在互联网上处理图像的人都非常喜欢的格式。
这是因为我们前面提到的许多特性： WebP 图形压缩效果好、外观漂亮、可用于各种设置，而且由于其推出时间长、得到谷歌的支持，所有现代网络浏览器都支持 WebP。使用 WebP 通常会给网站访问者和管理者带来良好的体验。
了解AVIF
AVIF 是 AV1 图像文件格式的缩写，是一种比 WebP 更新的图像格式。
AVIF 由开放媒体联盟（Alliance for Open Media）于 2019 年推出，是著名的 AV1 视频格式的衍生图像格式。与包括 JPEG 和 WebP 在内的旧格式相比，它旨在进一步改善图像的文件质量和大小/重量。
就像之前的 WebP 一样，AVIF 也实现了自己的目标。
与其他格式相比，使用 AVIF 可以获得占用空间极小的高质量图像。这一切都要归功于它先进的图形压缩方式，以及在许多情况下提供更丰富色彩的能力。
AVIF 的主要缺点是它的知名度和使用率都不如 WebP。不过，随着未来几年越来越多的平台、技术、设计师和开发人员使用 AVIF，我们将继续看到它的崛起。
AVIF与WebP对比：7个关键向量的比较
上完有趣的历史课后，终于到了深入探讨 AVIF 和 WebP 在对您至关重要的所有方面的比较的时候了，这些方面包括加载时间、压缩质量、编辑难易程度等。
1. 浏览器兼容
当然，最好选择与大多数网络浏览器兼容的图像格式。对于用户体验来说，损坏的图片可能比加载缓慢的图片更糟糕。
在很长一段时间里，AVIF 作为新生事物并没有得到所有浏览器的广泛支持。这就是为什么你经常会看到它在浏览器支持方面得分较低的原因。
不过，截至 2024 年，Can I Use 网站显示 AVIF 和 WebP 在所有主流浏览器上都可用。
由于 AVIF 几乎已经拉开了差距，因此我们将这一结果视为平局。尽管如此，重要的是要知道 WebP 仍然是被更广泛认可和使用的格式。因此，你可能会在一段时间内继续看到它被称为最兼容浏览器的选项，从而影响它在我们今天要比较的其他几个因素中的排名。
在这一个环节，两者打成平手。
2. 加载时间
正如我们所提到的，作为网站所有者和用户，您肯定也有过这样的经历，网站的加载速度对网站的性能起着巨大的作用。对于使用手持设备的访问者来说，这一点更为重要，因为他们很可能随时准备采取行动。
缩小网页所有元素的尺寸，尤其是图片，可以显著改善加载时间。
与 WebP 相比，AVIF 具有明显的优势。一般来说，AVIF 图像比 JPEG 图像小 50%，而 WebP 图像比 JPEG 图像小 30%。
这种尺寸上的差异可以归结为每种文件格式处理压缩的方式。WebP 采用 VP8 视频编解码器压缩方法，而 AVIF 压缩则基于 AV1 视频编解码器，这是一种更现代的选择。
虽然所有这些技术术语都很好懂，但关键在于以下几点： AVIF 文件更小，有助于加快网站加载速度。
在加载时间方面，AVIF 格式更胜一筹。
3. 无损压缩
好吧，压缩并不代表一切；压缩图像的质量仍然很重要！
这里有一个有趣的现象：AVIF 确实支持无损压缩（又称缩小文件大小），几乎没有数据或质量损失。不过，在这一过程中，一些实验发现它并不能像 WebP 格式那样缩小文件大小。
因此，如果您想要压缩率最高、质量最好的图片，尤其是没有文本的图片，WebP 是您的不二之选。
如果您希望兼顾质量和压缩率，Webp 明显是更佳选择。
4. 有损压缩
反过来说，在有损压缩的情况下（需要最大程度的压缩，同时可以牺牲一些质量），AVIF 格式可以保持比 WebP 稍高的质量，同时还能大大减轻文件重量。
有需要压缩但又不能牺牲清晰度的图片吗？比如照片、包含文本的图像等。试试 AVIF 格式吧。
跟上述的结果相反，如果有损压缩可以满足您，则选 AVIF。
5. 摄影
与我们刚才讨论的内容相关，如果要在网站上展示数码摄影作品，AVIF 是最佳选择。
这有几个原因。
首先，更高效的压缩算法使得图像非常轻便，同时又不影响质量。此外，AVIF 比 WebP 支持更高的比特深度（或独特颜色的数量）。因此，当您想让照片保持最清晰、最细腻和最真实的色彩时，请使用 AVIF。
当您在这两种中选择作为摄影照片的格式时，AVIF吧。
6. 编辑易用性
事实上，即使不是所有流行的照片编辑工具，大多数工具都支持 WebP，而 AVIF 却不支持。目前还不支持。这使得 WebP 在编辑简便性方面更具优势。
不过，我们已经讨论过的 AVIF 图像格式的功能有助于它在编辑时保持更高的质量。本专栏的一个反面教材。
因此，虽然 AVIF 文件在编辑时可能略胜一筹，但这只有在您拥有可处理 AVIF 文件的软件时才有意义！
因此，我们将编辑难易度打成平手。
7. 社交媒体分享
继续在 LinkedIn 或 Facebook 上滚动，然后告诉我们： 带有图片的帖子是否更容易吸引你的眼球？我们都知道！
如今，当你与成千上万（甚至上百万）的其他企业竞争注意力时，发布高质量的图片对于社交媒体的参与度至关重要。
最理想的文件格式是兼容性。虽然 AVIF 通常在加载速度上占优势，但如果平台不支持该图片类型，则根本无法加载！例如，Facebook 的母公司 Meta 在广告中支持 WebP 图像，但不支持 AVIF。
WebP 仍然拥有更广泛的浏览器和平台支持，因此在选择使用哪种文件格式在社交平台上分享图片时，WebP 占据了上风（无论如何，目前是这样）。
何时选择 AVIF 与 WebP
照片、图形和一般图像是网页设计中最重要的元素之一，因此为网站选择合适的文件类型可能会让人望而生畏。
老实说，我们认为 AVIF 或 WebP 都不会有错。您选择哪种文件类型完全取决于您的优先级，而且您将来还可以随时改变主意！
但是，如果您发现自己举棋不定，我们将向您介绍我们对何时选择 AVIF、何时选择 WebP 的基本看法。
当图像就是一切时：选择 AVIF
总的来说，AVIF 图像格式非常适合真正高质量的视觉效果，如照片、数字艺术和图形设计，无论如何都需要可读性。因此，它非常适合需要大而精美图片的网站，可以快速加载，给人留下难忘的第一印象。
例如，高度视觉化行业的作品集网站、摄影企业的营销网站，或者需要超详细产品照片的电子商务网站（也许你销售高端定制车身套件？ 酷！）。
AVIF 是一种既能获得清晰图像，又能快速加载且不影响用户体验的方式。
当多功能是关键：选择 WebP
事实上，大多数网站类型：从本地服务企业到在线精品店、单页自由职业者档案、简单的电子商务平台等等，都可以安全地使用 WebP 图像。
这是因为这种格式可以很好地处理各种图形类型，包括大多数图像以及插图、徽标、动画等。而且，它的文件大小非常适合快速加载。
此外，这种格式仍然是两种格式中被更广泛认可的一种，在浏览器、平台、编辑工具和设计人员之间具有微弱但坚实的优势，这一点是无可争议的。
优化网站图片的7种工具
既然你已经知道如何根据自己的需要和愿望选择和使用正确的文件格式，作为一个小型企业网站的管理者，让我们来谈谈如何才能真正将这些信息用到实处。
无论你是需要转换、压缩、编辑，还是设置你的网站来处理所有图片，这里都有一些不同价位的好工具，让你在优化图片时得心应手。
WordPress 插件
Optimole 是一款付费 WordPress 插件，可处理 WordPress 网站的几乎所有图片事务：从自动优化到调整大小、云存储、智能加载等。套餐起价为 19.08 美元/月，按年结算。
既有处理 WebP 转换的免费 Converter for Media 插件，也有处理 AVIF 转换的付费插件（50 美元/年）Converter for Media PRO。
压缩工具
Kraken.io是一款流行、强大、快速的压缩和优化网站图像的工具。如果你经常添加新图片，订阅可能是你的正确选择（每年 50 美元起）。
对于偶尔使用的用户，可以查看 ShortPixel 的免费图像压缩平台，或者他们的网站检查器，帮助你找出需要改进的地方。
转换应用程序
图像和视频平台 Cloudinary 提供图像转 AVIF 工具和图像转 WEBP 工具，可免费快速转换文件格式！
Picflow 的免费图像转换工具可在大多数现代图像类型之间快速转换，包括 AVIF 和 WebP。
调整大小和编辑软件
AVIF Studio 是一个免费的 Chrome 扩展程序（和网站），你可以用它来调整大小、编辑和注释多种格式的图片，包括 AVIF、WebP、JPG、PNG 和 ICO。
小结
说到现代图像格式，AVIF 和 WebP 都有很多可取之处。
AVIF 在质量和速度方面都非常出色，因此在需要令人惊叹的视觉效果和完美的加载时，它是最理想的格式。
但这并不能忽视 WebP 的价值，它的价值在于其多功能性、完美的压缩与质量平衡以及全球认可。
虽然我们不喜欢用看情况这句老话……但在 AVIF 和 WebP 之间做出选择确实取决于您网站的需求和您的偏好！
评论留言