HEIC、WebP、AVIF、PNG 和 JPG：如何选择图片格式

先确定副本会在哪里打开：网站、上传表单、聊天软件、图片编辑器、印刷流程或长期归档。目标端支持、透明度和后续编辑需求应先于文件大小考虑。在交付副本确认可用前，不要删除原件。

本篇用同一张受控测试图比较，而不是宣布某个格式永远获胜。透明边缘、平滑渐变、纯色区域、小字和细线能暴露不同取舍；本文体积只代表这张图片与这些设置。

放大图片

透明外围用于观察 JPG 的关键限制；渐变、小字和 1 像素线条用于检查视觉损失。

JPG 适合照片等不透明内容的高兼容交付副本；PNG 适合透明图形、截图、Logo 和需要无损像素细节的内容，但照片型内容可能较大；WebP 支持有损或无损网页交付与透明；AVIF 可用于经过验证的高效现代网页图片；HEIC/HEIF 更适合作为高效拍摄或保存输入，在目标端拒绝时再生成兼容副本。

打开上方图片格式转换器。处理只在当前浏览器内进行。选择本语言 PNG，输出选 WebP，质量设为 82%，最大宽高均保留 0，从而维持原始尺寸和宽高比。

1. 1

   选择源文件副本。

   选择 mvtools-format-sample.png；批量转换前应另行保留原件。

2. 2

   选择 WebP 与质量。

   本例使用 82% 以便复现，不代表所有图片都推荐这个数值。

3. 3

   保持原尺寸。

   两个尺寸输入框均为 0；只有交付确实不需要原像素时才设置最大值。

4. 4

   提交一次并等待。

   浏览器工作线程会在本地处理，并把结果加入转换列表。

放大图片

图 1 · 本次 WebP 转换保留 1200 × 800 尺寸，编码质量设为 82%。

98 KB PNG 转成 30 KB WebP，界面显示体积减小 70%，尺寸仍为 1200 × 800。这是一张带大面积纯色和透明区域的图形；细节丰富的照片可能得到完全不同的体积顺序。

不要只看列表缩略图。下载后用正常显示尺寸和放大视图检查透明边缘、标题和 1 像素线条，再到真正使用的平台测试上传。

放大图片

图 2 · 真实浏览器任务生成 30 KB WebP，比本次源文件小 70%。

• 确认真实应用或服务可以打开、显示并继续处理该文件。
• 分别在浅色与深色背景上检查透明边缘。
• 检查渐变是否断层、小字是否出现光晕或模糊。
• 下载后核对像素尺寸、方向和扩展名。

JPG 无法保存透明像素。本例在质量 86% 下，把 JPG 背景明确设为 #F1F5F9，生成 48 KB 文件，比源图小 51%。白色、深色或品牌色会生成不同像素，文件体积也可能不同。

Logo 或抠图需要适配多种页面背景时不要用 JPG。透明度属于设计的一部分时，应选择 PNG、WebP 或 AVIF。

放大图片

图 3 · JPG 没有 Alpha 透明通道，因此明确用 #F1F5F9 填充透明区域。

HEIF 是容器格式，HEIC 常用于标识由 HEVC 编码的 HEIF 图片。重要相机文件应作为源文件保留；上传表单、编辑器或收件人不接受时，再转换一个副本，并核对方向、颜色、尺寸和依赖元数据的细节。

本地化测试中的 59 KB HEIC 已在浏览器成功解码，并以相同 1200 × 800 尺寸生成 48 KB JPG。这只能证明本样例在本浏览器内成功，不保证所有 HEIC 变体或损坏文件都能解码。

放大图片

图 4 · 59 KB HEIC 在本地解码，并生成 48 KB JPG 副本。

本次重新编码的 PNG 为 126 KB、WebP 为 30 KB、AVIF 为 33 KB、JPG 为 48 KB。重新编码 PNG 反而比已优化的源 PNG 更大，说明“转换格式”不等于“自动压缩”。选择应以画质检查和目标端测试为依据，而不是只看扩展名或体积。

网页使用新格式时，如受众或交付链路需要，应保留可靠回退方案；编辑或归档则应保存价值最高的原始文件，避免反复在有损格式之间转换。

图片格式转换器一次最多接收 20 张 HEIC、HEIF、JPG、PNG、WebP 或 AVIF，单张最多 30 MB、4000 万像素；输出 JPG、PNG、WebP 或 AVIF，调整尺寸时保持宽高比。解码、缩放与转换都在浏览器本地执行，图片不会上传到服务器。

具体格式能否解码或编码仍受浏览器能力影响。如果需要服务器端压缩 JPG、PNG、WebP 或选择移除元数据，可使用另一项“图片压缩器”；它属于临时上传流程，默认 30 分钟清理文件。