测速工具报出来的问题，十个里有七个指向图片。好在图片优化基本不用改代码，是投入产出比最高的一件事。
尺寸先对，再谈压缩
最典型的错误是直接传原图：页面上显示宽度三百像素，却上传了五千像素的相机原片。浏览器会把图缩小显示，但下载的还是原文件，多出来的体积全浪费了。
正确做法是按显示尺寸的两倍准备（适配高清屏），再压缩。显示宽 400 像素，准备 800 像素的图就够了。
格式怎么选
WebP：目前最实用的选择，同画质下体积比 JPEG 小三到五成，主流浏览器都支持。- JPEG：照片类，兼容性最好，体积偏大。
- PNG：需要透明背景时用，拿来存照片体积会爆炸。
- SVG：图标和简单图形，矢量不失真，体积很小。
不用纠结太细：照片统一转成 WebP，图标用 SVG，大部分问题就没了。
alt 不是摆设
alt 有两个作用：图片加载失败时显示，以及给读屏软件和搜索引擎看。写清图片内容，别堆关键词，"产品图 1""图 2"这种等于没写。
缩略图那个坑
很多系统上传时会自动生成多个尺寸，但模板调用时未必用了缩略图，而是直接调原图、靠 CSS 缩放。这在手机端最要命，列表页一次加载二十张大图。
排查方法：手机上打开列表页，看单张图片的实际文件大小，超过 200KB 基本可以确定没走缩略图。
再说懒加载：屏幕外的图延后加载，能明显改善首屏速度。但前几屏的图不要懒加载，否则影响搜索引擎对页面完整性的判断。图片优化的顺序永远是：先砍尺寸，再换格式，最后才是加技术手段。