其他分享
首页 > 其他分享> > 前端开发中常用图片格式

前端开发中常用图片格式

作者:互联网

前端开发中常用图片格式 

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

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

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

无压缩存储

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

代表格式:

BMP(BMP 取自位图 BitMaP 的缩写,也称为 DIB(与设备无关的位图))

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

压缩存储

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

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

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

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

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

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

无损压缩

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

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

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

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

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

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

GIF(Graphics Interchange Format 图像互换格式)

PNG


 

有损压缩

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

代表格式 jpg

与 GIF 相比,JPEG 不适合用来存储企业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 中的“/”和“+”字符转义

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

雪碧图(CSS Sprite)

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

iconfont

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

额外一些图片相关知识

保存为 web 格式

webP

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

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

gzip 压缩

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

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

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

标签:常用,压缩,存储,前端开发,使用,格式,图片格式,图片
来源: https://blog.csdn.net/dayoudun/article/details/121114865