前端开发中常用图片格式

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

如何在计算机中显示一张图片
我们使用的计算机都是以像素作为最小单位。

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

12807204 约等于 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
支持 255255255 约等于 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)；动画效果（更多））
应用场景

其他

base64

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

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

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

Base64 要求把每三个 8Bit 的字节转换为四个 6Bit 的字节（38 = 46 = 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 压缩时候，不要对图片类型开启

整理转载自：https://www.cnblogs.com/shb190802/p/12791941.html