图片资源在我们的业务中占有非常大的一部分，尤其是对带宽的消耗非常巨大。图片的性能优化和体验优化在今天尤为重要。本文将从多个方面来阐述在当今各种新特性的世界中，我们如何尽可能地优化我们的图片资源的性能和体验。图片类型的选择和Picture标签的使用首先在图片类型方面，除了常见的PNG-8/PNG-24、JPEG、GIF，我们更关注其他几种比较新的图片格式：WebPJPEGXLAVIF首先总之，通过一个表格，快速浏览一下这些图片，我们将从图片类型、透明通道、动画、编解码器性能、压缩算法、颜色支持、内存使用和兼容性方面进行比较：图片类型AlphaChannelAnimationCodecPerformance压缩算法颜色支持内存占用兼容性GIF支持支持更高无损压缩基本相同。ALLJPEG不支持高有损压缩。直接上色基本相同。ALLWebP支持编解码器。编解码器性能差（低端设备更明显）。有损压缩\无损压缩。直接上色基本相同。高版本Chrome\Opera\AndroidJPEGXLsupport支持渐进解码有损压缩\无损压缩直接颜色基本一致部分高版本Chrome\Opera\Firefox\EdgeAVIF支持解码性能一般有损压缩\无损压缩直接颜色基本一致Chrome\Opera\Android\Edge首先，理解上面几个参数的含义：Alpha通道：图片是否支持透明特性当然需要指出的是Alpha不代表透明，不代表透明.opacity和transparency与透明度有关，前者是不透明度，后者是透明度。例如css中的“opacity:0.5”就是设置元素的不透明度为50%。后来，AlvyRaySmith提出给每个像素加上一个Alpha通道，取值从0到1，用来存储这个像素对图像是否有“贡献”，0表示透明，1表示不透明。也就是说，“Alpha通道”存储的是一个值，它的外在表现是“透明”。Alpha与透明度无关。解码和编码。这个非常重要。很多人在处理图像的时候，往往会忽略图像的编解码性能。解码图像主要是从图像文件中读取图像数据，而编码则是将图像数据写入图像文件。解码与编码正好相反。这两者的性能和耗时都会影响到我们页面的显示性能。压缩算法：图片格式是否支持压缩？如果是这样，图像压缩可以分为无损压缩和有损压缩。有损压缩算法是一种数据压缩方法。用这种方法压缩和解压后的数据会和原来的数据不一样。但非常接近。其原理是通过丢弃次要信息数据，牺牲部分质量来减少数据量，提高压缩率。无损压缩是指数据经过压缩后，信息不会丢失，可以完全恢复到压缩前的原始状态。无损压缩通常用于严格要求“压缩和解压后的数据必须与原始数据一致”的场合。颜色支持：分为索引色和直接色。以往为了节省存储空间，并不是所有的图片都能支持所有的颜色值，所以就有了索引颜色的优化方法。索引颜色是一种以有限方式管理数字图像颜色以节省计算机内存和文件存储，同时加快显示刷新和文件传输的技术。即用一个数字来表示（索引）一种颜色。存储图片时，存储一个数字的组合，同时存储数字到图片颜色的映射。以这种方式只能存储有限数量的颜色。常见的索引颜色有1位（即黑白）、8位（即灰度/256色）、16位（即高色）、24位（即真彩）、30位/36/48位（即全彩）。Directcolor用四个数字来表示一种颜色，这四个数字分别代表这种颜色的红、绿、蓝和透明度（即RGBA）。目前流行的显示设备可以支持这四个维度的256种变化，所以直接色可以表示2到32种颜色。Memoryusage：图片的内存资源占用Compatibility：影响图片格式能否大规模普及的核心要素之一WebPvsJPEGXLvsAVIF：传统PNG-8/PNG-24、JPEG、GIF各有或多或少的问题，它们的替代品的竞争近年来愈演愈烈。核心领导者可能是WebP、JPEGXL和AVIF。简单了解一下：WebPWebP最初由Google于2010年9月发布，其特点总结如下：可以提供无损/有损压缩（如JPEG）和透明度（如PNG）的图像文件格式支持动画效果（如GIF)WebP的主要优势在于有损编码。无损编码的性能和压缩比一般。WebP的缺点是它的编解码性能不是特别理想。在兼容性方面，除了IE，基本上所有系列的浏览器都得到了。支持对于复杂的图像（比如照片），WebP无损编码不好，但有损编码很好。WebP和JPEG之间质量相近的图片解码速度和JPEG相差不大，但是文件压缩比可以提高很多。下图是我还在TX的时候做的测试对比：相同张数加载JPEG和WebP耗时对比：对于WebP图片格式，简单总结一下：目前对比WebP和JPEG，根据资料研究，编码速度慢10倍，解码速度慢1.5倍。WebP虽然会增加额外的解码时间，但是由于文件大小大大减小，加载时间缩短，在大页面、图片多的场景下，页面的渲染速度会受到限制。目前，它是WebP、JPEGXL和AVIF中兼容性最高的截至（2023-02-05）的兼容性图表：JPEGXLJPEGXL由联合图像专家组开发（原JPEG标准于2021年由同一组织发布旨在长期替代传统JPEG的组织。一种免版税的开源标准JPEGXL，其创建者希望格式的开放性将吸引Web开发人员采用它，具有.jxl扩展名，JXLcorebitstreamfreezesinJanuary2021,fileFormattobefinalizedinApril2021.:JPEGXL中的X指的是2000年以来的几个JPEG标准的名称：JPEGXT、JPEGXR、JPEGXS，而L代表“长-term'，意思是“长期”。这种格式是为了取代旧的JPEG文件格式而创建的，已经使用了足够长的时间。它的主要特点是：与传统图像格式（如JPEG、GIF和PNG）相比，它具有效率更高，功能更丰富，全面支持广色域和HDR，支持Alpha通道，有损压缩时支持多帧（即动画支持）：同样的视觉质量，比JPEG缩小约60%。无损压缩时：比PNG小约35%（HDR小50%）。支持无损JPEG转码，文件大小减少约20%。渐进式解码，专为响应式加载而设计，支持不同的显示分辨率开源免费：一种免版税格式，具有三条款BSD许可下的开源参考实现技术周刊2021-04-15：2021年最受期待的新技术JPEGXLJPEGXL是目前最有可能完全取代传统图像格式（Gif、PNG、JPEG）的下一代标准。当然，今天，你需要看看它的兼容性：嗯，目前的兼容性有点离谱。Chrome从91版本开始在实验室中支持.jxl格式的图片，需要通过--enable-features=JXL配置启用。遗憾的是，从Chrome110开始，Chrome不再支持JPEGXL。有趣的是，Chrome从版本110开始弃用了对JPEG-XL的支持，谷歌的回答是人们对JPEG-XL没有足够的兴趣，并且它没有提供比现有格式足够的优势。谷歌之前对JPEG的支持本质上是实验性的，他们认为JPEGXL缺乏生态系统支持，并且该格式没有足够的优势（与WebP和AVIF相比）。也就是说，就目前而言，Chrome对WebP和AVIF等替代格式更感兴趣。AVIF最后我们来看一下AVIF格式的图片。AVIF是由开放媒体联盟(AOM)开发并于2019年发布的另一种最新图像格式。该格式基于AV1视频编解码器，源自视频帧。其特点如下：同样，与传统图片格式（如JPEG、GIF、PNG）相比，效率更高，功能更丰富，支持Alpha通道，支持动态图片和动画，支持有损和无损压缩。AVIF文件在低保真有损图像压缩方面表现出色（优于JPEGXL）。压缩后的AVIF图像保留了高画质，避免了恼人的压缩伪影等问题相对而言，AVIF在解码和编码方面不如JPEGXL快，而且不支持渐进式渲染最后看兼容性，目前（2023-02-05)它的兼容性介于WebP和JPEGXL之间。看一下CaniUse的数据：下图是WebPvsJPEGXLvsAVIF在图像解码方面的表现：图片来源：Encode。su--JPEGXLvs.AVIF从图中可以看出，对于解码性能的对比，结果其实是WebP>AVIF>JPEGXL。JPEGXL编解码器并不像它所说的那样强大。图片格式总结总结一下，WebP、AVIF、JPEGXL都是新的图片格式，浏览器并不广泛支持。尽管WebP和AVIF已经存在了很长时间，但兼容性问题仍然影响着它们在今天的大规模使用。他们各有各的特点和优势，谁胜谁负还未可知。虽然AVIF和JPEGXL等新的图像格式并没有被任何浏览器完全支持，但在新版本的Chrome、Firefox和EdgeChromium中，您可以使用配置标志来启用相应的图像格式。有了HTML图片标签，我们还是可以在一定程度上优化我们图片的格式选择。这就引出了我们要谈的第二部分——HTMLPicture标签的使用。使用图片元素HTML5规范添加了图片元素。那么元素为不同的显示/设备场景提供图像版本。浏览器将选择最匹配的子
元素的src属性中的URL。选定的图像然后在
元素占用的空间中呈现。这意味着什么？如何使用
元素，我们想在尽可能支持一些现代图片格式的浏览器上使用我们上面提到的WebP、AVIF、JPEGXL等图片格式，支持的浏览器不支持浏览器回退为常规的JPEG、PNG等，没错，就是渐进增强的思路，怎么办？JavaScript只能编写相应的逻辑，通过JS脚本进行特征查询，动态赋值给
的src。有了
给出高兼容的图片格式选项。为了确定要加载哪个URL，用户代理检查每个
元素占用的空间中。综上所述，本文对常见的图像格式和不兼容的最新图像格式进行了大规模比较。它们是：PNG-8/在PNG-24JPEGGIFWebPJPEGXLAVIF之后，突出了三种现代图像格式：WebP、JPEGXL和AVIF。与JPEG等传统格式相比，它们在色彩表现、动画支持、无损和有损压缩支持、压缩率、编解码性能等方面有了进一步的提升，正在成为下一阶段Web图像的标准。最后引入
图片与背景图片的选择延迟加载/异步图片解码方案的可访问性和图片资源容错与错误处理等相关知识介绍，感兴趣的可以提前关注。最后OK，本文到此结束，希望本文对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。本文参加了SegmentFault思维写作挑战赛，欢迎正在阅读的你加入。
