前端开发中常用的图片格式

在我们的日常开发中。必不可少会使用很多种图片。
我们需要根据业务场景来选择所使用的图片类型。
这里我整理了一些常用图片类型、他们的优缺点以及建议的使用场景。

如何在计算机中显示一张图片

• 我们使用的计算机都是以像素作为最小单位。

• 每一个像素在内存中需要使用 4 个字节，分别为 RGBA

• 1280*720*4 约等于 3.5M

• 图片格式，就是计算机存储图片数据的方式

根据图片数据存储过程中，是否对数据进行压缩处理。将图片分为两类

• 无压缩存储
• 压缩存储
  
  
  

无压缩存储

顾名思义就是直接将图片数据加上元数据直接存储的方式。

代表格式：

BMP（BMP 取自位图 BitMaP 的缩写，也称为 DIB（与设备无关的位图））

• 支持 1、4、8、24 位深度
• 常用深度
  • 8 位为索引模式
  • 24 位，32 位使用 RGB 模式
• 数据扫描方式：从上到下，从左到右

• 优点：
  • 未压缩格式，算法简单，对各个平台兼容性良好。平台层应用较多。
  • 不需要要任何依赖就可以打开
• 缺点：
  • 不要在网页中使用

这里仅仅是跟后边压缩格式做对照说明，web 开发中不要使用 bmp 格式图片。

压缩存储

压缩存储，就是在存储过程中通过压缩算法，将图片数据进行压缩，使得相同分辨率、相近质量的情况下。缩小图片所占空间。

既然在存储的时候压缩，那么在使用的时候，就需要先将压缩后的图片，解压然后放在内存中。

图片压缩的本质就是：以时间换空间

压缩的程度，就需要在空间成本和时间成本之间做到平衡。

再常见的场景中，相对硬盘存储成本和网络的传输能力，我们几乎不用考虑处理器的能力限制

对于图片数据的压缩，也分为两种

• 无损压缩
• 有损压缩
  
  
  

无损压缩

无损压缩：压缩和解压缩的过程是完全可逆的。

保证图片解压之后，可以完全追溯到源数据。

常用的无损压缩算是 LZ77 的衍生算法

简单说就是，在某一个缓冲区内，找到较长的重复数据。然后替换成较短的索引值。

gif、png、zip、gzip 等都是使用这个压缩算法

无损压缩的代表格式 png、gif

GIF（Graphics Interchange Format 图像互换格式）

• 索引模式 8 位，支持 256 色

  • 索引模式
    • 使用 1 个字节来存储图片研
    • 支持 256 种颜色，0-255，每个序号代表一种颜色值
  • 直接颜色模式 RGB
    • 使用 3 个字节分别来存储 RGB
    • 支持 255*255*255 约等于 1600W，支持 1600 万色。说的就是这个
  • 从直接 RGB 模式改为索引模式，会出现图片略微失真。
  • 会极大的压缩图片尺寸

• 布尔透明

  • 只有是否两个选项，不会出现渐变透明
  • alpha 透明
    • 0-255 个层级表示 alpha 层
  • 圆形位置会出现明显锯齿

• 支持交错

  • 交错选项会在下载时候不在从左到右，从上到下的模式进行下载。而是隔行下载，在 1/64 后显示总体模糊概况

• 优点：

  • 支持动画
  • 支持透明
  • 无损压缩

• 缺点：

  • 仅布尔透明

• 适用场景：

  • logo、icon 等
  • 动图

PNG

• 全称便携式网络图形（外语全称：Portable Network Graphics）

• png 格式拥有比 git 更优的算法

• 支持交错

• png8

  • 属性基本与 git 一致
  • 除了不支持动画效果外，可替换 gif 格式

• png24

  • 直接颜色模式，对颜色值真实还原。
  • 我们常用的 png 格式 24 位深度
  • 很多情况下我们使用 png 图片时候，使用到透明。这样保存默认就增加 alpha 层（png32）

• 缺点

  • 相对图片较大
  • 对自然照片和复杂色块的图片压缩率不高

• 优点

  • 高保真

• 使用场景

  • 适用于 web 所有场景，建议使用

有损压缩

有损压缩，就是在压缩过程中，对图片造成不可逆的质量损坏的压缩方式。

代表格式 jpg

• 全称联合照片专家组（外语简称 JPEG 外语全称：Joint Photographic Expert Group）

• jpg===jpeg

  • 早期的 dos 系统，对文件名的格式要求是（8.3）格式，所以在当时版本上，后缀名改为 jpg
  • 相同命运的还有 htm 和 html

• 不支持动画

• 可选压缩质量
  JPEG 图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。
  JPEG 图片在显示时候，使用 YCbCr 模式，利用人眼对亮度敏感大于色彩敏感。RGB 格式转换为 YCbCr 模式。
  JPEG 的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG 非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。

• 支持交错
  连续类似 PNG 交错，会先显示模糊轮廓

与 GIF 相比，JPEG 不适合用来存储企业Logo、线框、纯色类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件更大。

• 每次打开重新保存 jpg 都会造成质量的下降。

• 不适用场景：

  • logo
  • 单色图片
  • 颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片

• 适用场景

  • 照片
  • 复杂 banner

矢量图片

以上所述的，使用像素点来表示图形的图片格式，叫做位图。
还有一种使用点和线来描述图形的图片格式，矢量图

• svg（Scalable Vector Graphics）

  可缩放矢量图形（外语简称 SVG、外语全称：Scalable Vector Graphics）。

  它是基于 XML，由万维网联盟进行开发的。一种开放标准的矢量图形语言，可任意放大图形显示，边缘异常清晰，文字在 SVG 图像中保留可编辑和可搜寻的状态，没有字体的限制，生成的文件很小，下载很快，十分适合用于设计高分辨率的 Web 图形页面

  • SVG 文件的大小通常是极小的，即使它们看起来的样子真的很大。然而，值得注意的是，
  • SVG 文件的大小也取决于要展示图形的复杂度。
  • SVG 在渲染的时候需要比像素图更多的计算能力，这也就意味着性能的损耗。

  如果你的 logo 是特别复杂的，它可能会很耗费性能，甚至文件大小也非常大。

  所以尽可能简化你的矢量形状的复杂度是很重要也很有必要的。
  此外，SVG 文件是用 XML 编写的，因此可以在文本编辑器中打开和编辑。这意味着它展示的效果在运行时是可以改变的。你可以使用 JavaScript 来改变图片。

• 优点：

  • 矢量图片，放大不影响质量
  • 显示效果好，不存在锯齿等情况
  • 可以支持动画效果

• 缺点：

  • 查看十分不方便
  • 不适合表示复杂图形
  • 兼容性（显示（< ie8)；动画效果（更多））

• 应用场景

  • logo、图标

其他

base64

base64 本身不属于图片格式，是以字符串格式来保存图片数据的一种方式

标准的 ascii 字符中 0-31 及 127，属于控制字符，它们并没有特定的图形显示，但会依不同的应用程序，而对文本显示有不同的影响。

在网络上交换数据时，往往要经过多个路由设备，由于不同的设备对字符的处理方式有一些不同，这样那些不可见字符就有可能被处理错误，这是不利于传输的。所以，我们经常讲源数据做 base64 处理

Base64 要求把每三个 8Bit 的字节转换为四个 6Bit 的字节（3*8 = 4*6 = 24），然后把 6Bit 再添两位高位 0，组成四个 8Bit 的字节（使用 A-Za-z0-9+/）等可见字符来做网络传输

Base64 适用于小段内容的编码，比如数字证书签名、Cookie 的内容等。

网页中，我们也使用 base64 来讲较小的图片转换为字符串数据，保存在 css 或者 html 中。从而减少网络请求的次数

也有些场景是讲图片或者文件转为 base64 格式，使用 post 上传到服务器实现文件上传功能

Base64 并不适合直接放在 URL 里传输，因为 URL 编码器会把标准 Base64 中的“/”和“+”字符转义

• 优点
  • 减少网络请求
• 缺点
  • base64 转换规则导致数据比源数据大 1/3
  • 字符串内容存储在 css 或者 js 中，会影响 css 树解析速度或者 js 解释器执行速度

建议控制使用数量和图片大小

雪碧图（CSS Sprite）

雪碧图也是为了减少网络请求，将小图标和背景图像合并到一张图片上，然后利用 css 的 background-positon 或者 img 的 clip 来显示需要显示的图片部分

• 优点

  • 减少加载网页图片时对服务器的请求次数
    使用起来不够灵活
    标签更复杂
    如果需要多个尺寸

• 缺点

  • 性能问题
    • 内存占用 上边已经说过图片在内存中的显示，虽然我们需要的仅仅是其中一部分
    • 维护困难

• 适用场景

  • 图标

iconfont

Iconfont 是采用字体的方式来做图标。它的原理就是将很多 icon 做成字体库，通过样式或者字体对应的字符集来显示这个 icon。

• 优点

  • 减少请求次数，将多个 icon 合并到一个字体文件中，从而提高网页性能；
  • 自由的变化大小和颜色
  • 矢量图不失真
  • 兼容性好

• 缺点

  • 单色（可以彩色，但是失去了图片字体的优势）
  • 维护成本高
  • 不适合表示复杂图形，仅适用于图标
  • 不利于首屏显示

• 适用场景

  • 图标
    
    
    

额外一些图片相关知识

保存为 web 格式

• 保存好的图片，分为两个部分，

  • 1、图片显示内容（我们上边所有的描述都是基于此）

  • 2、图片的元数据
    图片除了格式，宽高等基础数据之外。
    相片类图片还包含了很多的文件简介内容，入创作者，时间，位置等等信息。
    保存为 web 使用格式会删除掉图片元数据
    这样既减小了请求消耗，又保护的用户隐私。

    前端在使用图片，一定要保存为web格式。既减少网络带宽，也方式用户信息泄露。

webP

WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。



WebP 既支持有损压缩也支持无损压缩。相较编码 JPEG 文件，编码同样质量的WebP 文件需要占用更少的计算资源。

• 优点
  • 更好的压缩算法
• 缺点
  • 兼容性
  • 浏览图片信息

gzip 压缩

在真实环境中，为了减小网络请求，服务端一般会开启 gzip 压缩。

因为图片相对尺寸较大，而且基本上常用的图片格式已经被做过压缩。

前端服务器 gzip 压缩时候，不要对图片类型开启