图片多的网站加载优化：懒加载与 WebP

页面慢，十有八九慢在图片上。一个商品列表页几十张原图直出，首屏拖到十几秒不稀奇。懒加载加 WebP，是成本最低、见效最快的组合。 ## 一、懒加载：看得见才加载 原理是视口（浏览器可视区域）外的图片先不发请求，滚动到附近再加载。现代浏览器原生支持，img 标签加一个属性即可： ``` ``` width 和 height 必须写，否则图片加载时页面会上下跳动，浏览体验反而变差。首屏大图不要加 lazy，它们本来就是最先要显示的内容，加了反而拖慢首屏。老浏览器不认识这个属性会直接忽略，按普通图片加载，不需要额外兼容代码。列表页和详情页都适合懒加载，轮播图按是否在首屏区别对待。首屏的关键图可以配合预加载，把最重要的那张提前拉下来。 ## 二、WebP：体积先砍一部分 WebP 是专为 Web 设计的图片格式，同等画质下通常比 JPEG 小四分之一到一半。存量图片批量转换： ``` for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done ``` cwebp 是 libwebp 工具集里的转换命令，Ubuntu 下 apt install webp 就有。质量参数 75 到 85 是体积和画质的平衡区间，转换后抽几张放大看细节再定。人像和渐变色区域是 WebP 最容易失真的地方，抽查时重点看这两类，发现问题就把 q 值提到 85 再试。 ## 三、格式兜底怎么写 老浏览器不支持 WebP，用 picture 标签自动降级： ``` ``` 支持的浏览器取 webp，不支持的自动落到 jpg，一段代码两头兼顾。 ## 四、配套两件事别省 图片体积优化到头了，还有两项基本动作：缩略图按实际显示尺寸生成，别用原图靠 CSS 缩小；图片多的站点把带宽和磁盘余量留足，否则优化省下的流量又从别处漏回去。两项落地之后补上 HTTP 缓存头，回头客的二次访问会明显变快。移动端流量占大头时，再按设备宽度多出几档尺寸，收益比格式转换还明显。上线前后用浏览器开发者工具的 Network 面板对比一次加载体积，数据比感觉可靠。