如何优化图片以提升网页性能

2026-07-19· 标签: image-optimization, web-performance, core-web-vitals, lcp, page-speed, seo

如何优化图片以提升网页性能

图片占典型网页总下载字节数的 50% 到 60%。每一张未经优化的图片都会让你的加载时间增加数秒、提高跳出率并损害搜索引擎排名。Google 的 Core Web Vitals——尤其是最大内容绘制（LCP）——直接衡量图片加载性能，使图片优化成为你能对网站做出的影响最大的改动之一。

本指南涵盖一套完整的图片优化策略，从压缩基础到高级交付技术。

1. 发布前压缩每一张图片

绝不要直接从相机、手机或设计工具上传原始图片。压缩应该是你发布工作流程的第一步。

关键原则：

照片可以承受激进的有损压缩。从 JPEG 和 WebP 的质量 80 开始，如果文件大小目标需要，再向下调整。
截图、徽标和图形适合无损压缩。PNG 和无损 WebP 能保留有损压缩会模糊的锐利边缘和文字。
AVIF 提供最佳的压缩比，但需要更长的编码时间。它适用于下载频繁但更新很少的图片。
以原始格式压缩，避免不必要的格式转换造成的生成损失。

预期节省：

一个在上传前压缩图片的典型工作流程，可以将总图片重量减少 40% 到 80%，且可感知的画质损失极小。

2. 提供正确的尺寸

在 300 像素宽的容器中提供 4000 像素宽的照片是网页上最常见的性能错误。浏览器会下载全部 4000 像素，然后将其缩小，浪费带宽和内存。

创建多个尺寸变体：

320 到 480 像素宽，用于移动端屏幕
768 到 1024 像素宽，用于平板设备
1200 到 1920 像素宽，用于桌面显示器
2560 像素宽，用于高密度视网膜（Retina）显示屏（2x）

将最大变体匹配到图片在你的布局中显示的最大宽度，高 DPI 屏幕则乘以 2。

3. 使用带 Srcset 的响应式图片

HTML 中的 srcset 和 sizes 属性告诉浏览器根据用户的视口宽度和设备像素比下载哪个尺寸的图片。

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1200.jpg 1200w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="用于无障碍和 SEO 的描述性文字"
/>

仅这一种模式就能在移动设备上减少 40% 到 60% 的图片带宽，而没有任何可见的画质差异。

4. 针对最大内容绘制（LCP）进行优化

LCP 衡量最大可见元素——通常是首屏大图（hero image）——渲染所需的时间。Google 认为 LCP 达到 2.5 秒或更短即为良好。

为图片优化 LCP：

预加载首屏大图，让浏览器尽早发现它。在文档头部添加 <link rel="preload" as="image" href="hero.webp">。
激进地压缩首屏大图——它通常是浏览器下载的第一个也是最大的资源。
为首屏大图提供 WebP 或 AVIF，并以 JPEG 作为后备。
正确设置首屏大图的尺寸。不要在 1200 像素的首屏大图位置上提供 4000 像素的图片。
不要对首屏大图或任何首屏以上的图片使用懒加载。懒加载会延迟下载，从而损害 LCP。

5. 为首屏以下图片启用懒加载

初始屏幕上不可见的图片不需要立即加载。loading="lazy" 属性告诉浏览器推迟图片加载，直到图片接近进入视口。

<img src="gallery-photo.jpg" loading="lazy" alt="Gallery image" />

懒加载可将图片密集页面的初始页面重量减少 30% 到 50%。与压缩相结合，效果是变革性的。

6. 移除图片元数据

EXIF 数据——相机设置、GPS 坐标、时间戳——给每张图片增加不必要的字节。剥离元数据通常可节省 5% 到 15% 的文件大小，且视觉上零变化。将元数据移除作为压缩工作流程中的标准步骤。

7. 使用内容分发网络（CDN）

CDN 将你的图片分发到世界各地的服务器，缩短用户与图片之间的物理距离。这可以改善图片请求的首字节时间（Time to First Byte）。

一些 CDN 还提供即时图片转换：

自动格式协商（在支持时提供 WebP 或 AVIF）
基于设备和视口的动态调整大小
实时压缩调整

如果专用 CDN 不可行，至少使用 HTTP/2 或 HTTP/3，以便在单个连接中下载多张图片。

8. 考虑图片解码性能

大图片不仅需要时间下载，还需要时间解码。浏览器必须在渲染之前解压 JPEG、PNG、WebP 或 AVIF 数据。JPEG 和 WebP 在大多数设备上解码很快，而 AVIF 解码的计算成本更高——这是低端移动设备需要考虑的因素。

在非关键图片上使用 decoding="async" 属性，让浏览器在不阻塞其他内容的情况下解码：

<img src="photo.jpg" decoding="async" loading="lazy" alt="Description" />

构建你的优化工作流程

一个端到端的图片优化流水线如下：

使用质量合适的工具以原始格式压缩图片。
在压缩期间剥离元数据。
调整大小到所需的显示尺寸，创建多个变体。
在 HTML 模板中实现 srcset 和 sizes。
预加载首屏大图，对首屏以下的所有内容使用懒加载。
通过 CDN 提供内容以获得全球性能。
使用 Lighthouse 或 PageSpeed Insights 测量 LCP 和总图片重量。
迭代质量设置，直到达到你的性能预算。

今天就用我们的免费在线图片压缩工具开始优化你的图片。上传 PNG、JPEG、WebP 或 AVIF 格式的图片，下载即可用于生产的压缩版本——无需格式转换，无需牺牲画质。