图片优化与网页性能——开发者指南

为什么图片优化对网站很重要

图片是大多数网页上最重的资源。如今平均网页加载超过 1 MB 的图片。 未优化的图片会拖慢页面加载速度，损害搜索引擎排名（Google 将页面速度 作为排名信号），增加托管带宽成本，并赶走访客——研究一致表明，访客会 放弃加载超过 3 秒的页面。

图片优化是在不明显降低质量的前提下减小图片文件大小的过程。做得好的话， 你可以将图片大小减少 60-80%，同时保持在正常观看距离下与原图难以 区分的视觉质量。

图片优化的三大支柱

1. 选择正确的格式

你选择的格式对文件大小影响最大：

• JPEG / JPG：最适合照片和色彩渐变平滑的图片。有损 压缩，不支持透明度。通用的兜底格式。
• PNG：最适合截图、Logo、图标和包含文字或锐利边缘的图片。 无损压缩，支持透明度。照片的文件比 JPEG 大。
• WebP：网页的现代默认选择。在同等质量下比 JPEG 小 25-35%，支持透明度和动画。所有现代浏览器支持。推荐将 WebP 作为主要 格式，JPEG 作为备选。
• AVIF：最前沿——比 JPEG 小 50%。浏览器支持正在增长 但尚未普及。如果你的受众主要使用 Chrome、Firefox 或 Safari 16+， 可以使用。
• SVG：用于图标、Logo 和简单插图。矢量格式可无限缩放， 通常只有几 KB。

更详细的比较见 WebP vs PNG vs JPG 对比指南。

2. 调整到实际显示尺寸

这是影响最大的优化，也是最常被遗漏的。如果你的网页以 800 × 600 像素显示图片，没有理由提供 4000 × 3000 像素的原图。浏览器会 下载完整的 4000 像素图片，然后丢弃 96% 的像素以 800 像素显示。

规则：为 Retina/HiDPI 屏幕提供显示尺寸 2 倍的图片。如果 CSS 宽度是 400px，提供 800px 宽的图片，而不是 4000px。

• 首屏大图：通常 1200-1600px 宽（在标准布局中显示 为 600-800px）
• 缩略图：根据显示尺寸 300-600px 宽
• 博客内容图片：全宽 1200-1400px，行内图片 800px

3. 积极压缩

选择正确的格式和尺寸后，应用压缩。目标是找到文件大小显著下降但视觉 质量仍可接受的质量水平：

• JPEG：质量 75-85% 是网页的最佳区间。低于 70%，近距离 检查会看到伪影。高于 90%，文件大小急剧增加但视觉改善微乎其微。
• WebP：质量 75-80% 等效于 JPEG 85%。
• PNG：使用最大压缩（无损，质量始终完美）。pngquant 等工具应用有损 PNG 压缩，减少调色板同时保持视觉质量。

使用 FileKit 的图片压缩工具 直接在浏览器中压缩图片，无需上传到任何服务器。

响应式图片：为每个设备提供正确尺寸

现代 HTML 提供 srcset 属性，为不同屏幕宽度提供不同 尺寸的图片：

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="图片描述"
  width="800"
  height="600"
  loading="lazy"
/>

浏览器选择适合当前视口和屏幕密度的最小图片。慢速网络上的手机下载 400px 版本；4K 显示器的桌面下载 1200px 版本。

懒加载：只加载用户看到的

loading="lazy" 属性告诉浏览器延迟加载图片， 直到它们即将滚动进入视口。对于有 20 张图片的页面，浏览器最初只加载 可见的 2-3 张，其余的随用户滚动而加载。

重要例外：首屏大图和任何首屏以上的图片应使用 loading="eager"（默认值）配合 fetchpriority="high"，确保尽快加载。

累积布局偏移：缺少尺寸的隐藏代价

当浏览器遇到没有 width 和 height 属性的 <img> 标签时， 不知道要预留多少空间。图片加载后，下方的内容向下跳动——这就是累积布局 偏移（CLS），Google 会惩罚 CLS 分数高的页面。

解决方法很简单：始终在每个图片元素上包含 width 和 height 属性。CSS 可以覆盖显示尺寸，但属性中的宽高比 让浏览器在图片加载前预留正确的空间。

现代图片分发：<picture> 元素

为了最大化优化，使用 <picture> 元素为支持的浏览器 提供 AVIF，WebP 作为主要格式，JPEG 作为通用备选：

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="描述" width="800" height="600" loading="lazy" />
</picture>

优化检查清单

• 所有图片使用 WebP（JPEG 备选）或 AVIF（如支持）
• 图片尺寸为显示尺寸的 2 倍，不是原始相机分辨率
• JPEG 质量 75-85%，而不是 95-100%
• 每个 <img> 有明确的 width 和 height
• 首屏以下图片使用 loading="lazy"
• 首屏大图使用 fetchpriority="high"
• 响应式图片使用 srcset 和 sizes
• 图标和 Logo 使用 SVG 而非位图
• 没有图片以原始相机分辨率（3000-6000px）提供

图片优化工具

• FileKit 图片压缩工具 — 浏览器端，无需上传，支持 JPEG/PNG/WebP
• FileKit 图片格式转换工具 — 格式间转换（PNG → WebP、JPEG → WebP）
• Squoosh — Google 的浏览器端工具，支持并排质量比较
• Sharp (Node.js) — 用于构建管道的程序化图片处理
• ImageMagick — 命令行批量处理

衡量优化效果

优化后，使用以下工具衡量改善：

• Google PageSpeed Insights — 为页面评分并专门标记 过大的图片
• Chrome DevTools 网络面板 — 显示每张图片的传输大小 和加载时间
• WebPageTest — 瀑布图显示图片加载顺序和对总页面 重量的影响
• Lighthouse — 估算正确尺寸和下一代格式图片的节省量

优化良好的页面，普通内容页的图片总重量应低于 500 KB，图片密集的 画廊页低于 1 MB。