完整图像格式指南 — 何时使用 PNG、WebP、AVIF 或 JPEG

为什么图像格式的选择很重要

提升网站性能最简单的方法之一就是优化图像。Google PageSpeed Insights 经常会将“以新一代格式提供图片”列为建议 — 这很有道理。你选择的图像格式会直接影响加载时间、Core Web Vitals 得分，并最终影响搜索排名。

核心对比：四种主要格式

JPEG (Joint Photographic Experts Group)

Released: 1992 | Compression: Lossy | Transparency: No

最古老也最通用的格式。JPEG 擅长处理照片和复杂色彩图像。它通过有损压缩丢弃人眼不太容易察觉的细节，从而获得较小的文件体积。代价是：随着质量降低，会出现压缩伪影，而且 JPEG 不支持透明度。

Use JPEG for: 标准照片、社交媒体图片、需要通用兼容性的场景

PNG (Portable Network Graphics)

Released: 1996 | Compression: Lossless | Transparency: Yes

PNG 的无损压缩会保留每一个像素 — 非常适合需要清晰边缘、文字或透明度的图像。代价是文件体积更大。一张 JPEG 照片保存为 PNG 后，通常会大 2–3 倍。

Use PNG for: Logo、UI 截图、包含文字的图片、需要透明背景的图形

WebP

Released: 2010 (Google) | Compression: Lossy + Lossless | Transparency: Yes

WebP 的设计目标是同时取代 JPEG 和 PNG。在相同视觉质量下，它的文件体积比 JPEG 小 25–35%，并且支持透明度 — 结合了两种格式的优点。它还支持动画。

Browser support: 截至 2025 年，全球支持率为 96%+。

Use WebP for: 现代网站上的几乎所有内容 — 照片、图形、带透明度的图像

AVIF (AV1 Image File Format)

Released: 2019 | Compression: Lossy + Lossless | Transparency: Yes

AVIF 的压缩能力比 WebP 更进一步，在相同质量下，文件体积通常比 JPEG 小 50%。它对 HDR (high dynamic range) 内容的处理也优于其他任何格式。代价是编码速度更慢，浏览器兼容性略低。

Browser support: 截至 2025 年，全球支持率约为 92%。

Use AVIF for: 首屏主图、高流量页面中需要最大压缩率的图像、具备构建时图像处理流程的项目

决策框架：应该使用哪种格式？

免费转换方法

在线（无需安装）

• Squoosh (squoosh.app) — Google 自家的工具；可并排比较不同格式
• Convertio — 支持多种格式的批量转换
• remove.bg + download as WebP — 背景移除 + WebP 导出一体化

命令行

# WebP conversion (requires libwebp / cwebp)
cwebp -q 80 photo.jpg -o photo.webp

# AVIF conversion (requires ImageMagick 7+)
magick photo.jpg -quality 60 photo.avif

Next.js（自动处理）

next/image 组件会根据浏览器支持情况自动协商最佳格式：

import Image from 'next/image'
<Image src="/photo.jpg" alt="Auto-optimized" width={800} height={600} />

支持 AVIF 的浏览器会收到 AVIF；支持 WebP 的浏览器会收到 WebP；其他浏览器会收到 JPEG — 全部自动完成。

真实影响：前后对比

一篇典型博客文章包含 5 张内嵌图片，原本保存为 JPEG：

• 图像总大小：2.1 MB
• 转换为 WebP 后（质量 80%）：1.25 MB (−40%)
• 转换为 AVIF 后（质量 70%）：0.85 MB (−60%)
• LCP 改善（实测）：0.8s → 0.4s

结论

不要再默认把所有内容都用 JPEG 和 PNG。到了 2026 年，WebP 已经是 95%+ 网站使用场景的稳妥默认选择。对于高流量页面，AVIF 值得多走一步。今天就开始转换 — 性能和 SEO 收益会立刻体现。