写在前面
图片消耗了网页流量的50%（中位数），移动端图片消耗了大约900Kb
- httparchive.org, 2020.01
图片优化的2个目标：
- 保持图片质量的同时，减少不必要的流量（为了更快的加载）
- 没有页面布局抖动（为了更好的体验）
如何做：
-
图片格式
- 绝大多数情况使用jpg
- 少数有透明背景要求的情况使用png
- gif尽量不用，使用短视频替换
- 尽量使用新格式webp，可以大幅缩小图片体积
-
响应式
- img标签使用src-set，sizes适配不同尺寸
- 多种格式可以使用picture元素，通过source属性指定不同格式图片
