认识达内从这里开始

我们在学习web前端网页优化的时候，除了需要掌握代码优化以外，对于图片性能优化也是需要重点掌握的一个技术，下面我们就通过案例分析来简单了解一下，图片优化参数入门。

Alpha通道：图片是否支持透明的特性

当然，需要指出的是，Alpha没有透明度的意思，不代表透明度。opacity和transparency才和透明度有关，前者是不透明度，后者是透明度。比如css中的「opacity:0.5」就是设定元素有50%的不透明度。后来AlvyRaySmith提出每个像素再增加一个Alpha通道，取值为0到1，用来储存这个像素是否对图片有「贡献」，0代表透明、1代表不透明。也就是说，「Alpha通道」储存一个值，其外在表现是「透明度」，Alpha和透明度没啥关系

动画：很好理解，图片是否支持多帧率动态图片，类似于GIF

编解码性能：图像的解码与编码。这个很关键，很多人对待图片容易忽视图片的编解码性能，解码图像主要从图像文件中读出图像数据，而编码则是将图像数据写入图像文件。解码与编码的过程正好相反。而这两者的性能耗时会影响我们页面的的展示性能。

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

有损压缩算法是一种数据压缩方法，经过此方法压缩、解压的数据会与原始数据不同但是非常接近。原理是借由将次要的信息数据舍弃，牺牲一些质量来减少数据量、提高压缩比

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

颜色支持：会分为索引色与直接色，在过去，为了节省存储空间，并非所有图片都能支持所有颜色值，因此存在索引色这种优化方式。

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

直接色使用四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度(即RGBA)。现在流行的显示设备可以在这四个维度分别支持256种变化，所以直接色可以表示2的32次方种颜色。

内存占用：图片对内存资源的占用

兼容性：影响图片格式能否大规模推广的核心要素之一

WebPvsJPEGXLvsAVIF:JPEG替代之战

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

再简单了解了解它们：

WebP

WebP初由Google在2010年9月发布，其特性总结如下：

可以同时提供无损/有损压缩(像JPEG一样)和支持透明度(像PNG一样)的图片文件格式

支持动画效果(像GIF一样)

WebP主要优势在于有损编码，其无损编码的性能和压缩比表现一般

WebP的缺点在于其编解码性能不是特别理想

在兼容性方面，除了IE，基本已经得到了全系列浏览器支持

对于复杂的图像(比如照片)来说，WebP无损编码表现并不好，但有损编码表现却非常棒。相近质量的图片解码速度WebP相距JPEG也已经相差不大了，而文件压缩比却能提升不少。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加抖音太原达内IT培训学习了解。