博客图片优化实战：体积减少 60% 的量化对比

TL;DR

通过 Sharp 将图片转为 WebP（80% 质量），单张图片体积平均减少 60%。配合懒加载和尺寸声明，LCP 从 3.2s 降到 1.1s。

优化前

博客使用了 15 张 PNG/JPG 图片，未经优化。

指标	值
图片总大小	12.4MB
平均单张大小	827KB
LCP	3.2s
Lighthouse Performance	62

优化步骤与效果

步骤 1：WebP 转换

用 Sharp 批量转换：

import sharp from 'sharp';
import { readdir } from 'fs/promises';

const files = await readdir('./public/images');
for (const file of files) {
  if (file.endsWith('.png') || file.endsWith('.jpg')) {
    await sharp(`./public/images/${file}`)
      .webp({ quality: 80 })
      .toFile(`./public/images/${file.replace(/\.\w+$/, '.webp')}`);
  }
}

指标	优化前	优化后	提升
图片总大小	12.4MB	4.8MB	-61%
平均单张大小	827KB	320KB	-61%

WebP 在 80% 质量下，肉眼几乎看不出差异。

步骤 2：指定宽高

<!-- 优化前 -->
<img src="cover.webp" alt="封面图">

<!-- 优化后 -->
<img src="cover.webp" width="1200" height="630" alt="封面图">

效果：消除 CLS（Cumulative Layout Shift）从 0.42 降到 0。

步骤 3：懒加载

<img src="cover.webp" width="1200" height="630" alt="封面图" loading="lazy" decoding="async">

首屏图片不加 loading="lazy"，非首屏图片加。

效果：首屏只加载 2 张图片，从 15 张减少到 2 张。

步骤 4：Astro <Image> 组件

Astro 内置的 <Image> 组件自动处理 WebP 转换、尺寸声明和懒加载：

---
import { Image } from 'astro:assets';
import cover from '../images/cover.png';
---
<Image src={cover} alt="封面图" width={1200} height={630} />

最终结果

指标	优化前	优化后	提升
图片总大小	12.4MB	4.8MB	-61%
LCP	3.2s	1.1s	-66%
Lighthouse Performance	62	94	+52%
CLS	0.42	0	-100%

注意事项

• 首屏图片不要懒加载：会导致 LCP 变差
• WebP 兼容性：2026 年主流浏览器全部支持
• 远程图片：Astro <Image> 只能处理本地图片，远程图片需手动优化

延伸阅读

• Astro 图片优化文档
• Sharp 官方文档
• 博客 SEO 基础