图片格式介绍

本文原创：huhongtao

1、图片格式有哪些？

BMP、JPEG、GIF、PSD、PNG、TIFF、TGA、EPS、SVG、webP、CDR、PCX、EXIF、FPX、PCD、DXF、UFO、AI、HDRI、RAW、WMF、FLIC、EMF、ICO

2、图片分类

一、 矢量图

矢量图：由数学向量来记录的图像是矢量图

特色：放大后图片依旧清晰—放大后从新构图

缺点：很难表现天然度高的写实图像

格式：SVG、CDR、AI、WMF、EPS、ICO、TGA、DXF、…

二、位图(Bitmap)

位图：由一系列像素点组成的图像是位图，位图也称为点阵图

特色： （1）放大会看到像素点，呈现锯齿状——放大后单位面积的像素点减小 （2）dpi决定图像的清晰度 （3）RGB彩色图像——色彩丰富

格式：PNG、JPEG、GIF、BMP、webP、PSD、TIFF、PCX、FPX、PCD、…

二者差异

类型	位图	矢量图
构图方式	像素点	向量
色彩	色彩丰富	色彩变化少
失真	放大、缩小易失真	不失真，良好的缩放性
大小	大(面积越大,色彩越丰富,越大)	小
分类	bpm、jpg、gif、psd、png、...	wmf、ai、EPS、SVG、cdr、emf、dxf、...

位图不一样格式的区别 —— 有损压缩、无损压缩

不一样格式的图像在记录这些数据时的方式不同，涉及到有损压缩和无损压缩的区别

三、有损压缩

概念：并不彻底真是的记录图像上每一个像素点的数据信息，去掉那些图像上会被人眼忽略的细节，而后使用附近的颜色经过渐变或其余形式进行填充。

特色：能大大下降图像信息的数据量，又不会影响图像的还原效果

格式：jpg

四、无损压缩

概念：真实的记录图像上每一个像素点的数据信息，为了压缩图像文件的大小会采用一些特殊的算法

压缩原理：先判断图像上哪些区域的颜色是相同的，哪些是不一样的而后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空只须要记录起点和终点的位置就能够了），而把不一样的数据另外保存（例如天空上的白云和渐变等数据）

格式： （1）PNG（对图像上全部出现的颜色进行索引，咱们把这些颜色成为索引色，PNG8(索引256色)、PNG24(真彩16.7million色)、PNG32(真彩16.7million色)） （2）GIF，索引256色，支持动画

3、经常使用格式介绍

介绍 png、jpg、psd、svg、webp、iconfont

png —— 主要特性是半透明

1. 压缩比高于GIF，支持图像透明，无损压缩，质量高
2. 能够利用Alpha通道调节图像的透明度(实验)
3. 逐次逼近显示，先用低分辨率显示图像，而后逐步提升它的分辨率
4. 透明性，用来建立一些有特点的图像
5. 流式读/写性能，容许连续读出和写入图像数据
6. PNG的开发目标是改善并取代GIF,PNG8除了不支持动画外，PNG8有GIF全部的特色，可是比GIF更加具备优点的是它支持alpha透明和更优的压缩（GIF仅支持索引透明）
7. 占内存大
8. 能在保证不失真的状况下尽量压缩图像文件的大小
9. 对于须要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在web页面上
10. 颜色数越少，文件体积越小

jpg

1. 应用最普遍
2. 有损压缩
3. 将不易被人眼察觉的图像颜色删除
4. 较大的压缩比(可达到2:1甚至40:1)
5. 尺寸较小，下载速度快，但不支持透明
6. 位图，由像素构成，放大变虚
7. JPEG图像存储格式既知足了人眼对色彩和分辨率的要求，又适当的去除了图像中很难被人眼所分辨出的色彩
8. 编辑和从新保存JPG格式图像，清晰度降低损失会累积
9. JPG不适用于所含颜色较少、具备大块颜色相近的区域或亮度差别十分明显的较简单的图片

“基线”格式的JPG加载过程

“连续”格式的JPG加载过程

jpg格式保存方式

psd

1. Photoshop的专用图像格式
2. 保存图片的完整信息，图层，透明，通道，文字
3. 文件通常较大

svg

经过记录坐标的形式存储图形信息，SVG使用基于XML的语义化标签结构，因为是DOM结构，你能够经过ID获取SVG元素，并操纵它们

1. 采用文原本描述对象
2. 矢量图形、点阵图像、文本
3. 不适用于写实图像和有许多细节的复杂图片
4. 可用于数据可视化
5. 支持动画、透明、缩放

webp

目标：减小文件大小，但达到和JPEG格式相同的图片质量，但愿可以减小图片档在网络上的发送时间

1. 支持动画
2. 牺牲图片质量来下降图片文件大小
3. 相同质量的状况下比JPEG文件尺寸小巧许多
4. 支持有损压缩和无损压缩的图片文件格式
5. 无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即便png通过压缩，webp能够减小28%的大小
6. 更小的图片体积
7. 在 JPEG 和 PNG 上的转化效果都很是优秀、稳定和统一
8. 谷歌推出的新格式，存在兼容性，目前chrome、opera支持

iconfont

1. 矢量图标
2. 引入字体
3. 便于调整大小、颜色

gif

1. 动画
2. 支持透明背景
3. 适用于多种操做系统，压缩比高
4. 色域不太广,只支持256种颜色

4、应用介绍

一、前端使用何种图片格式

一、通常层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则须要采用PNG
二、有些矢量工具绘制的图像因为采用较多的滤镜特效也会造成丰富的色彩层次，这个时候就须要采用JPG进行存储了
三、基本视觉元素，如容器的背景、按钮、导航的背景等应该尽可能用PNG格式进行存储，这样才能更好的保证设计品质


照片用 JPG。
动画用 GIF。
Logo、Icon 等小图用 PNG-8。
复制代码

二、加载的图片太多、太大怎么办

一、将图片和应用分离，防止高I/O负载而崩溃，同一时间对同一域名下的资源的并发请求数目限制
二、压缩
三、懒加载
四、css雪碧图css Sprites
五、将图片压缩成base64格式来节约请求
复制代码

三、前端图像处理工具

一、[tinypng.com](https://tinypng.com/)
二、[腾讯智图](http://zhitu.isux.us/)
三、[pngcrush](https://pngcrush.com/)
四、...
复制代码

tinypng.com

1.更好的压缩算法，并且经过智能地减小颜色数，达到有效的压缩。 2.压缩比高，失真小

腾讯智图

1.除了 PNG 和 JPG ，还支持 WebP
2.能够直接看到压缩后的图片大小

pngcrush

1.能够批量压缩图片 2.可减小40%的大小

四、图片懒加载的原理

五、base64

1.减小请求次数 2.转化后不必定会减少体积 3.不会被缓存，适合较小或者简单的图片