图片格式指南：PNG、JPG、WebP、SVG — 何时使用哪种

选择错误的图片格式会浪费带宽、减慢页面加载速度并降低视觉质量。每种格式都有特定的优势——照片在一种格式中最好看，Logo 在另一种中最好看，图标又在另一种中最好看。本指南帮助你每次都做出正确的选择。

快速决策图

格式深入解析

JPEG (JPG)

自 1992 年以来的照片标准。使用基于离散余弦变换（DCT）的有损压缩。

最适合：照片、自然场景、具有渐变的复杂图像。 避免用于：文字、Logo、截图、有锐利边缘的图像。

质量甜蜜点：

• 质量 85：大多数照片视觉上无损（最佳默认值）
• 质量 75：网页缩略图的良好平衡
• 质量 95：接近无损，用于印刷或存档

提示：JPEG 不支持透明。如果需要透明背景的照片，使用 WebP 或 PNG。

PNG

无损压缩——每个像素都被精确保留。支持完全的 Alpha 透明。

最适合：截图、UI 元素、彩色背景上的 Logo、任何包含文字的图像。 避免用于：照片（文件会比 JPEG 大 5-10 倍）。

PNG-8 vs PNG-24：

• PNG-8：256 色，更小文件，适合简单图形
• PNG-24：1600 万色，较大文件，照片或渐变需要

WebP

Google 的现代格式，支持有损和无损压缩、透明和动画。

最适合：Web 上的一切——它是最好的通用格式。 避免用于：印刷（软件支持有限）、电子邮件（某些客户端不显示 WebP）。

相比 JPEG 的优势：同等质量下小 25-35%，支持透明。 相比 PNG 的优势：无损图像小 26%，支持有损压缩。 浏览器支持：全球 97%+。

使用我们的 图片优化工具 转换和优化图片。

SVG

基于 XML 的矢量格式。图像由数学形状定义，而非像素。

最适合：Logo、图标、插画、图表、任何需要缩放的图形。 避免用于：照片、复杂的光栅图像。

独特优势：

• 无限缩放而不失真
• 简单图形的文件极小（通常不到 1 KB）
• 可用 CSS 设置样式（改变颜色、添加动画）
• 可访问（SVG 中的文本可搜索且可被屏幕阅读器读取）
• 可在任何文本编辑器中编辑

<!-- SVG 图标：200 字节 vs PNG：5,000 字节 -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  <circle cx="12" cy="12" r="10"/>
  <path d="M12 8v4l3 3"/>
</svg>

AVIF

最新的格式，基于 AV1 视频编解码器。压缩效果优于 WebP。

最适合：首屏大图、产品照片、任何需要最大压缩的高优先级图像。 考虑因素：92% 浏览器支持、编码较慢、编辑工具支持有限。 节省：同等质量下比 JPEG 小 50%。

GIF

最古老的 Web 图片格式（1987）。限制为 256 色。

最适合：简单动画（但 WebP 动画更好）。 避免用于：几乎所有其他用途——WebP 或 APNG 是更好的替代品。 遗留用途：在即时通讯应用和社交媒体中仍广泛用于表情/梗图。

大小比较（相同图像）

一张 1200×800 的照片，针对 Web 优化：

同一图形（Logo，500×200）：

现代最佳实践：Picture 元素

为每个浏览器提供最优格式：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

浏览器选择第一个支持的格式。每个人都能以最小的大小获得最佳质量。

优化工作流程

1. 从最高质量的源文件开始 — 永远不要从之前已压缩的图像优化
2. 选择正确的格式 — 使用上面的决策图
3. 调整到显示尺寸 — 不要在 800px 的容器中提供 4000px 的图像
4. 压缩 — 使用我们的 图片压缩工具 快速优化
5. 提供响应式尺寸 — 使用 srcset 为不同的视口宽度
6. 启用懒加载 — 对首屏以下的图片使用 loading="lazy"

更多优化内容请参阅我们的 图片优化指南。

常见问题

我应该将所有图片转换为 WebP 吗？

对于 Web 交付，是的——WebP 是最好的通用格式，浏览器支持率 97%+。保留原始文件的原始格式（JPEG、PNG）用于存档和编辑，转换为 WebP 用于服务。使用 <picture> 元素为极少数不支持 WebP 的浏览器提供 JPEG 后备。

AVIF 已经可以用于生产了吗？

AVIF 已经可以在生产中使用，浏览器支持率 92%+。主要考虑因素是编码较慢（比 WebP 慢 3-10 倍）和编辑工具支持有限。对于在构建期间一次性编码图像的静态网站，编码速度不是问题。始终提供 WebP 或 JPEG 后备。

相关资源

• 图片优化工具 — 为 Web 压缩图片
• 图片调整大小工具 — 调整到精确尺寸
• Web 图片优化 — 完整优化指南