图片

图像格式对照表

文件扩展名	名称	色彩支持	透明度支持	压缩方式	最佳用途
.gif	图像互换格式（Graphics Interchange Format）	每像素 8 位：最多 256 种颜色	1 位透明度：像素仅支持全透明或不透明	无损压缩，文件通常较大	颜色受限的小图形或短动画
.jpg, .jpeg	联合图像专家组图像（Joint Photographic Expert Group image）	每通道 8 位：1600 万种以上颜色	不支持透明	有损压缩，文件较小	彩色照片
.png, .apng	（动画）便携式网络图像（(Animated) Portable Network Graphics）	每通道 8 位：1600 万种以上颜色	支持完整的半透明效果	无损或接近无损压缩，画质较佳	含有文字的图形和设计图
.webp	网络图像格式（Web Picture Format）	每通道 8 位：1600 万种以上颜色	支持完整的半透明效果	有损压缩，文件更小	网络图片，尤其是照片

GIF vs PNG

什么是 GIF ?

GIF（图像互换格式，Graphics Interchange Format） 是一种无损压缩、低分辨率、低帧率的图像格式，诞生于 1987 年。它与所有网页浏览器兼容，易于嵌入各种网站。 该格式支持最多 256 种颜色，不支持半透明（仅支持全透明或不透明）。GIF 文件非常适合用于边缘清晰、线条分明且颜色较少的图像，例如图标、简单动画、表情包等。

什么是 PNG ？

PNG（便携式网络图像，Portable Network Graphics） 是一种基于栅格的高质量文件格式，具备无损压缩和透明度支持的特点。它能够保留图像中的所有细节，并支持高达 1600 万种颜色，因此非常适合用于复杂的视觉图像。PNG 文件几乎可以在所有的图像查看器、网页浏览器和图形工具中打开和查看。

PNG 的主要类型

类型	色彩支持	透明度支持	说明
PNG-8	最多支持 256 种颜色（8 位调色板）	支持 1 位透明度（像素全透明或不透明）	类似于 GIF，适用于颜色较少的简单图像
PNG-24	支持 16.8 百万种颜色（每通道 8 位）	不支持透明度 或仅支持基本 alpha 通道	适合照片或细节丰富的图像
PNG-32	支持 16.8 百万种颜色	支持 完整 alpha 通道（半透明）	最完整的 PNG 类型，适合需要复杂透明效果的图像，如 UI 元素

GIF 和 PNG 有什么区别

GIF 和 PNG 之间的区别在于 PNG 相对于 GIF

1. Alpha 通道： PNG 支持 Alpha 通道，可以实现每个像素不同程度的透明（0 ～ 255），而 GIF 仅支持 1 位透明（全透明或不透明）。这使得 PNG 更适合需要平滑边缘或半透明效果的图像，例如 UI 图标或阴影效果。

2. Gamma 校正：PNG 支持 Gamma 校正，可以在不同平台和设备上保持图像的亮度和对比度一致，提高跨平台显示的一致性。GIF 不支持此功能，可能在不同设备上显示偏暗或偏亮。

3. 渐进式图像渲染： PNG 支持两维交错扫描（7 次扫描），可实现更平滑的图像逐步加载过程，而 GIF 仅支持 4 次扫描。此外，PNG 的压缩效率更高，在相同图像质量下比 GIF 更小，可达 25% 的压缩优势。

尽管 PNG 有一个支持动画的版本（称为 MNG），但由于实际原因，这种格式并未得到广泛使用。不过，PNG 有一个较新的非官方扩展，名为 APNG，它是为动画目的而创建的。

GIF 与 APNG

APNG（Animated PNG，动画 PNG） 可以被视为 GIF 的一种替代方案，因为它们都能实现类似的动画效果。

APNG

APNG（动画便携式网络图像，Animated Portable Network Graphics） 是一种基于栅格图像的格式，属于 PNG 的非官方扩展。

APNG 的主要特点包括：

• 无限帧率：不像 GIF 被限制在较低帧率，APNG 支持任意帧率，动画更加流畅；

• 优秀的压缩性能：比 GIF 拥有更好的压缩比，文件体积更小；

• 流畅的视觉效果：支持 24 位真彩色 + 8 位 alpha 通道，实现更平滑、无锯齿的动画体验。

APNG 使用相同的 .png 扩展名，支持 24 位图像和 8 位透明度，

APNG 不仅比 GIF 看起来更好（GIF 往往呈现像素化和颗粒感），而且文件体积也更小。

GIF vs JPEG

什么是 JPEG ？

JPEG（联合图像专家组格式，Joint Photographic Experts Group） 是一种常用于摄影作品和色彩丰富图像的图像格式。 它是最知名的图像格式之一，并且是数码相机的默认保存格式。

JPEG 非常适合用于社交媒体和网站上的中等质量、写实类图像。

其优势之一是：几乎所有浏览器都支持 JPEG，且所有图像编辑软件都能对其进行编辑。

编辑者可以自由选择压缩比例，范围从 0% 到 100%。大多数图像专业人士通常选择大约 60% 到 70% 的压缩率，因为在这个压缩水平下，图像仍然保持较好的视觉效果。

JPEG 不支持透明度或动画。

GIF 和 JPEG 有什么区别？

GIF 和 JPEG 之间的区别在于： GIF 更适合颜色有限的电脑图形（例如标志、简单的卡通或线条画）， 而 JPEG 更适合照片和色彩丰富的图像，并且在打印时也能保持较好的效果。

GIF vs WEBP

什么是 WebP 文件？

WebP 是一种为网页设计的图像格式，旨在展示高质量且体积小的图片，从而提高加载速度。它支持有损或无损压缩，可以根据需求进行选择。WebP 格式相对较新，诞生于 2010 年，由谷歌旗下公司开发。

WebP 的主要优势是文件体积更小，从而带来更好的用户体验和更快的加载速度。它支持透明度，并且据开发者称，无损压缩的 WebP 文件比 PNG 文件小约 26%。

AVIF

除了 WebP 越来越受欢迎之外，还有另一种现代图像格式，旨在取代 JPEG、PNG 和 GIF。AVIF 基于 AV1 视频格式，压缩效果远优于上述所有格式。这个开源格式于 2019 年发布，支持动画、透明度以及多层图像。

浏览器适配图片

浏览器原生支持检测与降级处理

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="示例图片" />
</picture>

自动适配，浏览器支持优先加载 AVIF，不支持时降级加载其他格式。现代主流浏览器均支持 <picture> 标签。

JavaScript 动态监测并替换

function supportsAvif() {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img.width === 1);
    img.onerror = () => resolve(false);
    img.src = "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWYAAABt..."; // 一个很小的 AVIF 测试图片
  });
}

supportsAvif().then((supported) => {
  if (supported) {
    document.querySelectorAll("img[data-avif]").forEach((img) => {
      img.src = img.dataset.avif;
    });
  }
});

服务器端内容协商（Content Negotiation）

服务器根据请求的 Accept 头信息，判断客户端是否支持 AVIF，如果不支持，则返回其他格式。

Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*;q=0.8