关于前端:现代图片性能优化及体验优化指南-图片类型及-Picture-标签的使用

图片资源，在咱们的业务中堪称是占据了十分大头的一环，尤其是其对带宽的耗费是非常微小的。

对图片的性能优化及体验优化在明天就显得尤为重要。本文，就将从各个方面论述，在各种新个性满头飞的明天，咱们能够如何尽可能的对咱们的图片资源，进行性能优化及体验优化。

图片类型的选取及 Picture 标签的应用

首先，从图片的类型上而言，除了常见的 PNG-8/PNG-24，JPEG，GIF 之外，咱们更多的关注另外几个较新的图片格式：

• WebP
• JPEG XL
• AVIF

首先，通过一张表格，疾速过一下这几个图片，咱们将从图片类型、通明通道、动画、编解码性能、压缩算法、色彩反对、内存占用、兼容性方面，比照它们：

首先，理解理解上述的一些参数含意：

• Alpha 通道：图片是否反对通明的个性

当然，须要指出的是，Alpha 没有透明度的意思，不代表透明度。opacity 和 transparency 才和透明度无关，前者是不透明度，后者是透明度。比方 css 中的「opacity: 0.5」就是设定元素有 50% 的不透明度。起初 Alvy Ray Smith 提出每个像素再减少一个 Alpha 通道，取值为 0 到 1，用来贮存这个像素是否对图片有「奉献」，0 代表通明、1 代表不通明。也就是说，「Alpha 通道」贮存一个值，其外在体现是「透明度」，Alpha 和透明度没啥关系

• 动画：很好了解，图片是否反对多帧率动静图片，相似于 GIF
• 编解码性能：图像的解码与编码。这个很要害，很多人看待图片容易漠视图片的编解码性能，解码图像次要从图像文件中读出图像数据，而编码则是将图像数据写入图像文件。解码与编码的过程正好相同。而这两者的性能耗时会影响咱们页面的的展现性能。

• 压缩算法：该图片格式是否反对压缩，反对的话，图片的压缩又会分为无损压缩与有损压缩

  有损压缩算法 是一种数据压缩办法，通过此办法压缩、解压的数据会与原始数据不同然而十分靠近。原理是借由将主要的信息数据舍弃，就义一些品质来缩小数据量、进步压缩比

无损压缩 指数据通过压缩后，信息不受损失，还能完全恢复到压缩前的原样。无损压缩通常用于严格要求“通过压缩、解压缩的数据必须与原始数据统一”的场合。

• 色彩反对：会分为索引色与间接色，在过来，为了节俭存储空间，并非所有图片都能反对所有色彩值，因而存在索引色这种优化形式。

  索引色彩 是一种以无限的形式治理数字图像色彩的技术，以节俭计算机内存和文件存储，同时减速显示刷新和文件传输。即用一个数字来代表（索引）一种色彩，在存储图片的时候，存储一个数字的组合，同时存储数字到图片色彩的映射。这种形式只能存储无限种颜色。索引色常见有 1 位（即黑白），8 位（即灰阶 /256 色），16 位（即高彩），24 位（即真彩），30/36/48 位（即全彩）。

间接色 应用四个数字来代表一种色彩，这四个数字别离代表这个色彩中红色、绿色、蓝色以及透明度（即 RGBA）。当初风行的显示设施能够在这四个维度别离反对 256 种变动，所以间接色能够示意 2 的 32 次方种颜色。

• 内存占用：图片对内存资源的占用
• 兼容性：影响图片格式是否大规模推广的外围因素之一

WebP vs JPEG XL vs AVIF: JPEG 代替之战

因为传统的 PNG-8/PNG-24，JPEG，GIF 各自或多或少都存在一些问题，近些年来它们的代替计划之争也愈演愈烈，外围领跑者可能是 WebP、JPEG XL、AVIF。

再简略理解理解它们：

WebP

WebP 最后由 Google 在 2010 年 9 月公布，其个性总结如下：

1. 能够同时提供无损 / 有损压缩（像 JPEG 一样）和反对透明度（像 PNG 一样）的图片文件格式
2. 反对动画成果（像 GIF 一样）
3. WebP 次要劣势在于有损编码，其无损编码的性能和压缩比体现个别
4. WebP 的毛病在于其编解码性能不是特地现实
5. 在兼容性方面，除了 IE，根本曾经失去了全系列浏览器反对

对于简单的图像（比方照片）来说，WebP 无损编码体现并不好，但有损编码体现却十分棒。相近品质的图片解码速度 WebP 相距 JPEG 也曾经相差不大了，而文件压缩比却能晋升不少。

下图是我之前还在 TX 的时候做的一个测试比照：

加载同样张数的 JPEG 与 WebP 的耗时比照：

对于 WebP 图片格式，简略做个总结：

1. 目前 WebP 与 JPEG 相比拟，据材料考据，编码速度慢 10 倍，解码速度慢 1.5 倍
2. WebP 尽管会减少额定的解码工夫，但因为大幅缩小了文件体积，缩短了加载的工夫，大页面图片量较多的场景下，页面的渲染速度是有较大放慢的
3. 目前而言，是 WebP、JPEG XL、AVIF 三者中兼容性最好的

截止至（2023-02-05）的兼容性图：

JPEG XL

JPEG XL 由联结图像专家组（开发原始 JPEG 规范的同一组织）于 2021 年公布，旨在成为传统 JPEG 的长期替代品。作为一种免版税的开源规范，JPEG XL 的创建者心愿其格局的开放性可能吸引网络开发人员采纳该规范，该格局的扩大名为 .jxl，JXL 外围比特流于 2021 年 1 月解冻，文件格式于 2021 年 4 月定稿。：

JPEG XL 中的 X 指 2000 年以来的多个 JPEG 规范的名称：JPEG XT、JPEG XR、JPEG XS，而 L 示意 ‘long-term’，示意“长期”。创立这种格局是为替换旧的 JPEG 文件格式，并应用足够长的工夫。

其次要特点有：

• 与传统图像格式（例如 JPEG、GIF 和 PNG）相比，有着更佳的效率与更丰盛的性能
• 全面反对广色域和 HDR，反对 Alpha 通道，反对多帧（也就是动画反对）
• 有损压缩时：雷同的视觉品质，比 JPEG 小约 60%。
• 无损压缩时：比 PNG 减小约 35%（对于 HDR，减小 50%）。
• 反对无损 JPEG 转码，减小约 20% 文件大小。
• 渐进式解码，专为反对不同显示分辨率的响应式加载
• 开源收费：具备应用三条款版 BSD 许可证的开源参考实现的免版税格局

看看同一张图片，雷同品质下的大小体现：

数据起源：技术周刊 2021-04-15：2021 最值得期待的新技术 JPEG XL

JPEG XL 是目前而言，最有可能全面代替传统图片格式（Gif、PNG、JPEG）的下一代规范，当然，在明天，须要看看其兼容性：

好吧，目前的兼容有点离谱。Chrome 从 91 版本开始曾经实验室性质反对了 .jxl 格局的图片，须要通过 --enable-features=JXL 配置开启。

AVIF

最初，咱们再来看看 AVIF 格局图片。

AVIF 是由凋谢媒体联盟 (AOM) 开发并于 2019 年公布的另一种最新图像格式。该格局基于 AV1 视频编解码器，源自视频帧。其特点如下：

• 同样的，与传统图像格式（例如 JPEG、GIF 和 PNG）相比，有着更佳的效率与更丰盛的性能
• 反对 Alpha 通道，反对动静图像和动画
• 反对有损、无损压缩。AVIF 文件在低保真有损图像压缩方面表现出色（比 JPEG XL 更优）。压缩的 AVIF 图像保留了很高的图片品质，防止了宜人的压缩伪影等问题
• 相对而言，AVIF 的解码和编码速度不如 JPEG XL，它不反对渐进式渲染
• 最初，再看看兼容性，目前（2023-02-05）它的兼容性介于 WebP 与 JPEG XL 之间

看看 CaniUse 的数据：

下图是 WebP vs JPEG XL vs AVIF 三者在图片解码上的性能体现：

图片来源于：Encode.su — JPEG XL vs. AVIF

能够看到，对于解码性能的比照，JPEG XL > AVIF > WebP。

图片格式总结

总结一下，WebP、AVIF 和 JPEG XL 都是浏览器不广泛支持的新型图像格式。尽管 WebP、AVIF 曾经存在很长时间，但到明天，影响它们大规模应用的仍旧是兼容问题。

JPEG XL 作为它们三者中的佼佼者，尽管目前没有失去任何浏览的齐全反对。然而其性能个性是三者中最为弱小的，将被视为将来的图片规范格局推动。

尽管 JPEG XL 等新型图片格式未失去任何浏览器的齐全反对，然而在新版本的 Chrome、Firefox 和 Edge Chromium，能够应用配置标记启用对应图像格式，配合 HTML 的 Picture 标签，咱们还是能够肯定水平上对咱们的图片进行格局抉择上的优化的。

这，就能够引出咱们要说的第二局部 — HTML Picture 标签的应用。

Picture 元素的应用

HTML5 标准新增了 Picture Element。那么 <picture> 元素的作用是什么呢？

<picture> 元素通过蕴含零或多个 <source> 元素和一个 <img> 元素来为不同的显示 / 设施场景提供图像版本。浏览器会抉择最匹配的子 <source> 元素，如果没有匹配的，就抉择 <img> 元素的 src 属性中的 URL。而后，所选图像出现在 <img> 元素占据的空间中。

什么意思呢？怎么应用 <picture> 元素呢？

假如，没有 <picture>，只有 <img> 元素，咱们想尽可能在反对一些古代图片格式的浏览器上应用相似于上述咱们提到的 WebP、AVIF 和 JPEG XL 等图片格式，而不反对的浏览器回退应用惯例的 JPEG、PNG 等。没错，就是一种渐进加强的思维，该怎么办呢？

只能是 JavaScript 去写对应的逻辑，通过 JS 脚本进行个性查问，动静赋值给 <img> 的 src。

而有了 <picture> 后，浏览器将原生反对上述的一些列操作，咱们来看看对应的语法：

<picture>
  <!-- 可能是一些对兼容性有要求的，然而性能体现更好的古代图片格式 -->
  <source src="image.avif" type="image/avif">
  <source src="image.jxl" type="image/jxl">
  <source src="image.webp" type="image/webp">

   <!-- 最终的兜底计划 -->
  <img src="image.jpg" type="image/jpeg">
</picture> 

上述代码的含意是：

• 第 1 个 source 元素指向新 AVIF 格局的图像。如果浏览器反对 AVIF 图像，那么它会抉择该图像文件。否则，它将挪动到下一个 source 元素。
• 第 2 个 source 元素指向新 JPEG XL 格局的图像。如果浏览器反对 JPEG XL 图像，那么它会抉择该图像文件。否则，它将挪动到下一个 source 元素。
• 第 3 个 source 元素指向一张 WebP 格局的图像。如果浏览器可能渲染 WebP 图像，它将应用该图像文件。
• 否则浏览器将回退到应用 img 元素 src 属性中的图像文件。img 元素指向的是 JPEG 格局的图片，它是最终的兜底计划。

这意味着当初咱们能够在不就义向后兼容性的状况下开始应用新的图像格式。

简而言之，<picture> 元素的作用：

1. 通过 <source> 给出一系列对兼容性有所要求的古代图片格式选项
2. 通过 <img> 给出兜底的高兼容性图片格式选项
3. 浏览器通过对给出的图片格式做个性检测，要决定加载哪个 URL，user agent 查看每个 <source> 的 srcset、media 和 type 属性，来抉择最匹配页面以后布局、显示设施特色等的兼容图像。
4. 最终，所选图像出现在 <img> 元素占据的空间中

总结

总结一下，本文对常见的图片格式以及最新的几种未被大规模兼容的图片格式进行的比照，它们别离是：

• PNG-8/PNG-24
• JPEG
• GIF
• WebP
• JPEG XL
• AVIF

其后，着重介绍了 3 种古代图片格式：WebP、JPEG XL、AVIF。绝对于 JPEG 等传统格局，它们在色调体现、动画反对、是否反对无损有损压缩、压损比率、编解码性能上有着更进一步的晋升，正在成为下一阶段 Web 图像的规范。

最初，介绍了 <picture> 元素，借助它，咱们能更好的实现图片的渐进加强。

当然，本文只是 古代图片性能优化及体验优化指南 的第一篇，后续将给大家带来图片在：

• 如何适配不同的屏幕尺寸及 DPR
• 应用 aspect-ratio 实现图片资源的比例固定及调整
• <img> 图片与背景图片的取舍
• 懒加载 / 异步图像解码计划
• 可拜访性以及图片资源的容错及错误处理

等相干常识的介绍，感兴趣的能够提前关注。

最初

OK，本文到此结束，心愿本文对你有所帮忙 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。