图片压缩与网页性能实战指南：让 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