写在前面

图片消耗了网页流量的50%（中位数），移动端图片消耗了大约900Kb

​ - httparchive.org, 2020.01

图片优化的2个目标

• 保持图片质量的同时，减少不必要的流量（为了更快的加载）
• 没有页面布局抖动（为了更好的体验）

如何做

1. 图片格式

   • 绝大多数情况使用jpg
   • 少数有透明背景要求的情况使用png
   • gif尽量不用，使用短视频替换
   • 尽量使用新格式webp，可以大幅缩小图片体积

2. 响应式

   • img标签使用src-set，sizes适配不同尺寸
   • 多种格式可以使用picture元素，通过source属性指定不同格式图片