不喜欢广告？ 去 无广告 今天
选择错误的图像格式是性能杀手之一。PNG代替应使用JPEG的图像会将页面重量增加3到5倍。在2025年，当WebP能以30%更小的尺寸完成相同工作时，仍提供JPEG是浪费带宽。这些决策并不复杂——你只需要一张清晰的地图。
以下是每种格式的工作原理、使用时机，以及如何使用一个 图像格式转换器 或命令行工具。
JPEG
JPEG自1990年代以来一直是照片的默认格式，至今仍保持这一地位。它采用有损压缩：编码过程中会丢弃部分图像数据，但在75到85的质量设置下，人眼无法察觉差异。JPEG不支持透明度。
最佳用途： 照片、产品图片、具有复杂渐变的插图，以及任何不需要透明度的摄影内容。
避免使用的情况： 需要透明背景，或图像包含文字和锐利边缘，压缩伪影会变得明显。
巴布亚新几内亚
PNG采用无损压缩——每个像素都精确保留。它支持完整的Alpha通道，因此是需要透明度的场景的首选：标志、UI截图、图标、叠加层以及包含文字的图像。
代价是文件大小。对于摄影内容，PNG通常比等效的JPEG大2到5倍。最常见的错误是将照片保存为PNG，因为“看起来更好”。实际上它并没有更好——只是尚未被压缩。如果照片不需要透明度，PNG是错误的格式。
最佳用途： 截图、UI资源、标志、图标、需要透明度的任何图像。
避免使用的情况： 为不需要透明度的照片提供服务。
WebP
WebP由谷歌于2010年推出，目前已获得近乎普遍的浏览器支持（2025年达到97%以上）。它支持有损和无损压缩、完整透明度以及动画——本质上是将JPEG和PNG功能整合到单一格式中。
在等效视觉质量下，压缩效率比JPEG高约25到35%。在无损使用场景中，WebP文件通常比PNG更小。在现代网站中，已无实际理由避免使用WebP。
最佳用途： JPEG和PNG的通用替代方案。照片、UI资源，以及过去默认使用旧格式的任何场景。
AVIF
AVIF源自AV1视频编码器，是主流网络图像格式中压缩效果最好的——通常在同等视觉质量下比WebP小20到50%。它支持HDR色彩、广色域和Alpha通道透明度。
全球浏览器支持率约为93%。主要障碍是编码速度：AVIF编码速度显著慢于WebP，尽管工具正在迅速改进。对于大多数生产工作流程，你将在离线环境中生成AVIF并静态提供——编码时间不会影响页面加载速度。
最佳用途： 高质量照片、英雄图像，以及压缩优势大于离线编码时间的场景。
GIF、SVG和其他格式
动态图片 已基本过时。其256色限制和较差的压缩使其在动画中表现平庸，对照片毫无用处。WebP动画、CSS动画，以及 <video> 所有格式在更小尺寸下能提供更好的效果。新项目中请避免使用GIF。
SVG 不是位图格式——它是XML标记，描述矢量形状。适用于图标、标志和需要在任何尺寸下清晰缩放的线条插图。它不适用于照片或写实图像。
格式对比一览
| 格式 | 有损 | 透明度 | 浏览器支持 | 最适合 | 文件大小与JPEG对比 |
|---|---|---|---|---|---|
| JPEG | 是的 | 不 | 100% | 照片、渐变 | 基准 |
| 巴布亚新几内亚 | 不 | 是的 | 100% | 截图、UI、图标 | 大2到5倍 |
| WebP | 两者相同 | 是的 | 97%+ | 通用的现代替代方案 | 约小30% |
| AVIF | 两者相同 | 是的 | 93%+ | 高质量照片 | 约小45% |
| 动态图片 | 不 | 是（1位） | 100% | 仅用于遗留动画 | 避免 |
| SVG | 不适用 | 是的 | 100% | 图标、徽标、插图 | 不适用 |
如何在不同格式间转换
无需安装的最快方式是使用 IO Tools 图像转换器 支持JPEG、PNG、WebP、AVIF、GIF等格式——上传文件，选择输出格式，下载。它在浏览器中完全运行，支持客户端支持的格式，而对AVIF则使用服务器端处理。
对于批量处理或构建流程， ffmpeg 和ImageMagick是标准工具：
# Convert to WebP (ffmpeg)
ffmpeg -i input.jpg -quality 85 output.webp
# Convert to AVIF (ffmpeg)
ffmpeg -i input.jpg -c:v libaom-av1 -crf 30 output.avif
# Convert to WebP (ImageMagick)
convert input.png -quality 85 output.webp
# Batch convert all JPEGs to WebP
for f in *.jpg; do convert "$f" -quality 85 "${f%.jpg}.webp"; done转换后，可以使用 IO Tools 图像压缩器 进一步减小文件大小——在部署前无需额外转换即可节省额外字节。
使用现代格式并提供回退
这 <picture> 元素可将AVIF和WebP提供给支持的浏览器，同时在旧浏览器中回退到JPEG。浏览器会选择它支持的第一个 <source> 格式：
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>这在支持的场景中提供最大压缩，同时保持兼容性。AVIF用于支持的浏览器，WebP作为次选，JPEG作为保证回退。由 <img> 标签提供给搜索引擎索引和屏幕阅读器读取——请相应填写 alt 文本内容。
决策一览
- 无透明度的照片 → WebP（或在优化严格时使用AVIF + WebP回退）
- 透明背景 → WebP（若需最大兼容性则使用PNG）
- 标志、图标、插图 → SVG
- UI截图或示意图 → PNG
- 最大浏览器兼容性 → JPEG + PNG
- 最大性能 → AVIF + WebP回退通过
<picture>
简短答案：照片和UI资源默认使用WebP，矢量内容使用SVG。在性能关键时添加AVIF。只有在有特定原因时才使用JPEG和PNG，而不是作为默认选择。 <source> 当性能至关重要时。应优先选择JPEG和PNG，只有在有特定原因时才应选择它们，而不是作为默认选项。
