彩色深度

彩色深度标准通常有以下几种：

  • 8 位色，每个像素所能显示的彩色数为 2 的 8 次方，即 256 种颜色。
  • 16 位增强色，16 位彩色，每个像素所能显示的彩色数为 2 的 16 次方，即 65536 种颜色。
  • 24 位真彩色，每个像素所能显示的彩色数为 24 位，即 2 的 24 次方，约 1680 万种颜色。

  • 32 位真彩色，即在 24 位真彩色图像的基础上再增加一个表示图像透明度信息的 Alpha 通道。
    32 位真彩色并非是 2 的 32 次方的色数，它其实也是 1677 万多色，不过它增加了 256 阶颜色的灰度,为了方便称呼，就规定它为 32 位色

    图的分类方式

    光栅图和矢量图

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

  • 光栅图：是基于 pixel 像素构成的图像。JPEG、PNG，webp等都属于此类

  • 矢量图：使用点，线和多边形等几何形状来构图，具有高分辨率和缩放功能. SVG就是一种矢量图。

    无压缩、无损压缩、有损压缩

  • 无压缩。

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

《jpg图片的压缩原理是什么？》

前端 9 种图片格式

  1. ico: 1985年
  2. GIF - 1987
  3. Base64- 1987
  4. JPEG - 1992
  5. PNG - 1996
  6. SVG - 1999
  7. JPEG2000 - 1997 to 2000
  8. APNG - 2004
  9. WebP - 2010

ico

ICO (Microsoft Windows 图标) 文件格式是微软为 Windows 系统的桌面图标设计的。
网站可以在网站的根目录中提供一个名为 favicon.ico, 在收藏夹菜单中显示的图标，以及其他一些有用的标志性网站表示形式。
一个 ICO 文件可以包含多个图标，并以列出每个图标详细信息的目录开始。
其主要用来做网站图标，现在 png 也是可以用来做网站图标的。

GIF

GIF 是一种索引色模式图片，所以GIF每帧图所表现的颜色最多为 256 种。
GIF 能够支持动画，也能支持背景透明，这点连古老的IE6都支持，所以在以前想要在项目中使用背景透明图片，其中一种方案就是生成 GIF 图片。
优点：

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

缺点

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

    适用场景

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

JPG/JPEG

平常我们大部分见到的静态图基本都是这种图片格式。这种格式的图片能比较好的表现各种色彩，主要在压缩的时候会有所失真，也正因为如此，造就了这种图片格式体积的轻量。

优点

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

缺点

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

JPG 和 JPEG 有什么区别：名字有区别而已 早期的 DOS 系统时代的“8.3文件名命名原则”(文件名不能超过8个字符或4个汉字)， 而扩展名不能超过 3 个字符，中间用小数点“.”分隔。 但 JPEG 是 4 个字符组成的，无奈只能把 4 个字符变成 3 个字符，因此“JPG”格式就诞生了。

但是苹果系统是不限制文件后缀名的，因此苹果沿用了最原始的“JPEG”格式。

JPEG2000（了解即可）

JPEG 2000是基于小波变换的图像压缩标准，由 Joint Photographic Experts Group 组织创建和维护。
JPEG 2000通常被认为是未来取代 JPEG（基于离散余弦变换）的下一代图像压缩标准。
JPEG 2000文件的副档名通常为.jp2，MIME类型是image/jp2。

JPEG2000的压缩比更高，而且不会产生原先的基于离散余弦变换的JPEG标准产生的块状模糊瑕疵。JPEG2000同时支持有损压缩和无损压缩。
目前就safari支持，can is use-png2000支持18%。

优点

  • 支持有损和无损压缩

缺点

  • 支持率太低了

PNG

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

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

优点

  1. 不失真的情况下尽可能压缩图像文件的大小
  2. 像素丰富
  3. 支持透明（alpha通道）

缺点

  1. 文件大

    JPEG、GIF 和 JPEG 这三种图像格式都提供了一种功能，让图像能够更快地显示。 图像可以以一种特殊方式存储，显示时先大概显示图像的草图，当文件全部下载后再填充细节。 以这种方式保存的文件称为 交错 GIF、交错 PNG 或 渐进 JPEG。尽管叫法不同，但这三种格式的视觉效果类似。

    在使用图片处理软件，比如 PS 时，保存图片的时候，可以设置 png/gif 交错、jpg 渐进。

    交错 GIF 或 交错 PNG 文件首先是一块一块地显示，下载完后再填补更多的细节。 同样，渐进 JPEG 文件首先是模糊的，然后渐渐清晰起来。 具体可以看在线示例（使用 3G Fast）： png正常，png交错，jpg渐进

image.png

Webp

有损 WebP 图像平均比视觉上类似压缩级别的 JPEG 图像小 25-35% 。无损耗的 WebP 图像通常比 PNG 格式的相同图像小26% 。
WebP 还支持动画：在有损的 WebP 文件中，图像数据由 VP8 位流表示，该位流可能包含多个帧。

从 can i use - webp上看，支持率95%。 主要是 Safari 低版本和 IE 低版本不兼容。
优点

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

缺点

  • 兼容性吧，相对 jpg，png，gif来说

SVG

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

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

缺点

  • SVG 复杂度高会减慢渲染速度

  • 不适合游戏类等高互动动画

    base64

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

  • 无额外请求

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

缺点

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

参考资料

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