网站图片的最佳格式是什么？

在了解图片类型之前，询问“最佳格式”并不合适。网站会包含几种截然不同的图片，而每种图片都有明确的最佳选择：

• 照片（产品、人物、地点）：使用有损格式。AVIF 文件最小，WebP 是稳妥的现代默认格式，而 JPG 是所有浏览器都能显示的后备格式。
• 徽标、图标和插图：使用 SVG。它是矢量图形，因此在任何屏幕上以任何尺寸显示都很清晰，而且文件通常很小。只有平台拒绝 SVG 时，才改用像素格式。
• 屏幕截图、UI 图形以及任何带透明背景的内容：使用 PNG 或无损 WebP。纯色和锐利边缘正是无损格式擅长压缩的内容。
• 短动画：使用动画 WebP 或 AVIF，而不是 GIF；GIF 的调色板有限，并且生成的文件大得多。
• 网站图标：使用 ICO 文件，最好同时提供 SVG 或 PNG 版本；请参阅如何用图片创建网站图标。

典型错误是将照片保存为 PNG。PNG 会无损保存每个像素，这非常适合徽标，却极不适合照片：文件会膨胀到 JPG 的数倍，却没有任何肉眼可见的提升。

对于照片，选择取决于你能在多大程度上依赖较新的浏览器：

• AVIF 的压缩效果最佳：在典型的网页质量设置下，它比 JPEG 小约 50%，比 WebP 小 20–30%，并可在需要时支持 HDR 和广色域。Chrome、Firefox 和 Safari 都能显示它（Safari 从版本 16.4 开始支持，时间为 2023 年）。代价是编码速度慢，尤其是处理大图片时，而且桌面软件和旧设备对它的支持较少。
• WebP 是务实的默认选择：在视觉质量相同的情况下，它比 JPEG 小 25–35%，支持透明背景，并且自 2020 年以来获得所有主流浏览器支持。一些桌面应用和旧工具仍无法打开它；这会影响你交给设计师的文件，但不会影响提供给访客的文件。
• JPG 是通用的后备格式。它在这三种格式中效率最低，但以 75–82 左右的质量保存的 JPG，在屏幕上通常与原图难以区分，而且网上没有什么环境无法显示它。

最稳妥的设置是向支持 AVIF 的浏览器提供 AVIF，向其余浏览器提供 WebP，并保留 JPG 供更旧的环境使用。如果只想选择一种格式，WebP 配合 JPG 后备格式几乎可以覆盖所有用户。详细对比请参阅 WebP 与 AVIF 对比和 WebP 与 JPG 对比；如果处理的是图形而不是照片，请参阅 PNG 与 JPG 对比。

确定目标格式后，转换过程很快，而且文件绝不会离开你的设备。EditItAll 图像转换器完全在浏览器中运行：

1. 打开转换器并放入图片，可以是一份文件，也可以是整个文件夹中的文件。批量文件会一起处理。
2. 选择输出格式：照片使用 WebP 或 AVIF，需要透明背景的图形使用 PNG。常见任务可直接使用这些转换路径：JPG 转 WebP、PNG 转 WebP、JPG 转 AVIF和 PNG 转 AVIF。
3. 设置质量。这里没有目标大小字段，因为大小是输出结果。每份文件都会显示处理前后的大小，因此可以微调滑块，直到数字和图片效果都令人满意。
4. 逐个下载结果，或将它们打包为一个 ZIP 下载。

不会上传任何内容；页面加载后，即使断开网络也能继续转换；而且每张导出图片中的 EXIF 和 GPS 元数据都会被移除，因此产品照片不会泄露拍摄地点。它可以免费使用，不需要账户，也没有水印。已经采用正确格式，只需要缩小文件？直接使用图像压缩器。如果某个平台坚持要求提供矢量徽标的像素版本，SVG 转 PNG可以按照你选择的任意尺寸进行渲染。

格式选择值得认真对待，但以下三个习惯节省的字节数，比从 JPG 改成 AVIF 还要多：

• 调整为实际显示尺寸。相机照片的宽度通常是页面中显示区域的许多倍，而所有多余像素都会先被下载，再被丢弃。EditItAll 图像工具为此专门提供了可选的最大尺寸限制。
• 从原图开始，只压缩一次。每次有损保存都会丢失更多细节。保留原图，用它导出网页版本，不要按 JPG、WebP、AVIF 的顺序连续重新保存。
• 提供现代格式和后备格式。优先提供 AVIF 或 WebP，并让旧版浏览器回退到 JPG 或 PNG，这样任何访客都不会看到损坏的图片。

如果速度报告要求你“高效编码图片”或“使用新一代格式提供图片”，它所指的正是这项选择：修复高效编码图片警告会逐步讲解具体做法，而为网页压缩 JPEG会详细介绍质量滑块。更多格式指南位于转换图片主题集合中。