← 返回博客图片压缩与网页性能实战指南：让 LCP 变绿
2026-08-06
图片是拖慢网页的头号因素，也是最容易优化的部分。本文给出一套可直接落地的图片压缩与性能优化流程：选对格式、设目标大小、批量处理、验证 LCP，让你的页面在 Core Web Vitals 上拿绿。
先选对格式，再谈压缩
- 照片类用 JPEG 或 WebP
- 需要透明时用 PNG 或 WebP
- 图标与线条图用 SVG，体积小且任意缩放清晰
- 动图优先考虑 AVIF 或 WebP
- 同等质量下 WebP 通常比 JPEG 小 25% 到 35%
给每张图片设一个目标大小
- 首屏大图控制在 100KB 以内
- 正文配图控制在 200KB 以内
- 缩略图控制在 30KB 以内
- 整页图片总大小 1MB 以内是稳妥线
三步压缩工作流
- 在工具里直接设定目标 KB，让算法自动寻找最优质量
- 把多张图片一次性拖入批量处理
- 导出后本地预览，确认没有明显画质损失
别忘了尺寸与响应式
- 不要上传 4000px 原图再靠 CSS 缩放
- 用 srcset 为不同屏幕提供多尺寸
- 移动端给更小尺寸的图
用 LCP 验证效果
- LCP 小于 2.5 秒为优秀
- 最大内容元素通常是首屏大图，优先压缩它
- 用 PageSpeed Insights 复核真实字段数据
常见误区
- 只压不缩尺寸，原图 4000px 压完仍偏大
- 把有损质量拉到极致导致明显模糊
- 忽略 WebP 兼容，不给旧浏览器回退 JPEG
- 对同一张图反复压缩，越压越糊
常见问题 FAQ
压缩会丢画质吗？
适度有损几乎看不出，过度才会糊；设目标大小比盲目拉质量滑块更稳。
本地压缩安全吗？
浏览器内本地处理，文件不上传服务器，隐私优先。
WebP 所有浏览器都支持吗？
现代浏览器都支持，旧版 Safari 需准备 JPEG 回退。
批量怎么处理？
用支持批量的工具一次拖入多张，统一设目标大小后导出。