前端开发中常用图片格式
在我们的日常开发中。必不可少会使用很多种图片。
我们需要根据业务场景来选择所使用的图片类型。
这里我整理了一些常用图片类型、他们的优缺点以及建议的使用场景。
# 如何在计算机中显示一张图片
我们使用的计算机都是以像素作为最小单位。
每一个像素在内存中需要使用 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 压缩时候,不要对图片类型开启