为网站选择合适的图片格式

先问三个问题

在真实的网站上，每张图片该用什么格式，可以归结为三个问题：

1. 图片显示的是什么？照片适合 JPG、有损 WebP 和 AVIF 等有损格式，因为细小的误差会隐藏在自然的细节中。截图、文字、图表和纯色图形的边缘分明，有损压缩可能在这些边缘周围留下明显的光晕，因此它们适合无损格式（PNG、无损 WebP）；如果原本是用形状绘制的，则适合 SVG。
2. 是否需要透明或动画？JPG 两者都不支持。PNG、WebP 和 AVIF 可以存储完整的 Alpha 通道，呈现柔和的边缘。GIF 的像素要么完全透明，要么完全不透明，因此在彩色背景上，曲线边缘可能出现锯齿或杂边。GIF、WebP、AVIF 和 APNG（动态 PNG）都能保存动画，但一段短视频往往比 GIF 小得多。
3. 图片将发布在哪里？在您自己的 HTML 页面上，可以同时提供多种格式。内容管理系统（CMS）、网店或上传表单则会自行决定接受哪些格式，还可能自行转换文件，因此请查看其最新文档。电子邮件程序之间的差异比浏览器更大，因此邮件简报使用 JPG 和 PNG 更稳妥。

要了解各种格式的工作原理，请参阅JPG、PNG、WebP 与 AVIF 对比。

按内容选择格式：决策表

在您自己的页面上提供 AVIF 或 WebP 时，请保留一个 JPG 或 PNG 版本，供无法显示这些格式的浏览器和应用使用。如果平台只接受一个文件，“备用或替代”一栏中的格式通常是稳妥的选择。Favicon 有自己的一套规则，请参阅Favicon 尺寸、格式与 HTML 标签。

如果要在网页上实现类似 GIF 的循环动画，常见的替代做法是使用带有 autoplay、loop、muted 和 playsinline 属性的静音 <video>，因为浏览器通常允许静音视频自动播放。在电子邮件中，某些桌面版 Outlook 只显示动态 GIF 的第一帧，因此请把关键信息放在这一帧里。

提供 WebP 或 AVIF 并保留备用格式

在可以自己编写 HTML 的页面上，<picture> 元素能让每个浏览器选用它所支持的第一种格式：

<picture>
  <source srcset="/img/pasta-1600.avif" type="image/avif">
  <source srcset="/img/pasta-1600.webp" type="image/webp">
  <img src="/img/pasta-1600.jpg" alt="一碗番茄意面" width="1600" height="1200">
</picture>

浏览器会按顺序读取 <source> 元素，并跳过 type 不受支持的那些。必不可少的 <img> 元素提供替代文本，以及让浏览器预先留出空间的宽度和高度；没有任何 source 匹配时，就显示它的文件。配合 img { max-width: 100%; height: auto; } 这样的 CSS，图片在窄屏上仍会缩小以适应屏幕，并保持原有比例。如果还想提供多种尺寸，请在 srcset 中列出每个文件及其宽度，并添加 sizes 属性，具体做法见调整图片尺寸：像素、宽高比与 DPI。

许多 CMS 和图片 CDN 能自动生成 WebP 或 AVIF 副本，并为每位访问者选择其中一种。如果您使用的服务具备这项功能，请上传高质量的 JPG 或 PNG，交给它来转换，而不要上传已经大幅压缩过的文件，以免图片被压缩两次。

实例：一篇文章中的图片

假设一篇食谱文章有三张图片，正文栏最宽为 760 CSS 像素。

• 首屏照片。手机拍摄的原图为 4032 × 3024 像素，约 1220 万像素。在每个 CSS 像素对应两个设备像素的屏幕上，760 像素宽的正文栏需要约 1,520 像素，因此 1600 × 1200 既能保持 4:3 的比例，又只有 192 万像素，约为原图的 16%。请先调整尺寸，再保存为 AVIF 或 WebP，并附上 JPG 备用版本；全尺寸原图的像素数是 1600 × 1200 版本的六倍多，其中大部分都会被浏览器缩小掉。
• 透明背景的徽标。设计师提供的 PNG 为 1000 × 500 像素，显示宽度为 200 CSS 像素，因此 400 × 200 就能满足每个 CSS 像素对应两个设备像素的屏幕。请保留为 PNG 或 WebP；如果存为 JPG，透明区域会被填充为纯色，放在彩色页眉上就会显示成一个方框。如果设计师能导出 SVG，那就更好了。
• 计时器应用的截图。文字加纯色：请保存为 PNG。JPG 可能在文字周围产生杂点，比起照片中的细小误差，读者更容易注意到这类杂点。

使用 LeedyBox 图片转换工具转换文件

图片转换工具可在您的浏览器中更改一张或多张图片的格式，不会将图片数据上传到 LeedyBox。

1. 点击“选择文件或将文件拖放到这里”，或将 PNG、JPG、WebP、BMP、GIF 或 AVIF 文件拖放到该区域。其他类型（例如 HEIC 或 SVG）以及浏览器无法解码的文件会被拒绝，并显示一条提示信息。
2. 每个文件都有各自的格式菜单（在较宽的屏幕上标有“To:”），初始设置为 JPG。您可以为每个文件分别选择 JPG、PNG、WEBP、BMP、AVIF 或 ICO，也可以在“批量转换选项”中通过“将所有格式设置为...”一次性为所有文件设置。
3. 点击“转换并下载”。单个文件会保存为类似 logo_converted.webp 的文件；多个文件则会打包为 leedybox_converted_images.zip。

• 除 ICO 外，像素尺寸保持不变。请先用图片尺寸调整工具调整尺寸，或使用图片压缩工具中的“同时限制宽度和高度”。
• 对于 JPG、WebP 和 AVIF，转换工具会向浏览器请求质量 0.92（取值范围为 0 到 1），并且没有质量滑块。这一设置更看重细节而非文件大小。这也意味着 WebP 以有损方式保存：没有无损 WebP 选项，因此截图和文字图形请转换为 PNG。如果想要更小的文件，图片压缩工具提供质量滑块（默认为 75）和目标文件大小；请参阅图片压缩设置详解。
• JPG 文件以及该转换工具生成的 BMP 文件都不支持透明，因此透明区域会变成白色。这些 BMP 文件还是未压缩的，每个像素占 3 字节（每行补齐到 4 字节的整数倍），外加 54 字节的文件头：一张 1200 × 800 的图片无论内容如何，都会变成 2,880,054 字节（约 2.9 MB），因此 BMP 不适合用在网页上。
• ICO 文件包含一张 PNG 图片，并保留透明度。任意一边超过 256 像素的图片会按比例缩小到 256 × 256 以内，因此 1000 × 500 的徽标会变成 256 × 128；较小的图片则保持原尺寸。如果需要包含 16、32 和 48 像素尺寸的 favicon.ico，以及 PNG 图标和 Apple 触摸图标，请使用 Favicon 图标生成器。
• 只有当您的浏览器能够生成 AVIF 文件时，才能选择 AVIF，而目前许多浏览器还做不到；否则该选项会显示为“AVIF (此浏览器不支持)”。如果浏览器无法生成所选格式（能否输出 WebP 同样取决于浏览器），会显示一条提示信息且不保存任何文件，而不会把 PNG 数据存成错误的扩展名。转换多个文件时，只要有一个文件出现这种情况，整批转换就会停止，也不会生成 ZIP 文件。
• 每张图片都会重新绘制并重新编码，因此原图的 EXIF 数据、GPS 位置和颜色配置文件不会被保留，动态 GIF、WebP 或 AVIF 会变成只有一帧的静态图片。该转换工具不会生成 SVG、GIF 或动画文件。

常见问题排查

• 透明徽标周围出现白色或黑色方框。它很可能被保存成了 JPG，或不含透明度的 BMP。请改用 PNG 或 WebP；另请参阅为什么 JPG 会丢失透明度。
• PNG 比转换前的 JPG 大得多。PNG 会精确存储每个像素，包括 JPG 的噪点和压缩伪影，而且转换也无法找回 JPG 已经丢失的细节。照片请使用 WebP 或 JPG。
• 上传表单不接受 WebP 或 AVIF。有些表单只接受 JPG 和 PNG。请将照片转换为 JPG，将透明图形转换为 PNG。只修改扩展名并不会改变格式。
• WebP 文件几乎没有变小，甚至变大了。原始 JPG 可能已经过高度压缩，而转换工具使用的质量 0.92 会保留大量细节，其中也包括 JPG 自身的压缩伪影，存储这些伪影同样要占用字节。无论转换成哪种格式，如果文件仍然太大，可能是因为图片还保持着相机拍摄的原始尺寸。请先调整到显示尺寸，再使用图片压缩工具并比较结果。
• 颜色看起来比原图暗淡。转换工具会在浏览器画布（canvas）上绘制每张图片，而画布默认使用 sRGB，转换时也不保留原始的颜色配置文件。采用 Display P3 或 Adobe RGB 等更广色彩空间的照片，可能会失去一部分饱和度最高的颜色，这在广色域屏幕上最为明显。请在照片编辑软件中导出一份 sRGB 副本，先在软件中检查效果，再转换这份副本。
• 手机拍摄的 HEIC 照片无法添加。HEIC 不在转换工具支持的格式之列。许多手机可以将照片导出或分享为 JPG；请转换那份副本。

发布前的检查事项

• 在两种浏览器和一部手机上打开页面。如果使用了 <picture>，还要临时删除 AVIF 和 WebP 的 source，测试备用格式能否正常显示。
• 以实际尺寸比较新文件与原图，重点查看人脸、文字和渐变。
• 在浏览器开发者工具的“网络”（Network）面板中，查看实际下载的是哪个文件以及它的大小。
• 如果网站有深色模式，请在浅色和深色背景上分别查看透明图片。
• 保留原图，并从原图进行转换；重新保存有损文件会在原有误差之上叠加新的误差。

常见问题