性能优化-图片优化

前端性能优化

图片优化

先来看一张JPG图片有损压缩的解析过程

png8/png24/png32之间的区别

png8 —— 256色 + 支持透明
png24 —— 2^24色 + 不支持透明
png32 —— 2^24色 + 支持透明

每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要

• jpg有损压缩，压缩率高，不支持透明
• png支持透明，浏览器兼容好
• webp压缩程度更好，在ios webview有兼容性问题

• svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景

• jpg —— 大部分不需要透明图片的业务场景
• png —— 大部分需要透明图片的业务场景
• webp —— 安卓全部

• svg矢量图 —— 图片样式相对简单的业务场景

进行图片压缩：针对图片真实情况，舍弃一些相对无关紧要的色彩信息

css雪碧图（精灵图）：把你的网站用到的一些图片整合到一张单独的图片中以达到减少网站的http请求数量

image inline：将图片的内容内嵌到html当中以减少http请求数量

使用矢量图： 使用SVG进行适量图的绘制，使用iconfont解决icon问题

在安卓下使用webp： WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一

图片压缩
雪碧图网站