参考链接

前端9种图片格式基础知识, 你应该知道的

2021 年 Web 应用程序的最佳图像格式

如何为不同格式的图片选合适的应用场景

常用的图片格式和应用场景

格式 优点 不适合/ 缺点 适用场景
gif 文件小，支持动画、透明，无兼容性问题 不适合色彩丰富的图 色彩简单的logo、icon、动图
jpg 色彩丰富，文件小 有损压缩，反复保存图片质量下降明显 色彩丰富的图片/渐变图像
png 无损压缩，支持透明，简单图片尺寸小 不支持动画，色彩丰富的图片尺寸大 logo/icon/透明图、色彩简单的图
webp 文件小，支持有损和无损压缩，支持动画、透明 浏览器兼容性相对而言不好，不适合色彩丰富的图 支持webp格式的app和webview
svg 可随意伸缩，支持 CSS 和 JS 的网络动画，支持透明 不适合摄影图像，尺寸大 用户界面元素

( 没总结明白，先记前面这几个=-= )

光栅图和矢量图

对于图片，一般分光栅图和矢量图。

  • 光栅图：是基于 pixel 像素构成的图像。JPEG、PNG，webp 等都属于此类。
  • 矢量图：使用点，线和多边形等几何形状来构图，具有高分辨率和缩放功能. SVG 就是一种矢量图。

无压缩, 无损压缩, 有损压缩

  • 无压缩。无压缩的图片格式，不对图片数据进行压缩处理，能准确地呈现原图片。BMP 格式就是其中之一。
  • 无损压缩。压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。PNG 是其中的代表。
  • 有损压缩。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是 JPG。

GIF

GIF 是一种索引色模式图片，每帧图所表现的颜色最多为256种。GIF能够支持动画，也能支持背景透明。

优点：

  • 支持动画和透明背景
  • 兼容性好
  • 灰度图像表现佳
  • 支持交错
    部分接收到的文件可以以较低的质量显示。这在网络连接缓慢时特别有用。

缺点：

  • 最多支持 8 位 256 色，色阶过渡糟糕，图片具有颗粒感
  • 支持透明，但不支持半透明，边缘有杂边

适用场景

  • 色彩简单的 logo、icon、线框图适合采用 gif 格式
  • 动画

JPG/JPEG

压缩的时候会有所失真，体积小。

优点

  • 压缩率高
  • 兼容性好
  • 色彩丰富

缺点

  • JPEG不适合用来存储企业Logo、线框类的这种高清图
  • 不支持动画、背景透明

ICO

ICO (Microsoft Windows 图标)文件格式是微软为 Windows 系统的桌面图标设计的。网站可以在网站的根目录中提供一个名为 favicon.ICO, 在收藏夹菜单中显示的图标，以及其他一些有用的标志性网站表示形式。

一个 ICO 文件可以包含多个图标，并以列出每个图标详细信息的目录开始。

其主要用来做网站图标，现在 PNG 也是可以用来做网站图标的。

PNG

PNG（Portable Network Graphics）格式是有三种版本的，分别为PNG-8，PNG-24，PNG-32，所有这些版本都不支持动画的。PNG-8跟GIF类似的属性是相似的，都是索引色模式，而且都支持背景透明。相对比GIF格式好的特点在与背景透明时，图像边缘没有什么噪点，颜色表现更优秀。PNG-24其实就是无损压缩的JPEG。而PNG-32就是在PNG-24的基础上，增加了透明度的支持。

如果没有动画需求推荐使用png-8来替代gif

APNG ：Animated PNG

APNG（Animated Portable Network Graphics），是基于 PNG 格式扩展的一种动画格式，增加了对动画图像的支持，同时加入了 24 位图像和 8 位 Alpha 透明度的支持，这意味着动画将拥有更好的质量，其诞生的目的是为了替代老旧的 GIF 格式，但它目前并没有获得 PNG 组织官方的认可。

相对GIF来说

  • 色彩丰富
  • 支持透明
  • 向下兼容 PNG
  • 支持动画

缺点

  • 生成比较繁琐
  • 未标准化

WebP

有损 WebP 图像平均比视觉上类似压缩级别的 JPEG 图像小25-35% 。无损耗的 WebP 图像通常比 PNG 格式的相同图像小26% 。WebP 还支持动画。

包括体积小、色彩表现足够、支持动画。

优点

  • 同等质量更小
  • 压缩之后质量无明显变化
  • 支持无损图像
  • 支持动画

缺点

  • 兼容性

SVG

SVG 是一种基于 xml 的矢量图形格式，它将图像的内容指定为一组绘图命令，这些命令创建形状、线条、应用颜色、过滤器等等。SVG 文件是理想的图表，图标和其他图像，可以准确地绘制在任何大小。因此，SVG 是现代 Web 设计中用户界面元素的流行选择。

优点

  • 可伸缩性
    可以随心所欲地把它们做大或者做小，而不用牺牲质量
  • 小
    SVG 平均比 GIF、 JPEG、 PNG 小得多，甚至在极高的分辨率下也是如此
  • 支持动画
    更灵活，质量无与伦比
  • 与 DOM 无缝衔接
    SVG 可以直接使用 HTML、 CSS 和 JavaScript (例如动画)来操作

缺点

  • SVG复杂度高会减慢渲染速度
  • 不适合游戏类等高互动动画

base64

图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址，图片随着 HTML 的下载同时下载到本地，不再单独消耗一个http来请求图片。

优点

  • 无额外请求
  • 对于极小或者极简单图片
  • 可像单独图片一样使用，比如背景图片重复使用等
  • 没有跨域问题，无需考虑缓存、文件头或者cookies问题

缺点

  • 相比其他格式，体积会至少大1/3
  • 编码解码有额外消耗

AVIF

优点

  • 支持网页动画。
  • 支持透明。
  • 支持无损压缩。
  • 支持任何图像编解码器。
  • 在全分辨率下支持 10 位和 12 位颜色。

缺点

  • 兼容性

HEIF

优点

  • 与 JPEG 图像相比大小减半，但保留了相同或更好的图像质量。
  • 采用高效视频压缩格式压缩和快速编解码。
  • 支持网页动画。
  • 支持有损和无损压缩。
  • 支持透明度和 16 位颜色。

缺点

  • 兼容性