图片格式怎么选：JPEG、PNG、SVG、GIF、WebP、RAW、TIFF 与 ICO

做设计、写代码或上传网站素材时，经常会遇到两个问题：“这张图应该保存成 PNG 还是 JPEG？”“图片太大，怎样压缩才不会影响阅读？”

选择格式之前，先看图片的内容和用途：它是照片还是线条图，需要透明还是动画，用于网页展示还是后期编辑？同一张图，保存格式和导出参数不同，文件大小与显示效果可能差很多。

一、先看这张选型表

这里的“无损”是指编码能还原输入的像素数据。它不代表图片此前没有被缩放、降色或处理，也不保证文件一定比有损格式大。

二、JPEG：照片体积与画质的折中

JPEG 得名于 Joint Photographic Experts Group。常见的 .jpg、.jpeg 和 .jpe 扩展名通常指向同一家族的图像文件；日常说的 JPEG 多采用标准化于 1992 年的有损编码。

它不是简单把相似颜色合并。常见 JPEG 编码会进行颜色空间转换、可选的色度下采样、分块变换、量化和熵编码，其中量化等步骤会丢失信息。照片具有丰富渐变和纹理，通常能接受这类取舍；细小文字和锐利线条却容易出现模糊或边缘伪影。

JPEG 适合网页照片，但通常不适合保留透明背景。把透明素材转成 JPEG 时，需要指定背景色：白色很常见，也可以选择其他颜色。透明区域并不是格式规定必须变白，具体结果取决于导出软件如何处理 Alpha。

反复编辑并以有损 JPEG 保存可能累积损失。更稳妥的方式是保留原始文件，最后再导出用于发布的 JPEG。

三、PNG：无损像素与透明背景

PNG（Portable Network Graphics）在 1990 年代由社区协作开发，1996 年发布早期规范，重要背景是替代当时涉及专利问题的 GIF 使用场景。它常用于截图、界面素材、透明 Logo，以及需要清晰保留文字和线条的图像。

PNG 不会在正常无损编码过程中丢掉输入像素，但并不是每个 PNG 都具有四个通道。它可以使用灰度、索引色、RGB 或带 Alpha 的形式；支持透明也不意味着文件一定包含透明像素。JPEG 也不能简单理解成“只能有 RGB 三通道”，常见文件会使用其他颜色表示。

对照片而言，PNG 经常比 JPEG 大很多；对纯色、重复区域和简单线条，它可能压缩得很好。视频封面也不必固定选 PNG：封面以照片为主时，JPEG 或 WebP 往往更合适。

四、SVG：图形描述可以重新渲染

SVG（Scalable Vector Graphics）是 W3C 定义的基于 XML 的图形格式，SVG 1.0 于 2001 年成为 W3C 推荐标准。文件可以用路径、形状、文字、填充和变换描述图形。

纯矢量部分会在目标尺寸下重新渲染，所以放大时不会像低分辨率像素图那样直接露出方块。这让 SVG 很适合图标、Logo 和图表。

但“SVG 根本没有像素”过于绝对：SVG 可以嵌入 JPEG、PNG 等位图，也可以包含滤镜。嵌入的照片放大后仍受原始分辨率限制，复杂 SVG 也可能很大，渲染成本不低。

下面是一个可直接保存为 .svg 的简单图标：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" rx="16" fill="#397865"/>
  <path d="M28 52l14 14 30-34" fill="none" stroke="white"
        stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

网页展示时，尺寸和布局同样重要。矢量图清晰不等于要按超宽画布显示，通常应限制到正文宽度。来源不可信的 SVG 上传文件还应做清理或限制，因为 SVG 可以包含主动内容和外部引用。

五、GIF：动画方便，颜色有限

GIF（Graphics Interchange Format）由 CompuServe 于 1987 年推出，Stephen Wilhite 是其重要开发者。它支持多帧播放，也支持透明，但透明通常是“完全透明或完全不透明”，不能像 Alpha 通道那样表达连续的半透明边缘。

GIF 的颜色限制需要说准确：每个调色板最多有 256 个颜色条目，不同帧可以使用不同的局部调色板，因此不能一概说整个动画文件总共只能出现 256 种颜色。将丰富色彩的照片降到有限调色板时，可能产生色带或抖动颗粒。

GIF 对索引数据使用无损压缩，但照片转 GIF 时的降色可能丢失信息。文件大小不仅受帧数影响，也与分辨率、画面变化、调色板和帧间优化有关。

简单循环动画可以使用 GIF；长动画或接近真实视频的内容，通常更适合 WebP 动画或视频。视频往往能用更小体积表达更丰富的画面。

六、WebP：网页图像的多功能选项

Google 于 2010 年推出 WebP。它支持有损、无损、Alpha 透明和动画，因此能覆盖很多过去分别使用 JPEG、PNG 和 GIF 的场景。

现代主流浏览器广泛支持 WebP，但兼容比例会随统计时间变化，旧版软件、邮件客户端和某些上传系统也可能不支持。选择格式时，应看实际目标环境，而不是记住一个固定的百分比。

WebP 经常能在相近视觉质量下减少体积，但不是每张图都一定更小。可以同时导出 JPEG、PNG 或 WebP，对比文件大小、边缘和透明效果后决定。AVIF 也是现代网页可考虑的格式，具体取舍还包括编码时间与兼容性。

七、RAW：保留摄影后期的空间

RAW 不是一个统一的图片格式，而是相机原始数据格式的统称，例如 Canon 的 CR3、Nikon 的 NEF、Sony 的 ARW，以及 Adobe 的 DNG。常见 RAW 保存传感器数据、拍摄元信息和预览图，后续需要软件解码与显影。

相较于已经完成色调、白平衡和压缩的 JPEG，RAW 通常有更大调整空间。但它不保证找回任何过曝细节：如果传感器已经饱和，原始数据里也没有可恢复的信息。

RAW 可以无压缩、无损压缩，也可能使用有损压缩。是否称为 RAW 不由“有没有压缩”决定；相机也可能做一定预处理，不能把 RAW 理解成绝对未经处理的数据。

RAW 用于保存与编辑原片，网页发布通常需要导出为 JPEG、WebP 等格式。

八、TIFF：扫描、印刷和高质量交换

TIFF（Tagged Image File Format）由 Aldus 在 1986 年推出，后由 Adobe 维护相关规范。它是灵活的图像容器，可以保存不同位深、颜色空间、多页数据和不同压缩方式。

TIFF 不是天然无损，也不是一定特别大：可采用无压缩、LZW、Deflate 等无损方式，也可以使用 JPEG 压缩。是否保留细节取决于位深、采样和编码参数。

它常用于扫描、印刷和图像交换。正式档案保存还应遵循机构要求的格式与压缩规范，而不是只看扩展名。TIFF 支持 Alpha 等信息，但跨软件是否能正确读写需要确认；浏览器也通常不把它作为通用网页图片格式。

九、ICO：一个文件，多个图标尺寸

ICO 是 Windows 图标容器，可在同一个文件里保存多个尺寸和色深的图像。系统按显示位置选择合适的版本，例如任务栏、桌面或文件管理器使用的图标大小不同。

常见尺寸包括 16×16、32×32、48×48 和 256×256。传统目录字段可表达的尺寸范围常到 256×256，但容器与嵌入图像的具体支持仍取决于实现，不宜把所有 ICO 的能力简单归结成一个绝对上限。

ICO 可以存储 BMP 风格图标数据，也可以嵌入 PNG。网页 favicon 常见 ICO，但也可以使用 PNG 或 SVG。Windows 程序的图标还常被嵌入 EXE、DLL 等资源中，不一定作为独立 .ico 文件存在。

十、转换与压缩怎么操作

日常单张处理

在 Photoshop、GIMP 等编辑器中打开图片，使用“导出”或“另存为”，选择输出格式。格式转换本质上是重新编码，改后缀不会把 PNG 变成 JPEG。

导出时依次确认：

1. 尺寸：按实际展示需要缩放，避免上传远超显示尺寸的原图；同时考虑高像素密度屏幕。
2. 透明：导出 JPEG 前选择背景色，检查半透明边缘是否出现白边。
3. 质量与体积：照片检查纹理与渐变，截图检查小字和线条，不能只比较文件大小。
4. 颜色与方向：网页常使用 sRGB，并检查导出是否正确处理旋转方向与色彩配置。
5. 保留原件：把网页成品与原始素材分开，避免反复压缩同一份文件。

在线工具

Squoosh 可以比较多种编码器的输出效果和文件体积，适合尝试格式与参数；其图像处理主要在浏览器本地进行。TinyPNG 更侧重图片优化，具体支持的格式和功能以当前产品为准，不应把所有在线压缩工具都理解成任意格式转换器。

处理敏感图片时，确认工具是否上传文件。压缩工具即使保留 PNG 扩展名，也可能通过降色等手段改变像素；“PNG 本身使用无损编码”和“优化过程没有任何损失”是两回事。

网页还可以用 <picture> 提供不同格式，交给浏览器选择：

<picture>
  <source srcset="/images/photo.webp" type="image/webp" />
  <img src="/images/photo.jpg" alt="山间湖泊与树林" width="1200" height="800" />
</picture>

照片优先考虑 JPEG、WebP 或 AVIF；需要清晰文字与透明像素时考虑 PNG 或无损 WebP；图标与简单图形考虑 SVG；摄影原片保留 RAW；印刷和扫描按要求输出 TIFF；应用图标按平台要求生成 ICO。最终选择应由画面内容、体积、兼容性和编辑需求共同决定。

参考资料

• JPEG 官方标准介绍
• W3C PNG 规范
• W3C SVG 规范
• GIF89a 规范
• Google WebP 文档与图库
• Adobe DNG
• Adobe TIFF 6.0 规范
• MDN：图片类型与格式指南