性能优化: 图片的相关优化 -- 优化项 : 图片压缩

Posted 2021-07-27 黑木令

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 前端性能优化 相关的内容; 不积跬步，无以至千里, 一时得失莫要在意 。

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

1. 图片压缩: 图片压缩方式

 1. 针对真实图片情况, 舍弃一些相对无关紧要的色彩信息 。
 
 2. css雪碧图:
    1. 把网站中用到的一些图片整合到一张单独的图片上; 减少网站的 http 请求数量 。
    2. 缺点: 合并之后我们这张图片可能会非常大, 如果这张图片没有被正常的加载进来或者加载的非常慢, 就会导致整个页面失去这部分信息 。
    3. 雪碧图主要使用在 PC; Mob 不建议使用 。
    
 3. Image inline 功能:
    1. 将图片的内容使用构建工具内嵌到 html 中 (base64 的格式)。
    2. 减少网站的 http 请求的数量 。
    
 4. 使用矢量图:
    1. 使用 SVG 进行矢量图的绘制; 使用 iconfont 解决 icon 的问题 。
    
 5. 在安卓下使用 webp:
    1. webp 的优势体现在它具有更优秀的 图像数据压缩算法;
    2. 能带来更小的图片体积, 而且拥有肉眼识别无差异的图片质量 。
    3. 同时具备了有损和无损的压缩模式, Alpha 透明以及动画的特性;
    4. 在 JPEG 和 png 上的转化效果都非常 优秀、稳定、统一 。

2. 图片压缩: 使用图片选择

 1. 雪碧图的合并可以根据业务场景进行合并; 也可以对雪碧图进行拆分, 避免雪碧图过大 。
 
 2. 在移动端我们可以对图片进行降级, 根据浏览器以及系统, 判断使用哪种格式的图片,如 jpeg 与 webp 。
 
 3. 移动端使用 inline 的方式比较多 。
 
 4. 矢量图主要还是用在 icon 上面 。
 

如果对你有所帮助，希望大家喜欢点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。