网页图片优化清单：8 个动作让页面快一倍

1. 换成 WebP

这是收益最大、动手最快的一步。同一张图、同样观感，WebP 通常比 JPG 小 25%～35%%，比 PNG 小一半以上。现在的浏览器全都支持它。

把手里那些 JPG、PNG 素材转成 WebP 就够了，质量用 80 左右。

2. 按显示尺寸出图，别让浏览器替你缩

新手最容易犯的错：在网页上显示 400 像素宽的图片，却用了一张 4000 像素宽的图。浏览器确实会把它缩小显示，但那 10 倍的像素数据照样下载了、解析了、占用内存了。

正确的做法是：图片实际显示多大，就按 1.5～2 倍出图（照顾高分屏），在转换工具的「最大宽度」里填数字即可。

3. 用响应式图片给不同设备发不同尺寸

手机不需要 2000 像素宽的图。如果网站代码你自己控制，用 srcset 让浏览器自己挑：

<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 800px">

这样手机下载 400 像素的版本，桌面下载 800 的，谁都不浪费流量。

4. 打开懒加载

首屏之外的图片，等用户滚动到附近再加载。一行属性就够：

<img src="photo.webp" loading="lazy">

注意：首屏那张大图（首屏主视觉）不要加懒加载，反而应该优先加载。

5. 给图片加上明确的宽高

在 <img> 上写清楚 width 和 height，浏览器就能提前给图片留好位置。否则图片加载完成时页面会突然跳动，用户正想点的按钮跑掉了——这个体验问题有个名字，叫「布局偏移」。

6. 该用 SVG 的地方就用 SVG

图标、Logo、简单的插画和图表，用 SVG 而不是 PNG：文件常常只有几 KB，还能任意放大而不模糊。用 SVG 转 PNG 只是因为某些软件不认 SVG，网页上直接嵌 SVG 更好。

7. 把图片交给 CDN 或图床

如果服务器带宽有限，把图片放到 CDN 上，用户从离自己最近的节点下载。很多图床还能自动做格式转换和尺寸裁切，参数拼在 URL 里就行。

8. 清掉图片里的元数据

相机拍的照片里带着拍摄时间、设备型号、甚至 GPS 坐标。这些数据对网页展示毫无用处，却实实在在地占着体积，还泄露隐私。用转换工具重新导出一次，元数据就没了。

一个能立刻照做的顺序

1. 把体积最大的 20 张图挑出来。
2. 用转 WebP 工具批量转成 WebP，质量 80。
3. 按实际显示尺寸限制最大宽度（比如 1600 像素）。
4. 加上 loading="lazy" 和宽高属性。
5. 回头对比一下加载时间，通常能省掉一半以上的图片体积。