图片优化
JPEG/JPG
关键字 有损压缩 , 体积小 , 加载快 , 不支持透明
优点
-
把体积压缩到 50%以下时 仍然可以保持 60%的品质
-
JPG 以 24 位存储单个图, 可以呈现多达 1600 万种颜色 足以满足大多数场景下对色彩的要求
使用场景
- 经常作为
背景图 , 轮播图 banner图即可以保证图片的质量 又不会有体积的问题
缺点
- 处理
矢量图和logo等线条感较强,颜色对比强烈的图像时,人为压缩导致的图片模糊明显 - 不支持透明度处理
PNG-8 和 PNG-24
关键字 无损压缩,质量高,体积大,支持透明
8 和 24 指的是二进制位数 , 8 位的 png 可以支持 256 种颜色 . 24 位的可以支持 1600 万种颜色
优点
- 色彩表现力强, 对线条的处理更加细腻
- 支持透明度处理
使用场景
- 小 logo
- 颜色简单 对比度较强的小兔
- 透明的图
SVG
关键字 文本文件, 体积小,不失真,兼容性好
SVG 是一种基于 XML 愈发的图像格式, SVG 对图像的处理不是基于像素点, 而是基于对图像的形状的描述
优点
- 和 JPG/PNG 相比 SVG 体积更小 可压缩性强 , 由于是矢量图 , SVG 可以无限放大不失真
- SVG 是文本文件. 我们可以想写代码一样定义 SVG. 把他写在 html 里,写成 dom 的一部分. 也可以写成.svg 后缀的文件 , 支持被修改和读取, 灵活性高
缺点
- 渲染成本高, 对性能不利
- 有学习成本(因为是可编程的)
Base64
关键字 文本文件, 依赖编码 , 小图标解决方案
Base64 是一种编码方式 , 用于 8bit 字节码的编码方式, 可以减少 http 请求次数
优点
- 减少请求
缺点
- 体积会膨胀为原文件大小的 4/3
使用场景
- 图片实际尺寸很小
- 图片更新频率低
WebP
关键字 年轻 全能
2010 年被提出 支持有损压缩和无损压缩
优点
- 像 jpeg 一样 对细节丰富的图片信手拈来
- 像 png 一样 支持透明
- 像 gif 一样 支持动图
缺点
- 兼容性
使用场景
- 兼容性 -> caniuse 如果浏览器不支持 需要降级
<img
src="//img.alicdn.com/tps/i4/TB1CKSgIpXXXXccXXXX07tlTXXX-200-200.png_60x60.jpg_.webp"
alt="手机app - 聚划算"
class="app-icon"
/>
- 还有另一个维护性更强、更加灵活的方案——把判断工作交给后端，由服务器根据 HTTP 请求头部的 Accept 字段来决定返回什么格式的图片。当 Accept 字段包含 image/webp 时，就返回 WebP 格式的图片，否则返回原图。这种做法的好处是，当浏览器对 WebP 格式图片的兼容支持发生改变时，我们也不用再去更新自己的兼容判定代码，只需要服务端像往常一样对 Accept 字段进行检查即可。
