Smashing播客第39集与Addy Osmani：图像优化

在今天的Smashing播客节目中，我们将讨论图像优化问题。在2021年，我们应该遵循哪些步骤来获得高性能的图片？我采访了专家Addy Osmani来了解一下。

节目说明

• “图像优化“，Addy Osmani
• Addy在Twitter上
• Addy的个人网站

每周更新

• Meet :has, A Native CSS Parent Selector (And More)
  作者：Adrian Bece
• 我最近发现的三个前端审计工具
  作者：Stefan Judis
• 实用的前端模板和入门套件
  作者：Cosima Mielke
• 做好的网页设计。利用音频
  作者：Frederick O’Brien
• 当CSS不够用时。无障碍组件的JavaScript要求
  作者：Stephanie Eckles

实录

Drew McLellan: 他是谷歌浏览器的工程经理，他的团队专注于速度，帮助保持网络的快速。他致力于开源社区，过去的贡献包括Lighthouse、Workbox、Yeoman、Critical，以及做NVC。因此，我们知道他知道自己在优化网络性能方面的方法。但你知道吗，他想获得奥斯卡最佳女配角奖，原因是一个笔误？我可爱的朋友们，请欢迎阿迪-奥斯曼尼。嗨，艾迪。你好吗？

Addy Osmani：我很好。

Drew McLellan：很高兴听到这个消息。我今天想和你谈谈网络上的图像问题。这是一个在过去几年中发生了令人惊讶的变化和创新的领域，你刚刚为Smashing写了一本关于图像优化的非常全面的书。在这个时候想到 “现在是写一本关于图像优化的书的时候了”，其动机是什么？

艾迪-奥斯曼尼。这是个好问题。我想我们知道，几十年来，图像一直是网络的一个相当关键的部分，我们的大脑能够解释图像比解释文字快得多。但是这个整体的话题随着时间的推移会变得越来越有趣，越来越细微。我总是告诉人们这可能是，我想，我的第三或第四本书。我从来没有刻意去写一本书。

Addy Osmani：我开始这本书时写出了一篇关于图像优化的文章，然后随着时间的推移，我发现我无意中写了一整本书。我们在这个项目上工作了大约两年时间了。而即使在这段时间里，这个行业的浏览器一直在发展，围绕图像和图像格式的工具也一直在发展。

艾迪-奥斯曼尼。所以我写了这本书，因为我发现自己很难在所有这些变化中保持领先。我想，”我要做一个好的网络公民，并尝试在一个地方追踪我所学到的一切，以便其他人能够利用它”。

德鲁-麦克莱伦：我认为这是其中的一个领域，在浏览器中进行大量的性能优化，这是一个快速变化的景观，不是吗？你所学到的一个技术是当前的最佳实践，一些技术转变发生了，然后你发现它实际上是一个反模式，你不应该这样做。试图保持你的知识，并确保你阅读正确的文章和学习正确的东西，而不是阅读两年前的东西是相当困难的。

德鲁-麦克莱伦：所以把所有的东西都收集在一本来自权威机构的、经过精心研究的书中，真的很了不起。

Addy Osmani：是的。即使从作者的角度来看，最有趣的事情之一，也许也是我们编辑团队最紧张的事情之一，就是我把一个章节交上去，说已经完成了。然后两个星期后，浏览器会有一些变化，我就会说，”哦，等等。我必须在最后一分钟再做一次修改。”

Addy Osmani：但是图像环境已经发生了很大的变化，甚至在去年。我们已经看到WebP支持最终在大多数现代浏览器中得到了完成。AVIF图像支持在Chrome中，即将在Firefox中出现，JPEG XL，懒惰加载。从整体上看，我们已经看到在浏览器中如何在网络上使用图像方面有了相当具体的增强。但还是那句话，有很多东西需要人们保持关注。

Drew McLellan：有些人可能会认为图像优化是一个相当呆板的话题。在我们的职业生涯中，我们都曾学习过，如何从我们的图形软件中输出到网络。而我们中的一些人可能有这样的习惯：把这些导出的图片通过像ImageOptim这样的东西来运行它们。

Drew McLellan：所以我们可能知道，当它是一个摄影图像时，我们应该选择JPEG，当它是一个基于图形的图像时，我们应该选择PNG，并认为，”好吧，就这样吧。我知道图像优化，我完成了”。但实际上，这些东西只是桌面上的赌注，不是吗，在这一点上？

Addy Osmani：是的，它们是。我认为，随着时间的推移，我们显示更详细、更清晰的图像和图像的能力，甚至在不同的背景下，取决于你是否关心艺术指导，已经逐渐发展。我认为需要弄清楚你如何能够让这些图像看起来像预期的那样漂亮，让你的最终用户记住他们的环境，他们的设备限制，他们的网络限制，这是一个困难的问题，我知道很多人仍然在努力。

艾迪-奥斯曼尼。因此，当涉及到考虑图像和对这个问题有一个更精细的看法时，不仅仅是 “嘿，让我们使用JPEG “或 “让我们使用PNG”，我认为有几个方面值得记住。首先是一般的压缩。你提到了ImageOptim，我们很多人都习惯于把一张图片拖到一个地方，然后从它的后面得到一些更小的东西。

Addy Osmani。现在，当涉及到压缩时，我们通常在谈论不同的编解码器。编解码器是一种压缩技术，通常有一个用于编码文件的编码器组件和一个用于解码和解压的解码器组件。当你决定是否使用某些东西时，你通常需要考虑你所使用的照片或图像是否可以使用有损压缩方法或无损压缩方法。

Addy Osmani。如果大家对这些概念不是很熟悉的话，无损的方法是指在解压时，你在最后复制出完全相同的文件。所以你在质量方面并没有损失多少。无损方法就像把你的图像放在传真机上一样。你得到的是原始文件的传真，但它不会是原始文件。那里可能有一些不同的人工制品。它可能看起来有细微的不同。但一般来说，你压缩得越多，通常损失的质量就越多。

Addy Osmani。因此，对于所有这些现代图像编解码器，他们正试图看看你能挤出多少质量，同时仍然保持一个相对合适的文件大小，这取决于使用情况。

德鲁-麦克莱伦：因此，从技术角度来看，你有一个源图像，然后你有目标文件格式。但是将一个变成另一个的过程是可以讨论的。只要你有一个符合要求的文件，你如何做到这一点是由一个编解码器决定的，它可以有很多不同的实现方式，有些会比其他的好。

Addy Osmani。绝对的。是的。我认为，再次回到我们开始讨论JPEG和PNG的地方，人们可能知道JPEG是为照片的有损压缩而创建的。你通常会得到一个较小的文件，而且它有时会有不同的带状伪影。PNG最初是为无损压缩而创建的，在非摄影图像上做得相当好。

Addy Osmani：但从那时起，事情就发生了变化。2010年左右，我们开始支持WebP，它本应取代JPEG和PNG，并在压缩方面略胜一筹。但从那时起，桌面上的图像格式和选项的数量就激增了。我认为事情正朝着总体上好的方向发展，特别是像AVIF和JPEG XL这样的现代格式。但我们花了一些时间才走到这一步。即使是让所有的浏览器都支持WebP也花了不少时间。

Addy Osmani。我认为最终影响它的是确保开发者一直在要求它，他们希望能够从这些现代格式中获得更好的压缩，以及希望这些东西在各浏览器之间有良好的兼容性。

Drew McLellan：是的。对我来说，WebP似乎非常有趣，因为除了在格式中可以进行无损和有损压缩外，我们显然还可以大大减少文件大小。而且有很好的浏览器支持，我们看到像谷歌、Netflix和各种大公司都在采用。

Drew McLellan：但我在业界的看法是，我们在基层没有看到同样的接受度。WebP是否仍在等待它的到来？

Addy Osmani：我认为我可以说WebP正在到来。很多人一直在等待Safari和WebKit的支持，而我们终于有了。但是，当我们考虑新的图像格式时，我们必须了解支持到底意味着什么。浏览器对这些图像的解码有支持。我们还需要真正好的工具支持，这样无论你是在一个节点环境中，图像CDN，如果你是在一个CMS中，你都有能力使用这些图像格式。

Addy Osmani：我记得很多年前WebP刚出来的时候。早期采用者有这样的问题：你把WebP文件保存到你的桌面上，然后突然，”哦，等等。或者，”如果我的用户正在下载WebP，他们会不会被卡住，不知道发生了什么事？”

艾迪-奥斯曼尼。因此，确保在操作系统层面以及其他情况下对图像格式有相当全面的支持，我认为这对图像格式的起飞非常重要。对于那些提供图像的人来说，考虑一下这些使用情况也很重要，这样，如果我正在保存或下载一个文件，你会试图把它放到一个可移植的格式中，人们通常可以轻松地分享。我认为这就是，至少在iOS上，iOS已经得到了对加号和连字符的支持。在必要时，将东西转换为JPEG，使人们能够分享它们。

Addy Osmani。因此，考虑这些类型的用例，我们可以确保用户不受损失，同时我们为他们提供更好的压缩，我认为这很重要。

Drew McLellan：我有一个我经营的幻灯片共享服务，你可以想象，它需要处理成千上万的图片。当我关注WebP的时候，大概是三年前，我主要是在寻找一种降低CDN带宽成本的方法，因为如果你提供的是一个较小的文件，你的服务费用就会减少。但是，虽然我仍然需要一个完整的图像，一个传统的图像格式，我的计算表明，存储一个完整的其他图像集的成本超过了服务一个较小的文件的好处。所以我们现在是在2021年。在这一点上，我是否应该重新考虑这个决定？

Addy Osmani：我认为这是一个非常重要的考虑。有时，当我们谈论你应该如何处理你的图像策略时，很容易给人们一个高水平的答案，”嘿，是的。只要生成五种不同的格式，就可以无限扩展。”但事实并非总是如此。

Addy Osmani：我认为，当你必须牢记存储，有时试图找到什么是最好的，最常见的标准来服务你的用户是值得牢记的。这些天来，我实际上想说WebP是值得考虑的共同标准。对于那些已经习惯于使用图片标签来有条件地向人们提供不同格式的图片的人来说，通常你会使用JPEG作为你的主要退路。也许现在对于大多数用户来说，使用WebP作为你的退路是可以的，除非你的用户使用的是非常非常老的浏览器。我认为我们现在已经很少看到这样的情况了。但你绝对有一些灵活性。

Addy Osmani:现在，如果你想面向未来，我会说选择一种你觉得非常好的格式。如果你能以一种可扩展的方式来处理存储问题，并能灵活地满足你的需求，我想说人们应该考虑JPEG XL。它在技术上还没有在浏览器中出现。当它出现的时候，JPEG XL应该是一个非常好的选择，对于很多照片的有损或无损的使用情况，或者对于非照片的使用情况。而且它可能会比WebP V1好得多。所以这就是一个地方。

Addy Osmani: 我认为，如果你需要使用真正的低比特率，AVIF可能会更好。也许你很关心带宽。也许你对图像的保真度关心得少一点。在这些比特率下，我可以想象它比一些替代品看起来更清晰。在我们有JPEG XL之前，我会尝试看一下你的分析，了解你是否有可能提供AVIF。否则，我会把注意力放在WebP上。如果你是分析人员，我想大多数人都可以提供WebP，而你对宽幅或文本叠加的关心要少一点，在WebP中染色体采样可能不完美的地方。这当然是值得牢记的事情。

Addy Osmani。所以我试图记住，不会有一个适合所有人的尺寸。就我个人而言，这些天我对存储、出口和带宽成本的担心少了一些，因为我使用了一个图像CDN。而且我很高兴地说，我个人使用Cloudinary。在我工作的地方，我们使用很多不同的图像CDN。但我发现，不必担心处理图像管道的维护成本，处理我将如何支持，”哦，嘿，这是另一种图像格式或新类型的回退或新的网络API，”这已经是一个很好的好处，投资的东西，只是为我照顾它。

Addy Osmani。然后，我的用例的总体成本还不错。但我完全可以想象，如果你正在运行一个如此大规模的幻灯片服务，这也不一定是一个选择。

Drew McLellan: 是的。所以我想回到这些即将到来的未来格式的一些问题上。但我认为这是值得研究的，因为任何一种性能工具，Lighthouse，或WebPageTests，如果我们任何人通过它运行我们的网站，它将建议我们使用CDN的图像。对于大公司来说，这是一个非常现实的事情。对于建立小型网站和应用程序的人来说，这是否现实，是否在他们的能力范围之内，或者这实际上像听起来那样容易做到？

Addy Osmani：我认为人们应该问的问题是，”你用图片做什么？”如果你只有几张图片，如果你正在建立一个博客，而且你要加入的图片相对简单，你没有成百上千或成千上万的图片，你可能只需要在构建时以一种非常静态的方式来处理这个问题，你安装几个NPM包就可以了。也许你只是在使用Sharp。这样就可以解决大部分问题了。

Addy Osmani。有一些工具可以帮助你生成多种格式。这确实会增加你的构建时间，但对于很多人来说，这实际上可能是好的。然后，对于那些希望能够利用多种格式的人来说……

Addy Osmani。然后对于那些想利用多种格式的人来说，他们不想处理那么多的工具细节，想得到一个真正丰富的响应式图像或故事，我会说试试图像CDN。我个人最初对在个人项目中使用CDN的成本问题相当犹豫，然后随着时间的推移，当我看了我的账单后，我实际上意识到它为我节省了时间，否则我就会自己投资解决这些问题。我不知道你过去为处理你的图像写了多少自定义脚本，但我意识到，如果我每月至少可以为自己节省几天调试这些不同的npm包的时间，那么成本就可以弥补我所节省的时间，所以这是好的。

Addy Osmani：但是，如果你要扩展到100多个或数百万个图片，而这不是你的收入所能覆盖的，或者不是你准备支付的，你确实需要考虑其他策略。我认为我们很幸运，我们有足够的灵活性，今天我们有足够的工具，能够在这些方向上走，我们做一些更定制的东西，我们自己解决，或推出我们自己的图像CDN，或我们投资于一些稍微商业化的。我们正处于这样一个阶段，我想说的是，对于某些用例，你可以使用图像CDN，而且价格合理。

Drew McLellan: 我想，其中一个指导原则就是要有灵活性，并为变化做好准备。你可能一开始就使用图像CDN来动态地转换你的图像，如果这在成本上无法持续，你可以考虑另一种解决方案，并使你的代码库处于一种状态，这样就可以很容易地用一种解决方案替代另一种。我认为，一般来说，在任何地方，你依靠第三方服务，这是一个很好的原则，不是吗？所以这些即将到来的图像格式，你提到了JPEG XL。什么是JPEG XL？它是从哪里来的？它对我们有什么作用？

艾迪-奥斯曼尼。这是个很好的问题。因此，JPEG XL是下一代的图像格式，它应该是通用的，它是JPEG委员会的一个编解码器。它开始于谷歌的pic格式，然后是Cloudinary的FUIF格式。多年来，有很多格式已经被这种努力所取代，但它已经不仅仅是其各个部分的总和，JPEG XL的一些好处是它对高保真图像非常好，对无损的图像非常好，它支持渐进式解码，无损的JPEG转码，而且它也是一种无忧无虑的，这无疑是一个好处。我认为JPEG XL有可能成为一个非常强大的候选人。我们早些时候谈到，如果你只选一个，你会用什么？我认为JPEG XL有可能成为那一种。

Addy Osmani：我也不想过度承诺，我们对浏览器的支持还处于非常早期的阶段。因此，我认为我们应该真正地等待和观察，实验和评估它在实践中的表现如何，并满足人们的期望，但我看到JPEG XL在有损和无损的情况下都有很大的潜力。现在，我相信Chrome浏览器在支持方面可能是走得最远的，但我也看到Mozilla方面和其他浏览器对这个感兴趣，所以我对JPEG XL的未来感到兴奋。如果我们说，什么是人们感兴趣的更短的期限呢？当然还有AVIF。

Drew McLellan：给我们讲讲AVIF，这是另一个我不熟悉的东西。

Addy Osmani。好的，我们之前提到过AVIF也许是一个更好的候选者，如果你需要使用低比特率，你关心带宽而不是图像保真度，作为一个一般的原则，AVIF确实在低保真度高吸引力的压缩方面处于领先地位。而JPEG XL，它应该在中高保真度方面表现出色，但它们在各自的权利上是略有不同的格式。我们正处于AVIF得到越来越好的浏览器支持的阶段，但让我退一步，再谈谈这个格式。因此，AVIF本身是基于AV1视频编解码器，它已经被开放媒体联盟标准化，它试图让人们获得比JPEG和WebP（我们之前谈到的）更显著的压缩收益。虽然你能从AVIF中获得的确切节省取决于内容和你的质量目标，但我们已经看到了很多案例，与JPEG相比，它可以提供超过50%的节省。

Addy Osmani：它有很多好的功能，它能够为你提供容器支持的新功能，如高动态范围和宽色域，电影颗粒合成。再说一遍，类似于谈论面向未来，图片标签的一个好处是，你现在就可以为用户提供AVIF文件，在不一定支持的情况下，它仍然会退回到你的WebP或JPEG。但回到你关于Photoshop Save For Web的例子，你可以用一个大小为500千字节的JPEG文件，尝试拍摄一个与Photoshop Save For Web类似的质量，有了AVIF，我想说你可能能够达到一个点，这个文件的大小大约是90千字节，100千字节，所以在质量上没有真正明显的损失，节省了很多。

艾迪-奥斯曼尼。其中一个好处是，在有丰富细节的图像中，你最好不要看到有那么多的纹理损失。因此，如果你有森林或露营或任何这些类型的东西的照片，它们在AVIF下应该仍然看起来非常丰富。所以我对AVIF的发展方向感到非常兴奋。我确实认为它在工具支持方面还需要更多的工作。所以我前几天发了一条推特，我们现在有很多使用AVIF的选择，对于单张图片，我们有Squoosh，squoosh.app，这是由Chrome的另一个团队编写的，所以要感谢Surma和Jake对Squoosh的工作。Avif.io为今天试图使用AVIF的人们提供了许多好的选择，无论他们专注于什么技术栈，夏普也支持AVIF。

Addy Osmani：但一般来说，你会想到我们处理图像的其他地方，无论是在Figma、Sketch还是在Photoshop或其他地方，我想说，我们仍然需要在AVIF支持方面做一点工作，因为它需要无处不在，让开发者和用户真正感到它已经落地并回家了。这也是我们目前与Chrome浏览器中的AVIF团队合作的重点领域之一，试图确保我们能够将工具应用到一个相当好的地方。

德鲁-麦克莱伦（Drew McLellan）：所以我们现在在HTML中加入了图片元素，这比传统的图片标签给了我们更多的灵活性。虽然图片标签也有了长足的进步，不是吗？但我们看到图片被添加了，它与原生视频标签是同时出现的，我想这是HTML5最初的一批变化。这让我们有能力指定多个来源，是这样吗？

艾迪-奥斯曼尼（Addy Osmani）：是的，没错。

德鲁-麦克莱伦（Drew McLellan）：所以你可以列出不同格式的图片，浏览器会选择它所支持的格式，这样我们就可以直接进行实验，而不需要太担心会对使用旧浏览器的人造成破坏。

Addy Osmani:绝对的。我想这是在我们考虑方向的用例之外使用图片标签的最好的好处之一，只是能够为人们提供一张图片，让浏览器浏览潜在的来源列表，并看到，好吧，我将使用列表中我理解的第一个，否则我将退缩，这对人们来说是一个非常强大的能力。我想同时，我也听到一些人表达了一些关切或担心，当我们试图支持多种格式时，我们正在重新生成非常巨大的标记，而且你考虑到这些格式的不同尺寸，突然间它变得有点笨重。

Addy Osmani。那么，我们是否有其他方法可以解决这些问题？我不想在图像CDN上向人们推销太多，我希望他们能自己站起来。但这是其中的一个地方，一个叫做内容协商的想法实际上可以为你提供一个有趣的路径。所以，我们已经谈了一点关于图片标签的问题，在那里你必须生成一堆不同的资源，并决定偏好的顺序，对吗，额外的HTML。通过内容协商，它说的是让我们在服务器上做所有这些工作。因此，客户可以通过接受HTTP头的MIME类型列表来告诉服务器它支持哪些格式。然后，服务器可以做所有繁重的工作，生成和管理最终的资源，并决定将哪些资源下发给客户。这里的一个强大之处在于，如果你使用一个图片CDN，你可以指向一个单一的资源。

Addy Osmani。因此，如果我们有一张puppy.JPEG这样的图片，我们可以给人们一个puppy.JPEG的URL，如果他们的浏览器支持WebP或支持AVIF，服务器就可以非常聪明地根据他们的支持情况向这些用户提供正确的图片，但在其他情况下，你不需要自己做大量的额外工作。现在，我认为这是一个强大的想法。你可以在服务器上做很多事情，我们有时会谈论不是每个人都有机会获得真正强大的网络质量，你的有效连接类型可能真的不同，这取决于你在哪里。

Addy Osmani。即使住在硅谷，我可能从咖啡馆走到酒店，或者我可能在车里，我的WIFI或信号的质量可能不是那么好。因此，这就是你可以访问其他API的地方，其他想法，如Save-Data客户端的提示，如果用户选择了节省数据，就有可能为人们提供更小规模的资源。因此，我们可以在服务器端做很多有趣的事情，我认为我们应该继续推动这些想法，找到一个很好的平衡点，让那些适应市场路径的人有所有的灵活性来这样做，让那些想要更神奇的解决方案的人也有一些选择。

德鲁-麦克莱伦：这种数据保存方法的概念是我从你的书中首先了解到的。我的意思是，让我们再深入了解一下，因为这很有趣。所以你说的是，浏览器能够发出信号，希望减少数据体验，因为它可能是在一个计量连接上，或者电池电量不足或其他原因。

艾迪-奥斯曼尼。是的。没错，就是这样。我在平时或以前旅行的时候，我们会经常旅行，我经历过世界上很多地方或情况，我的网络质量可能非常差或非常不稳定，所以即使打开一个网页也可能是一个令人沮丧或困难的经历。我可能正在查找菜单，如果我不能看到他们提供的美丽食物的图片，我可能会去一个可以的地方，或者我可能，我不知道，自己做一些食物。但我认为，关于数据保存器的一个有趣的事情是，它给你一个连接，回到用户的偏好是什么。因此，如果作为一个用户，我知道我的网络连接有困难。我可以说，”好吧，那我就在我的浏览器中选择进入数据保护模式。”

艾迪-奥斯曼尼。然后你可以作为一个开发者使用这个信号说，”好的，好的，用户有点受限制，也许我们会让他们浏览更小的图片或质量更低的图片。”但是他们仍然可以看到一些图片，这比他们等待很长时间才得到更丰富的图片要好。这些类型的信号的其他好处是，你可以使用它们来有条件地提供媒体。因此，也许在某些情况下，文本是该页面中最重要的东西，如果你发现用户处于一种受限的环境中，也许你可以关闭这些图片。我只花30秒来讨论这个问题，但你真的可以把这个想法推到极致。你可以用Save-Data做一些有趣的事情，也许甚至可以关闭用JavaScript实现的非常昂贵的功能。

Addy Osmani: 如果你有某些被认为是稍微可有可无的组件，也许那些不一定需要下发给所有的用户，如果它们只是增强体验的话。你仍然可以为每个人提供一个非常核心的、小的、快速的体验，然后为那些拥有更快的连接或设备的人在上面涂上一些漂亮的糖霜。

Drew McLellan:潜在的，我想它可以成为分页的因素，你可以在一个页面上返回10个结果，而不是100个，还有这些事情。因此，有很多有趣的、有意思的功能。我想我们都熟悉这样一个令人沮丧的过程：准备好一个新的网站，优化你所有的图片，把它交给客户，给他们一个CMS来管理内容，然后发现他们只是用糟糕的优化图片来替换所有的东西。我的意思是，图片CDN，我想，将是一个非常方便的解决方案，但是否有其他的解决方案，是否有CMS可以在服务器上做的事情来帮助解决这个问题，或者图片CDN只是可能的方式？

Addy Osmani：我认为我们在尝试让每个人都优化他们的图片至少六、七年后发现，这是一个很难解决的问题，一些参与图片的人可能对技术更精通，也许可以舒适地设置他们自己的工具，或去运行Lighthouse或尝试其他工具，让他们知道是否有机会改进。我希望看到人们持续地使用Lighthouse等工具，以发现是否有机会进一步优化或提供合适大小的图片，但除此之外，有时我们会遇到这样的情况，即上传图片的人甚至不一定了解他们所上传的资源的成本。这是我们通常遇到的情况，我要道歉，我不会过多地指责别人，但这是我们甚至在谷歌博客中遇到的情况。

Addy Osmani。在谷歌博客上，每隔几周就会有人上传一个非常大的20或30兆字节的GIF动画。我不指望他们知道这不是一个好主意，他们想让文章看起来很酷，很有吸引力和互动性，但这些受众不一定会知道去运行工具或使用ImageOptim或使用任何这些其他的工具，所以为他们记录，他们应该检查它们，当然是一个选择。但是，能够自动解决这个问题，我认为是非常有说服力的，有助于我们持续地达到一个地方，希望我们能够平衡所有CMS用户的需求，无论他们是技术性的还是非技术性的，以及我们用户的需求。

Addy Osmani:所以我认为图像CDN肯定可以在这里发挥帮助作用。归根结底，重要的是确保你在人们之间有一个解决方案，可能上传这些图片的利益相关者，以及向用户提供什么。如果它是一个图像CDN，如果它是你自己推出的东西，如果它是一个内置的步骤，只是需要有一些东西，以确保你不会提供非常，非常大和低效率的东西。

Drew McLellan: 谈到GIF动画，它们出奇地受欢迎。它们很有趣，我们喜欢它们，但它们也很庞大。实际上，这是一个不是为视频设计的文件格式被用于视频的情况。对于这些图像格式，有什么解决办法吗？我们能做什么？

艾迪-奥斯曼尼。哦，天哪。GIF的历史很吸引人。我们看到很多我们熟悉和喜爱的格式，或者已经存在了一段时间的格式，都起源于80年代末到90年代初，而GIF就是其中之一。它创建于1987年。我和GIF的年龄差不多。

艾迪-奥斯曼尼。正如你所提到的，它最初并不是为了使用案例而创造的。我认为是Netscape Navigator在90年代中期增加了对GIF循环的支持，给了我们这种疯狂的有趣的方式来做备忘录之类的东西，但是GIF有很多缺点。在许多情况下，它们被限制在一个非常有限的调色板上；在许多情况下，是256种颜色。它们是一种位图光栅格式，像素值存储在图像文件中。

Addy Osmani。由于一些原因，它们的效率很低。而且你提到它们也相当大。我认为我们已经陷入了这样的想法：如果我们想要一个短的视频或动画片段，而且要循环播放，那么我们就必须使用GIF。而事实并非如此。

Addy Osmani。虽然我们看到有一些现代图像格式支持动画，但我认为现在你能做的最基本的事情是确保你提供的是视频而不是GIF。缄默的自动播放视频与HD64、HD65，无论你要使用什么视频，都可以非常强大，而且对于你需要显示一连串图像的用例来说，体积明显小。

Addy Osmani:这方面是有选择的。AVIF已经有了图像序列，有可能。其他格式也探索了这些想法。但我认为，你可以做的一件事是，如果你现在使用GIF，或者你有一些技术性稍差的用户现在使用GIF，试着看看你是否可以给他们提供工具，让他们输出一个视频，或者如果你的管道可以为他们解决这个问题，那就更好了。

Addy Osmani：我有很多与CMS供应商的对话，你确实看到人们在上传GIF。他们不知道视频和GIF文件的区别。但如果你能，不管是用图片CDN还是通过一些内置的程序，把文件改成更有效的格式，那就太好了。

Drew McLellan: 我们简单地谈到了像ImageOptim这样的工具，它可以从文件中剥离信息，以较小的文件大小给我们提供相同质量的结果。我推测这是因为我们通常处理的文件格式首先没有为在网络上传输而进行优化，所以他们正在做这个步骤，删除任何对在网络上服务没有用的东西。这些新格式是否已经考虑到了这一点？像ImageOptim这样的工具，在这些新的格式中是不是就不需要了？

Addy Osmani：我预计一些老的格式……。那些已经存在了一段时间的东西，需要一段时间来淘汰或演变为其他东西。所以我可以看到像ImageOptim这样的工具会继续有用。现在，现代图像格式做得更好的是什么？嗯，我想说的是，他们考虑到了很多东西。

Addy Osmani。他们考虑到了，图片中是否有一些人眼不一定能分辨出来的地方？当我在玩不同的质量设置或不同的编解码器时，我总是在寻找一个点，如果我把质量降得足够低，我就会看到带状伪影。我将会看到在我的建筑物或图片的细节周围有很多奇怪的方块。

Addy Osmani：但是一旦这些开始消失，我真的需要开始放大图片，并在这些不同的格式之间进行比较。如果用户不可能这样做，那么我认为有很好的问题，那就是这个质量点是否足够好？我认为，现代图像格式在能够帮助你导航方面非常好，能够很好地过滤掉一些细节。牢记什么是色彩的需求，因为显然我们现在也有白域这个东西。

Addy Osmani。有些人可能对改变你的调色板或不改变调色板没有意见，这取决于你所拥有的图像类型，但我肯定看到现代格式试图对代际损失之类的东西具有弹性。代代相传是这个想法…我们刚才提到了备忘录。今天网络上的一个常见问题是，你会发现一个备忘录，无论是在Facebook、Instagram、Reddit还是其他什么地方，你会保存它，也许你会和朋友分享它。也许他们会把它上传到别的地方。而你突然有了这种可怕的复印机或传真机的效果，随着时间的推移，图像的质量越来越差，越来越差。

艾迪-奥斯曼尼。因此，当我看到一些被重新分享的东西，我可能在三个月前就看到了，现在它可能不是真的，真的质量很差。你仍然可以看出一些细节，但图像格式，能够记住这一点，并解决这些类型的问题，我认为是非常有趣的。

Addy Osmani：我知道JPEG XL也在试图保持这种代际损失的想法。所以，现代的编解码器和格式有很多东西是为了满足我们的需要而努力发展的，即使它们是非常注重记忆的。

Drew McLellan。比方说，你继承了一个项目，上面有各种各样的图片。在图像优化方面，评估该项目状况的最好方法是什么？有什么工具或东西可以帮助你吗？

Addy Osmani：我认为这取决于你有多少时间沉入这个问题。人们可以尝试做一些非常基本的事情，比如明显地将这些图片以推荐的默认质量批量转换为更现代的格式，然后用眼睛检查它们与原始图片相比的效果如何。

Addy Osmani：如果你能够投入更多的时间，有很多工具和技术，如DSSIM和其他方法，能够比较不同类型的图像转换后的感知质量差异是什么。你可以将其作为一种数据驱动的方法来决定，如果我打算将我所有的旧图像批量转换为WebP，我应该依靠什么质量设置？如果我打算对AVIF或JPEG XL进行转换，我应该依靠什么质量设置？

Addy Osmani：我认为人们有很多可用的工具。这真的只取决于你的时间沉淀，这是可能的。你可以做的其他事情，再次回到图像CDN方面，如果你没有很多时间，而且你能接受图像CDN的成本，你可以批量上传所有这些图像。有一些CDN支持这种自动质量设置的想法。我想在Cloudinary中，它是q_auto，或类似的东西。

Addy Osmani：但基本的想法是，他们会对图片进行扫描，试图了解其中的内容类型，并自动决定你应该为提供给用户的图片使用的正确质量水平。因此，你确实有一些工具选项，在这里是可用的，是肯定的。

Drew McLellan: 我的意思是，你提到了图像的批量处理。当你这样做的时候，你可能已经进入了你所说的代际损失的领域。例如，当你把一个已经压缩过的JPEG图像转换成WebP图像时，你就会面临一些质量损失的风险。批量转换是一个可行的策略吗？如果你关心图像的原始外观，代际损失会不会影响太大？

Addy Osmani：我认为这取决于你在多大程度上考虑了你对有损和无损的舒适程度，以及你的使用情况。如果我的使用情况是，我继承了一个项目，这个项目是我的家人在过去20年里的所有照片，我可能对这些图像的质量损失太大感到不舒服，如果质量能保持基本不变，只是使用更现代的格式，也许我可以多花一点钱来存储。

Addy Osmani：如果这些是产品目录或任何商业网站的图片，我认为你确实需要记住你的用例是什么。用户是否需要能够看到这些图片的某种程度的细节？如果是这样的话，当你选择正确的格式，选择正确的质量时，你需要在心中做出这些权衡。

艾迪-奥斯曼尼。所以我认为这个批次还是可以的。为了给你一个具体的想法，看到人们大规模地处理这个问题，有时人们会从他们继承的那个大的图片集中抽取一个较小的样本，他们会用这组图片进行更认真的实验。如果他们能够找到一种对该样本有效的方法，他们就会将其应用于整个批次。我已经看到这种方法取得了不同程度的成功。

德鲁-麦克莱伦：所以优化文件大小只是整个图像优化领域的一个点。我想继续讨论我们可以在浏览器中做什么来优化图片的使用方式，在本期节目赞助商的简短发言后，我们将开始讨论。

Drew McLellan：所以我们已经优化和压缩了我们的大文件，但现在我们需要考虑在浏览器中使用这些文件的策略。忠实的图片标签在最近获得了一些新的力量，不是吗？

Addy Osmani：是的，它有。也许这对人们来说很有用……。我知道现在有很多人问我关于图片的问题，也要求我从指标和核心网络生命力的角度来看待它。如果我谈一下什么是核心网络指标，也许用这些当前的术语来框定一些想法，会有帮助吗？

Drew McLellan。当然可以，因为 “核心网络指标 “是谷歌的一项倡议，不是吗，我们最近才看到？我们被告知，它可能会在某种程度上影响搜索排名。在图像方面，核心网络生命力对我们来说究竟意味着什么？

艾迪-奥斯曼尼。好问题。正如你所提到的，”核心网络指标 “是谷歌的一项倡议，它是关于尝试分享质量信号的统一指导。这对于在网络上提供良好的用户体验是非常关键的。而且它是谷歌搜索可能为排名目的而评估的一组页面体验信号的一部分，但它们可以通过多种方式影响核心网络指标。

艾迪-奥斯曼尼。现在，在我谈论这些方式之前，我也许应该说，什么是核心网络生命力的指标？目前有三个指标在核心网络指标中。一个是最大的内容画，一个是累积的布局转移，还有一个是首次输入延迟。现在，在很多现代网络体验中，我们发现图像往往是页面上最大的可见元素之一。我们看到很多产品页面都有一张大图片，是主要的产品图片。我们在旋转木马、故事和横幅中看到图片。

Addy Osmani:现在，最大的有内容的图片，或LCP，是一个核心网络指标，试图衡量最大的有内容的元素，无论是图像文本还是其他东西，何时在用户的视口中，这样我们就能知道该图像何时变得可见。这确实允许浏览器确定页面的主要内容何时真正完成了渲染。

Addy Osmani。所以，如果我想去一个菜谱网站，我可能关心菜谱的外观，所以我们关心的是确保菜谱的大英雄图像对我来说是可见的。现在，LCP元素可以随着时间而改变。很有可能在加载初期，最大的东西可能是一个标题，但随着页面的不断加载，它实际上可能最终成为一个更大的图片或某种海报。

艾迪-奥斯曼尼。因此，当你试图优化最大的内容的油漆时，你可以做四件事。第一件事是确保你尽可能早地申请你的关键英雄图像。一般来说，我们在页面中有一些重要的东西。我们要确保我们能呈现出主页面的内容和布局。

Addy Osmani:对于布局，通常我们谈论的是CSS。因此，你可能会在你的页面中使用关键的CSS，内联CSS，想要避免那些阻碍渲染的东西，但是当涉及到你的图片时，理想情况下，你应该尽早请求该图片。也许这涉及到确保浏览器能够在页面中尽可能早地发现图片，因为我们现在很多人都在依赖框架。

Addy Osmani：如果你不一定使用SSR，即服务器端渲染，如果你在等待浏览器发现你的一些JavaScript包，你的组件包，无论你有一个英雄图像或产品图像的组件，如果浏览器必须等待获取、解析、执行、编译和执行所有这些不同的文件才能发现图像，这可能意味着你最大的内容丰富的图像将需要一些时间才能被发现。

Addy Osmani。现在，如果是这种情况，如果你发现自己处于一个图片被请求得很晚的地方，你可以利用浏览器的一个功能，叫做link rel preload，以确保浏览器能够尽早发现该图片。现在，预加载是一个非常强大的功能。这也是一个你需要非常小心的功能。这些天来，你很容易就会听到我们为你的钥匙推荐预加载。

Addy Osmani。也许你听到我们建议为你的关键英雄图像以及你的关键脚本和关键字体进行预加载。这就变成了一个非常大的、大规模的尝试，以确保你以正确的顺序排列东西。因此，LCP图像绝对是一个值得记住的关键地方。

艾迪-奥斯曼尼。另一件事，正如我提到的四件事，另一件事是确保你使用源集和一个有效的现代图像格式。我认为，源集真的很强大。我还看到，有时人们在使用它时，他们会试图过度补偿，也许会在其中为每个可能的分辨率提供10个不同版本的图像。我们倾向于发现，至少在一些研究中，超过三个图像，用户真的很难分辨出图像质量、清晰度和细节方面的差异。因此，DPR上限，设备像素比上限，当然是一个值得记住的想法。

Addy Osmani:然后对于现代图像格式，我们前面谈到了格式，但要考虑你的WebP，你的AVIF，你的JPEG XL。避免浪费像素。在质量方面有一个好的策略真的很重要。我认为，在很多情况下，即使是默认的质量有时也会过高。因此，我会尝试降低你的比特率，降低你的质量设置，看看你能在保持清晰度的情况下为你的用户做多大的事情。

Addy Osmani:当我们谈论加载时，在过去的几年里，图像标签支持的另一件事是懒人加载。因此，有了懒加载，你不再需要使用一个JavaScript库来给你的图片添加懒加载。你只需把它放到你的图片上。在chromium浏览器和Firefox中，你可以懒惰地加载这些图片，而不需要使用任何第三方的依赖性。这也是非常好的。

Addy Osmani。所以，我们已经有了懒人加载的功能。我们还支持其他的东西，比如同步解码，但我要继续下去，并快速谈论其他两个核心的重要指标。

Drew McLellan。去吧，是的。

Addy Osmani。所以，要摆脱布局的转变。没有人喜欢东西在他们的页面上跳来跳去。我觉得，我最大的挫折之一是我打开了一个网页。我把手指悬停在一个我想点击的按钮上，然后突然有一堆广告或没有设置尺寸的图片或其他东西跳进来。这导致了一种非常不愉快的体验。

Addy Osmani。因此，累积布局转移试图衡量内容的不稳定性。很多时候，推动你的布局转移的常见的东西是图片或你的页面上的其他元素，只是没有尺寸设置。我想这是一个人们经常直接设置图片尺寸的地方。也许这不是我们历史上做得最多的事情，但肯定是值得花时间的事情。像灯塔这样的工具会试图帮助你收集，比如你的页面上需要尺寸的图片列表是什么？所以你可以去设置它们。

Drew McLellan：我想说的是，这是一个非常有趣的观点，因为当响应式网页设计成为一种事物的时候，我们都会去检查我们的网站，把图片尺寸去掉，因为我们所掌握的工具要求我们的图片没有高度和宽度属性。但现在这不是一个好主意，是吗？

艾迪-奥斯曼尼。旧的东西又是新的。我想说，在你的图片上设置尺寸是绝对值得的。在你的广告上设置尺寸，你的眼框，任何有可能改变尺寸的动态内容，都值得设置尺寸。

Addy Osmani。对于那些正在建立真正有趣的体验的人来说，用错了词，真正有趣的布局体验，也许你需要在响应式卡片等方面做更多的工作；我会考虑使用CSS长宽比或长宽比框来保留你的空间。这也是对那些图片的尺寸设置的补充，以确保当你试图避免你的布局转移时，事情是尽可能的固定。

Addy Osmani。然后，最后一个Core Web Vital是第一个输入延迟。当涉及到图像时，人们不一定总是想到这个问题。因此，事实上，图像有可能在页面加载时阻碍用户的带宽和CPU。它们会妨碍其他关键资源的加载，特别是在非常慢的连接或低端移动设备上，会导致带宽饱和。

Addy Osmani。因此，首次输入延迟是一个核心网络活力指标，它可以捕捉到用户对网站的互动性和响应性的第一印象。因此，通过减少主线程CPU的使用，你的首次输入延迟也可以被最小化。因此，一般来说，只要避免可能导致网络争用的图像。它们不是渲染阻塞。但它们仍然会间接影响你的渲染性能。

Drew McLellan: 对于图片，我们有什么办法可以阻止它们的渲染阻塞吗？我们能不能在最初阶段减轻浏览器的负担，使我们能够更快地进行交互？

Addy Osmani：我认为现在非常重要的一点是，要很好地理解正确的最佳图片顺序，以便在折叠上方显示一些东西。我知道折叠上方是一个超负荷的术语，但就像在用户的第一个视图端口。很多时候，我们最终会试图申请一大堆资源，其中一些是图片，而这些资源对于用户马上要看到的东西来说并不是真的必要。而这些往往是在页面生命周期的后期加载的很好的候选者，是可以懒惰地加载的好东西。但是，如果你需要一大堆图片，比如一开始就需要一大堆东西，这些就有可能会产生影响。

Drew McLellan: 是的。所以，我的意思是，你提到的懒惰加载图片，我们历来需要一个JavaScript库来做，这有它自己的缺点，我认为，因为浏览器优化加载图片的历史方式，几乎不可能阻止它们加载图片，除非你不给它一个源。如果你不给它一个源，然后试图用JavaScript来纠正它，如果JavaScript不运行，你就得不到图像。因此，懒惰加载，原生懒惰加载是对所有这些问题的一个回答。

Addy Osmani：是的，没错。我认为这也是我们在过去一年中试图改善各浏览器的原生懒加载体验的一个地方。正如你所知道的，这是我们在早期推出的功能之一，我们能够利用与业界思想领袖的对话来了解，”哦，嘿，如果你使用懒惰尺寸或使用其他JavaScript的懒惰加载库，你实际上手动设置的阈值是什么？”然后我们调整了我们的阈值，试图让它稍微接近你所期望的。

Addy Osmani:所以在很多情况下，你可以直接使用本地懒惰加载。如果你需要更精细的东西，如果你需要更多的控制，能够设置交叉观察者的阈值，浏览器何时请求东西，我们一般建议，在这些情况下使用一个库，只是因为我们试图解决90%的用例。但10%的情况仍然有效。可能有的人还需要更多一点的东西。因此，对于大多数人来说，我希望在可预见的未来，原生的懒惰加载将是足够好的。

Drew McLellan。最重要的是，它是免费的。添加一个简单的属性，你就可以免费获得所有这些功能，这很好。如果我们的听众可以做一件事，可以去做他们的网站以改善他们的图像优化，那会是什么？他们应该从哪里开始？

艾迪-奥斯曼尼。一个好的开始是了解这个问题对你的网站有多大影响。我想去看看Lighthouse或Pay speed insights。在你的几个最受欢迎的页面上运行它，看看有什么结果。如果看起来你只有一两件小事要做，那真是太好了。也许你可以在那里投入一些时间。

Addy Osmani：如果有一个长长的事情清单，也许看看你有哪些最高的机会，这些事情说，”哦，嘿，如果你做这一件事，你可以节省多秒。”然后把你的精力集中在那里开始。

艾迪-奥斯曼尼。正如我们在这里谈到的，随着时间的推移，现代图像格式的工具已经变得更好。图像CDN绝对值得考虑。但除此之外，你还可以采取很多小步骤。有时，如果是一个足够小的网站，甚至只是去打开Squoosh，把你的一些图片放在那里就可以成为一个很好的起点。

德鲁-麦克莱伦：这是个可靠的建议。现在我知道这是一本令人震惊的出版物，但我真的必须祝贺你的这本书。它是如此全面，而且真的很容易消化。我认为这是一本非常有价值的读物。

德鲁-麦克莱伦：所以我一直在学习所有关于图像优化的知识。你最近在学习什么，艾迪？

艾迪-奥斯曼尼。我最近在学习什么？事实上，在一个稍微不同的主题上，仍然与图像有关，所以当我在大学里读硕士的时候，我真的深入到了计算机视觉，并试图了解，我们如何能够检测到图像的不同部分，并利用它们做疯狂而有趣的事情？

艾迪-奥斯曼尼。我最近研究的一个具体问题是，我一直在看我自己在婴儿或儿童时期的照片。那时候，我父母拍的很多食物都不一定是用数码相机拍的。它们是宝丽来照片。它们往往是一些低分辨率的图像。我希望有一种方法能够将这些照片放大。所以我最近又开始研究这个问题。这让我了解到更多关于我可以在浏览器中做什么。

Addy Osmani。所以我一直在建立一些小工具，让你使用机器学习，使用TensorFlow，使用现有的技术，把一个相对低分辨率的图像或插图，然后把它们放大到更高的质量。因此，这比简单地将图像拉伸出来要好。这就像实际上是在填补细节。

艾迪-奥斯曼尼。这很有趣。我已经学到了很多关于网络装配在不同浏览器中的稳定性，以及你可以将其中一些想法用于桌面应用程序的案例。这真的很有趣。所以，我最近一直在研究很多网页程序集的问题。这很不错。

德鲁-麦克莱伦：这很有趣，不是吗？当一项技术出现时，你所知道的一切都被颠覆了。我们总是说，在网络上，我们可以把图片变小。但是，如果我们只有一张小图片，我们就不能把它变大。这是不可能的。但现在我们有了技术，在很多情况下，可能使之成为可能。这真的很吸引人。

Drew McLellan：如果你，亲爱的听众，想听到更多来自Addie的消息，你可以在Twitter上找到他，他的名字是@AddieOsmani，并在AddyOsmani.com上找到他所有的项目链接。图像优化》一书的实体版和数字版现在都可以在Smashingmagazine.com上找到。谢谢你今天加入我们，Addy。你有什么临别赠言吗？

Addy Osmani。有什么临别赠言吗？我有一个历史上的小怪癖，我将与大家分享。蒂姆-伯纳斯-李在1992年向互联网上传了第一张图片。我不知道你是否能猜到那是什么，但你可能会感到惊讶。德鲁，你有什么猜测吗？

德鲁-麦克莱伦：我猜是一只猫。

艾迪-奥斯曼尼。一只猫。这是一个很好的猜测，但不是。这是在CERN。图片实际上是一个叫Les Horribles Cernettes的乐队，这是一个模仿流行音乐的乐队，由一群CERN的员工组成。他们所做的音乐就像嘟-沃普音乐。他们会唱关于对撞机、怪癖、液氮和反物质的情歌，穿着六十年代的服装，我觉得这很美妙，很随意。