我们总是会忘记缩小图片尺寸，直接应用到项目中。这种图片看上去很正常，但实际上既浪费了用户的流量，也影响了页面性能。
找出不正确尺寸的图片
Lighthouse是首选，执行一下Performance Audit，根据结果可以找到需要调整尺寸的图片列表。
确定正确的图片尺寸
此处提供了2种策略：上策和下策。两者都能提升性能，上策需要多花时间去理解和实施，但带来的体验和性能的提升是非常明显的。下策则是可以很快实施的方案。
稍微了解下CSS的单位
CSS给HTML元素的尺寸定义了两类单位：
- 绝对单位: 在所有设备上展示的尺寸都是固定不变的，如: px等。
- 相对单位: 会有一个参照物，相对于这个来设置的尺寸，如: em，rem，vw，vh等。
下策
根据图片尺寸的单位:
- 相对单位: 调整图片大小至所有设备均可适用，如果是手机网页，一般以iphone6的屏幕大小为准，375的设备宽度，准备图片的时候用750px的宽度。
- 绝对单位: 按图片的实际尺寸来调整，根据使用你的产品的用户高分屏的占比，如果3x的用户比较多，就准备3x图，如果2x比较多，则准备2x图。
上策
根据图片尺寸的单位:
- 相对单位: 使用响应式图片，根据不同的屏幕尺寸，提供不同尺寸的图片，之后的文章会介绍。
- 绝对单位: 使用 srcset 和 sizes 属性，在不同DPI的屏幕上提供不同尺寸的图片，以保证高清度。
调整图片大小
ImageMagick 是首选的CLI工具，对开发而言，这个比GUI的工具效率要高很多。
以下命令可以将图片调整成原始大小的25%:
convert flower.jpg -resize 25% flower_small.jpg
复制代码以下命令可以将图片调整成200*100的固定大小:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
复制代码如果你要同时转换多个图片，可以写一个脚本来执行CLI。
验证效果
每次调整完尺寸，都用Lighthouse来测试，避免遗漏。
总结
偷懒的做法是，所有设备上都采用2x图片，也就是下策，花费时间不多，但这种优化还是会对一些3x的DPI手机屏幕造成略微的模糊，如果是4x的DPI，则会特别模糊。如果有时间的话，还是使用上策来保证对每一个用户都提供最优的性能和体验。
