网页图片优化最佳实践：速度、SEO 与体积

一个网页慢不慢，七成看图片。图片过大不仅让用户等得烦躁，还会拖垮 LCP（最大内容绘制） 这个核心 Web 指标，间接影响搜索排名。下面是一份「照着做就能见效」的优化清单。

一、先量再压：别盲猜

打开浏览器开发者工具的 Network / Lighthouse，看首屏图片各自多大、加载多久。通常 单张超过 200KB、首屏合计超过 1MB 就该重点优化。目标：首屏图片总量压到 1MB 以内，关键图（LCP 图）压到 100–200KB。

二、格式选型：能 WebP 就 WebP，能 AVIF 更优

同画质下，WebP 比 JPEG 小 25–35%，AVIF 再小 20–30%。优先顺序：AVIF > WebP > JPEG/PNG。老办法是一份图存多份 + <picture> 标签优雅降级：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="首页主图" width="1920" height="1080">
</picture>

三、按显示尺寸裁切，别传原图

一张 4000px 宽的图放进 1200px 的容器，等于白传 3 倍像素。原则：输出尺寸 ≈ 它在页面上的显示尺寸 × 设备像素比（通常 1–2 倍）。用「限制最长边」把大图缩到 1920 / 1600 / 1280 即可。

四、懒加载与占位

• 原生懒加载：给非首屏 <img loading="lazy">，滚到视口才加载。
• 固定尺寸：写清 width/height 或用 aspect-ratio，防止加载时页面抖动（CLS）。
• 占位：低质量模糊缩略图（LQIP）先占位，体验更顺。

五、CDN 与缓存

把图片放 CDN，开启长缓存（Cache-Control: immutable），并对同一图片提供多分辨率。静态站点可用对象存储 + CDN 边缘缓存，几乎零成本。

六、别忘了 SEO 与可访问性

七、可落地的优化清单

1. 用 Lighthouse 找出超体积图片
2. 原图经本工具批量转 WebP/AVIF，并限制最长边到显示尺寸
3. 关键图压到 100–200KB，其余 ≤ 200KB
4. 页面用 <picture> + loading="lazy" 替换
5. 补 alt、尺寸、语义化文件名
6. 上 CDN + 长缓存，复查 LCP / CLS

把原图拖进 压缩工具 批量转 WebP/AVIF 最快；选型原理看 格式科普，电商尺寸规范看 电商/社媒尺寸。