图片该如何选 ？
| 格式 | 简介 | 动画 | 透明度 | 压缩 | 适用场景 | 建议 |
|---|---|---|---|---|---|---|
| bmp | 位图Bitmap 是由微软开发的图像文件格式，主要用于存储位图数据 | 不支持 | 不支持 | 支持无损压缩 | Windows 操作系统中的桌面壁纸或应用程序图标，图像编辑和数字绘图软件。 | 建议不用 |
| jpg/jpeg | Joint Photographic Experts Group 是由联合摄影专家组创建的一种图像编码标准 | 不支持 | 不支持 | 支持有损压缩， | 存储和传输照片和其他复杂的颜色图像，特别是在 Web 和数字摄影中。 | 接受压缩的首选这个,体积小 |
| png | Portable Network Graphics 社区创建 | 不支持 | 支持 | 支持无损压缩 | 存储需要透明度的图像，如图标和 logo，以及需要高质量的图像，如数字艺术。 | 有透明度的静图首选 |
| apng | Animated Portable Network Graphics 社区创建 是png的一种扩展 | 支持 | 支持 | 支持无损压缩 | APNG 格式主要用于创建动画效果，特别是需要透明度的动画。例如，它可以用于创建动态的网页元素、动画图标、游戏精灵等。 | 比gif表现好 |
| gif | Graphics Interchange Format 是一种位图图像格式，由美国的 CompuServe 公司在 1987 年开发 | 支持 | 支持 | 支持无损压缩 | 创建简单的动画和图标，如加载指示器和广告。然而，由于 GIF 只支持 256 种颜色，因此它不适合用于颜色复杂的图像，如照片。此外，虽然 GIF 支持压缩，但由于其颜色限制和压缩算法的效率，GIF 文件通常比其他格式的文件要大。 | 除非没得选 |
| webp | 一种现代图像格式，由 Google 开发 | 支持 | 支持 | 支持无损/有损压缩 | 由于 WebP 格式的高压缩效率和丰富的特性，它广泛用于 Web 和移动应用，可以在保持高质量的同时，大大减小文件大小和加载时间。此外，WebP 也适合用于存储动画和需要透明度的图像。 | 无兼容性的前提，web&移动首选 |
| svg | Scalable Vector Graphics 是一种矢量图像格式，由万维网联盟（W3C）开发 | 支持 | 支持 | SVG 是一种基于 XML 的格式，可以使用文本压缩算法（如 GZIP）进行压缩。 | SVG 图像可以无损地缩放到任何大小，而不会像位图图像那样失去清晰度。因此它特别适合用于创建图标、logo、地图、图表和其他需要缩放的图像。此外，由于 SVG 支持动画和交互，因此它也常用于创建动态的网页元素和复杂的用户界面。 | 缩放的图像,支持动画和交互 |
| avif | AV1 Image File Format 是一种新的图像格式，由联盟开放媒体（Alliance for Open Media）开发,这个联盟由包括 Google、Mozilla、Cisco、Netflix、Amazon 等在内的多家公司组成 | 支持 | 支持 | 使用 AV1 视频编码技术来压缩图像数据, 高质量、高效压缩。 | AVIF 可以用于 Web 网站和移动应用，以提供更快的加载速度和更好的用户体验。AVIF 也可以用于数字摄影和电影制作，以提供高动态范围（HDR）和宽色域的图像。 | 体积小&质量高 比webp还好 一颗新星,兼容性不太好 |
在相同质量下，这些图片格式的体积大小排序可能如下：
BMP > Base64 > PNG > APNG > GIF > JPEG > WebP > AVIF > SVG
需要注意的是，这个排序并不是绝对的，因为图像的体积大小取决于许多因素，包括图像的内容、颜色深度、分辨率、压缩设置等。例如，对于复杂的照片，JPEG 可能比 PNG 更小；而对于简单的图标，PNG 或 SVG 可能比 JPEG 更小。
虽然 AVIF 和 WebP 的压缩效率通常比其他格式更高，但并非所有的浏览器都支持这些新的格式。在使用这些格式时，可能需要提供其他格式的备用图像，以确保兼容性。
扩展
Base64：不是一种图像格式，而是一种编码方法
当我们谈论 "Base64 图像" 时，我们通常是指使用 Base64 编码的图像数据。这些图像数据可以是任何格式的，如 JPEG、PNG、GIF、SVG 等。因此，Base64 图像的特性（如是否支持动画、透明度和压缩）取决于原始的图像格式。
Base64 图像的一个主要应用场景是在网页中内联图像。通过将图像数据直接嵌入到 HTML 或 CSS 中，可以减少 HTTP 请求的数量，从而提高页面加载速度。然而，Base64 编码会增加数据的大小（大约增加 33%），因此它不适合用于大的图像。
另一个应用场景是在不能直接处理二进制数据的环境中存储或传输图像，如在 JSON 中包含图像数据，或在电子邮件中附加图像。
总的来说，Base64 是一种工具，可以用于处理图像数据，但它并不改变图像的本质特性。
IconFont
web领域中除了svg的矢量图 还有一个常见的矢量图形即IconFont，它们以字体的形式提供，可以像文本一样使用和样式化。
这种技术的优点是，字体图标可以无限制地缩放，它们在高分辨率的设备上看起来非常清晰，不会失去清晰度，而且可以使用 CSS 来控制它们的颜色、大小、阴影等样式。
另一个优点是，它们可以被打包成一个文件，从而减少 HTTP 请求的数量，提高页面加载速度。
JPEG&JPG
JPEG 和 JPG 实际上是同一种图像格式的两种不同命名方式。JPEG 是 Joint Photographic Experts Group（联合图像专家组）的缩写，这是开发这种图像格式的组织的名称。JPEG 格式最初在 1992 年发布，用于压缩图像数据。
然而，在早期的 DOS 和 Windows 系统中，文件扩展名的长度被限制为三个字符，因此 ".jpeg" 被缩短为 ".jpg"。尽管现代的操作系统和文件系统已经不再有这个限制，但 ".jpg" 的使用仍然非常普遍。
因此，无论是 ".jpeg" 还是 ".jpg"，它们都表示同一种图像格式。
MNG：(Multiple-image Network Graphics)
这是一种类似于 GIF 的动画图像格式，但支持更多的颜色和更复杂的动画。然而，MNG 的支持非常有限，大多数浏览器都不支持 MNG。
FLIF：(Free Lossless Image Format)
这是一种新的图像格式，支持动画、透明度和无损压缩。然而，目前还没有浏览器支持 FLIF。
