前端优化之图片优化
一、基础知识
有损压缩——一张JPG图片的解析过程
png位数与格式
- png8 —— 256色 + 支持透明
- png24 —— 2^24色 + 不支持透明
- png32 —— 2^24色 + 支持透明
每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要
- jpg有损压缩，压缩率高，不支持透明
- png支持透明，浏览器兼容好
- webp压缩程度更好，在ios webview有兼容性问题
- svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景
二、压缩方式
0x1 雪碧图
把你的网站上用到的一些图片整合到一张单独的图片中，减少你的网站的HTTP请求数量。
缺点：一次性加载很大的图片，一次加载有点慢。
0x2 Image inline
将图片的内容以base64的形式内嵌到html当中，减少你的网站的HTTP请求数量
0x3 矢量图
使用SVG进行矢量图的绘制
使用iconfont解决icon问题
0x4 webp
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。