Web 图片优化：完整格式指南

图片约占平均网页总重量的 50%。未优化的图片是导致页面加载缓慢、Core Web Vitals 分数差和用户沮丧的最大因素。好消息是，现代优化技术可以在没有可见质量损失的情况下将图片大小减少 50-80%。

为什么图片优化很重要

Google 将页面速度作为排名因素。2 秒加载的页面跳出率为 9%；5 秒时跳升到 38%。图片通常是最容易实现的性能改善，因为工具和技术已经非常成熟。

影响是可衡量的：

更快的页面加载改善 SEO 排名
减少带宽节省托管成本
更好的移动体验（占 Web 流量的 60%+）
改善 Core Web Vitals（LCP、CLS）

图片格式比较

JPEG (JPG)

最适合照片和多色复杂图像。JPEG 使用有损压缩——以一些质量换取大幅缩小文件。

优点：通用支持、照片压缩优秀、渐进加载
缺点：不支持透明、有损（重新保存会降低质量）
用于：产品照片、首屏大图、背景图
质量设置：75-85% 是 Web 使用的甜蜜点

PNG

最适合需要透明或有锐利边缘的图像，如 Logo 和截图。PNG 使用无损压缩。

优点：支持透明、无损质量、锐利的文字/边缘
缺点：照片文件大、无动画（使用 APNG）
用于：Logo、图标、截图、UI 元素
提示：简单图形使用 PNG-8（256 色），复杂图像使用 PNG-24

WebP

Google 的现代格式，结合了 JPEG 和 PNG 的优点。支持有损和无损压缩及透明。

优点：同等质量下比 JPEG 小 25-35%，支持透明
缺点：非常旧的浏览器不支持（IE11）
用于：一切——它是当今最好的通用 Web 格式
浏览器支持：截至 2024 年全球 97%+

AVIF

最新的竞争者，基于 AV1 视频编解码器。压缩效果甚至优于 WebP。

优点：比 JPEG 小 50%，支持 HDR，质量优秀
缺点：编码较慢，92% 浏览器支持，工具支持有限
用于：需要最大压缩的高优先级图像

SVG

用于需要缩放到任何大小而不失真的图形的矢量格式。

优点：无限缩放、文件极小、可用 CSS/JS 添加动画
缺点：不适合照片
用于：图标、Logo、插画、简单图形

使用我们的图片优化工具压缩和在格式之间转换。

压缩技术

有损压缩

永久删除人眼不太能感知的数据。最适合照片。

关键是找到压缩伪影变得可见的质量阈值。对于大多数 JPEG 图像，质量 80 与质量 100 在视觉上无法区分，但可以小 60-70%。

无损压缩

在不删除任何数据的情况下减小文件大小。解压后的图像与原始图像逐位相同。

OptiPNG 和 pngquant 等工具可以通过更好的压缩算法将 PNG 文件减小 20-50%，不丢失一个像素。

响应式图片

向 400px 视口的手机提供 2000px 的图像是浪费带宽。使用响应式图片提供正确的尺寸：

<img
  srcset="image-400w.webp 400w,
          image-800w.webp 800w,
          image-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  src="image-800w.webp"
  alt="Description"
  loading="lazy"
/>

懒加载

懒加载推迟加载视口之外不可见的图片。现在浏览器原生支持：

<img src="photo.webp" alt="Description" loading="lazy" />

对于首屏图片（首屏大图、Logo），不要使用懒加载——这些应该立即加载以获得最佳 LCP 分数。

图片 CDN 和转换

Cloudinary、imgix 和 Cloudflare Images 等图片 CDN 可以即时优化：

自动格式协商（在支持时提供 WebP/AVIF）
根据设备动态调整大小
质量自动调优
全球边缘缓存

如果你不想使用第三方服务，我们的图片压缩工具让你在上传前在浏览器中本地优化图片。

优化清单

选择正确的格式：大多数使用 WebP，无透明的照片使用 JPEG，需要透明的锐利图形使用 PNG，矢量图使用 SVG
调整到显示尺寸：永远不要提供大于显示尺寸的图片
适当压缩：JPEG/WebP 质量 75-85，PNG 使用无损工具
实现响应式图片：使用 srcset 和 sizes 属性
懒加载首屏以下的图片：使用 loading="lazy"
添加 width 和 height 属性：防止累积布局偏移（CLS）
使用描述性 alt 文本：无障碍和 SEO 双重受益
从 CDN 服务：通过边缘缓存减少延迟

测量结果

使用 Google PageSpeed Insights 或 Lighthouse 测量你的图片优化效果。需要关注的关键指标：

最大内容绘制（LCP）：应低于 2.5 秒
图片总重量：比较优化前后
图片尺寸是否合适：Lighthouse 会标记提供尺寸大于显示尺寸的图片

常见问题

2025 年 Web 最佳图片格式是什么？

WebP 是最好的通用格式，浏览器支持率 97%+。它为照片（有损）和图形（无损）提供了卓越的压缩效果，并支持透明。AVIF 提供更好的压缩，但浏览器支持率略低且编码较慢。

压缩图片时可接受多少质量损失？

对于 Web 使用，大多数图片可以压缩到质量 75-85（满分 100）而没有可见的质量损失。人眼对压缩伪影的容忍度出奇地高，尤其是照片。始终在实际显示尺寸（而非放大）下比较原始图和压缩图。