网页图片优化：让页面更快、SEO 更好的 8 个实操手段

图片体积如何影响 LCP 与跳出率

LCP 是最大内容绘制的缩写，衡量首屏最大那块内容完成渲染的时间。在多数页面上，这块内容就是一张图片：文章头图、商品主图、横幅广告。浏览器要等图片字节下载完、解码完才能把它画出来，所以图片体积直接写进了 LCP 的计算里。

影响链条并不复杂。图片越大，需要的带宽越多、下载时间越长；在移动网络下，这段等待会从几百毫秒涨到几秒；用户盯着空白区域或不断跳动的布局，耐心迅速消耗，跳出率随之上升。搜索引擎也越来越重视真实用户体验指标，页面慢会间接拖累排名。反过来看，把图片处理好，往往是不改动代码结构就能拿到的最大一笔性能收益。

压缩图片是性价比最高的一步，但它不是全部。格式、尺寸、加载策略、文本标注，每一环都在影响速度与可发现性。

手段一：先选对格式

格式选错，后面所有优化都会事倍功半。照片用 PNG 是常见错误：同一张实拍图，PNG 往往比 JPEG 大好几倍，画质还没有优势，因为 PNG 的无损特性对连续色调几乎无能为力。反过来，把需要透明或硬边缘线条的图标存成 JPEG，会得到一圈模糊的彩色噪点。

选型顺序可以简化成一句：照片优先 WebP，兼容性有顾虑就退回 JPEG；图形与透明素材优先 WebP 或 SVG，必须无损时用 PNG。用 图片压缩工具 能在压缩的同时完成 JPG、PNG 到 WebP 的转换，省掉一次额外转码。

手段二：压缩到位，而不是象征性压一下

很多站点确实做了压缩，但只是把质量从 100 降到 95，体积几乎没有变化。JPEG 的质量滑杆在 75 到 85 区间通常是最佳平衡点：再往上体积快速膨胀而肉眼难以分辨，再往下则开始出现块状伪影。工具默认给 80 是有道理的，它会读取原图量化表估算原始质量，原图本身就低于 80 时不再继续降质，避免二次损失。

PNG 没有质量可调，只能靠减少颜色数；GIF 同理，靠调色板减色。每一类格式都有自己真正有效的那个参数，把滑杆停在默认值上点到为止，算不上优化。批量处理时建议先拿三五张有代表性的图片试参数，确认观感后再全量跑。

手段三：按展示尺寸出图，不要靠 CSS 缩放

这是最容易被忽略、又最冤的一类浪费。一张 3000 像素宽的原图放进 800 像素宽的容器，浏览器依然要下载和解码完整的 3000 像素版本，多出来的像素全被丢掉。CSS 只能改变显示大小，改变不了下载体积。

正确做法是先确认图片在页面上实际占多宽，再按这个宽度出图。常见做法是取展示宽度乘以 1.5 到 2 倍以照顾高密度屏幕，但不要无脑按原图上传。把 4000 像素的产品图直接塞进列表页，是很多站点体积失控的主因。导出前先缩放、再压缩，顺序不能颠倒，否则等于为大图付了两次代价。

手段四：用 srcset 做响应式图片

同一个页面在不同设备上的展示宽度差异很大：手机可能只需要 400 像素宽的图，桌面可能需要 1200 像素。如果只提供一张大图，手机用户就要为用不到的像素买单。srcset 让浏览器根据设备像素比和视口宽度自行挑选合适的那一张。

写法上，srcset 列出候选项及各自宽度，sizes 告诉浏览器图片在不同断点下的展示宽度。加上 sizes 很关键，只写 srcset 而不写 sizes，浏览器会假定图片始终占满整个视口，可能选到过大的版本。配套的 picture 元素还可以按格式做降级，例如优先给 WebP，不支持时回退 JPEG。

手段五：懒加载与首屏优先

懒加载让首屏之外的图片延后到接近视口时再加载，把带宽优先留给用户真正看到的内容。现代浏览器支持原生 loading 属性，加上 loading 等于 lazy 即可，不需要额外脚本。但要避免一个常见错误：把首屏主图也设成懒加载，那会让它排在脚本之后才开始下载，直接拖慢 LCP。

正确的策略是分层：首屏关键图片用 eager 并加 fetchpriority 提示，让浏览器尽早取；其余图片一律懒加载。同时给图片写上宽高属性或宽高比，避免加载完成后页面跳动。布局偏移同样会伤害体验与评分，懒加载解决的是下载时机，宽高比解决的是稳定性，两者不能互相替代。

手段六：写有意义的文件名

图片文件名是搜索引擎理解图片内容的信号之一。相机导出的 DSC_04821.jpg 或设计稿里的未标题-1.png 不携带任何信息，等于浪费一次说明机会。改成描述性的英文或拼音短横线命名，例如 red-running-shoes-side.jpg，既方便自己日后检索，也对图片搜索友好。

命名要克制：用两到四个词说清主体，不要堆砌关键词，也不要写成一长串。文件名同时出现在 URL 里，过长会影响可读性与分享时的观感。

手段七：写清楚 alt 文本

alt 文本有三个作用：图片加载失败时替代显示、屏幕阅读器朗读给视障用户、帮助搜索引擎理解图片内容。写得好不好，直接影响无障碍体验和图片搜索表现。

判断标准是，如果把图片拿掉，这句话能不能替代它传递信息。装饰性图片用空 alt 让辅助技术跳过；不要在 alt 里堆砌关键词，那既无助于排名也伤害可读性。列表页的商品图，alt 里带上品牌、型号、颜色等比一句图片有用得多。链接里只有图片时，alt 需要说明链接的去向，而不是描述图片本身长什么样。

手段八：精简 EXIF 与元数据

数码照片的 EXIF 里可能带着相机型号、拍摄参数、内嵌缩略图，甚至 GPS 坐标。这些数据对网页展示毫无用处，有时还会泄露拍摄地点这类隐私信息。一张照片的 EXIF 加上内嵌缩略图，占用几十到几百 KB 并不罕见，对手机拍摄的照片尤其明显。

移除元数据几乎总是无损的，画质完全不变。需要注意一点：如果图片是靠 EXIF 方向标记来正确显示的，剥离时要把方向真正应用到像素上，否则竖拍照片会变成横的。用 图片压缩工具 处理时会自动移除 EXIF 与 GPS，省去手工清理的步骤。

发布前检查清单

逐条过一遍，比事后凭感觉判断可靠：

• 格式选对了吗？照片不是 PNG，图标不是 JPEG。
• 质量或颜色数调到位了吗？不是停在默认值上。
• 图片尺寸与展示尺寸匹配吗？没有用 CSS 缩小大图。
• 有 srcset 与 sizes 吗？移动端拿到的不是桌面大图。
• 首屏图是 eager 加高优先级、其余是 lazy 吗？
• 每张图都有宽高或宽高比，不会造成布局偏移吗？
• 文件名是描述性的吗？不是相机默认编号。
• 内容图片都有 alt，装饰图片用空 alt 吗？
• EXIF 与 GPS 元数据清掉了吗？方向是否正确？
• 跑一遍体积体检，首屏总字节是否在可接受范围？

清单之外还要记住一点：压缩图片解决的是每张图有多重，而页面速度还受有多少张图、什么时候加载、服务器怎么传影响。图片再小，如果全部挤在首屏同时请求，同样会拖慢速度。压缩是必要的一环，不是全部。需要更细的分格式参数可以看 图片压缩完整教程，也可以按目标体积反向设定，用 按目标体积压缩 精确控制单张图片的字节数。