bmp

无损的、既支持索引色也支持直接色的、点阵图
压缩 lossy or lossless algorithms

gif

无损的、采用8bit索引色的、点阵图
彩要求不高同时需要文件体积较小
支持动画以及透明
压缩 Lossless (LZW)

jpg

有损的、采用直接色的、点阵图
存储照片
压缩 Lossy; based on the discrete cosine transform

png

png-8
- 无损的、使用索引色的、点阵图
- 支持透明
- 体积相对较小
png-24

无损的、使用直接色的、点阵图
压缩 Lossless, optionally indexed color like GIF

svg

无损的、矢量图
企业Logo、Icon
压缩 HTTP compression techniques, or on disk as an .svgz file

webp

支持有损和无损压缩的、使用直接色的、点阵图
支持图片透明
压缩 8-bit Y'CbCr 4:2:0 (YUV420)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webp</title>
    <script>
      const check_webp_feature1 = function (callback) {
        let img = new Image();
        img.onload = function () {
          let result = img.width > 0 && img.height > 0;
          callback(result);
        };
        img.onerror = function () {
          callback(false);
        };
        img.src =
          "data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA";
      };
      check_webp_feature1(console.log);
      const check_webp_feature2 = function () {
        try {
          return (
            document
              .createElement("canvas")
              .toDataURL("image/webp")
              .indexOf("data:image/webp") == 0
          );
        } catch (err) {
          return false;
        }
      };
      check_webp_feature1((isWebP) => {
        let img = new Image();
        img.className = isWebP ? "webppic-src" : "pic-src";
      });
    </script>
  </head>
  <body></body>
</html>

apng

支持动画

avif

AV1的关键帧中提取

免版税
透明度
压缩率

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>avif</title>
  </head>
  <body>
    <picture>
      <source type="image/avif" srcset="snow.avif" />
      <img alt="Hut in the snow" src="snow.jpg"
    /></picture>
  </body>
</html>

ico

favicon

tiff

照片

压缩

有损

损失了一部分图片的信息

无损

图片的质量没有任何损耗

色彩

索引色

用一个数字来代表（索引）一种颜色
256 种颜色

直接色

四个数字来代表一种颜色，这四个数字分别代表这个颜色中红色、绿色、蓝色以及透明度
可以表示 2 的 32 次方种颜色

CSS系列 - 图片

bmp

gif

jpg

png

svg

webp

apng

avif

ico

tiff

压缩

有损

无损

色彩

索引色

直接色

绘图

点阵图

矢量图