前端开发中经常使用的几种图片格式及其使用规范

在介绍图片格式以前，首先说一些额外的东西。

 

矢量图与位图。

矢量图是经过组成图形的一些基本元素，如点、线、面，边框，填充色等信息经过计算的方式来显示图形的。通常来讲矢量图表示的是几何图形，文件相对较小，而且放大缩小不会失真。

这里有一点要注意的是web开发中用到的图片都不是矢量图，即便是一个三角形，只有一个边框，都是位图。

那么矢量图在哪里有用到呢？

我目前的知识池就知道一个图标字体，好比 font-awesome 

 

目前在前端的开发中经常使用的图片格式有三种：jpg,png,gif。这些都是位图。

位图又叫像素图或栅格图，它是经过记录图像中每个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就比如一幅大的拼图，只不过每一个拼块都是一个纯色的像素点。位图的优势是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。

 

---

 

有损压缩和无损压缩

有损压缩是对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，而后使用附近的颜色经过渐变或其余形式进行填充。这样既能大大下降图像信息的数据量，又不会影响图像的还原效果。

JPG是咱们最多见的采用有损压缩对图像信息进行处理的图片格式。

咱们在保存图片为jpg格式时，会有一个品质选项

这里指的就是对图片的损耗程度，若是压缩的话通常选择品质在60-80之间，60如下图片失真会很严重。

无损压缩

PNG是咱们最多见的一种采用无损压缩的图片格式。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不一样的，而后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之须要记录起点和终点的位置就能够了），而把不一样的数据另外保存（例如天空上的白云和渐变等数据）。

这里要说明的是，无损压缩只是一种相对的“无损”压缩，并非说不管如何压缩图片都不会失真。这点在PNG8中体现的尤其明显。PNG8最多只能索引256种颜色，因此在图像上出现的颜色数量大于咱们能够保存的颜色数量时，咱们就不能真实的记录和还原图像了。

 

---

 

透明

索引透明：即布尔透明，相似于GIF，某一像素只有全透和全不透明两种效果不能对透明度进行设置

Alpha透明：半透明

 

 

---

下面进入正题。

1 GIF

先简单说一下GIF吧，GIF是一种正在逐渐被抛弃的图片格式。PNG格式的出现就是为了替代它。PNG 8除了不支持动画外，PNG8有GIF全部的特色，可是比GIF更加具备优点的是它支持alpha透明和更优的压缩（GIF仅支持索引透明）。

可是gif在网上仍是有一席之地的，好比在贴吧或者qq群里常看到的动画图片，用的都是gif。

当图片颜色简单到必定程度，大小小到必定程度的时候，gif格式图片大小要小于png8。好比一个1*1像素的纯黑色点，在PNG8下是124byte，在GIF下是43byte。

可是此时的话用css或者base64是一种更好的选择。关于base64 具体参考：base64:URL背景图片与web页面性能优化。

 

2 JPG

JPG在存储图像时会把图像分解成8*8像素的栅格（如上图），而后对每一个栅格的数据进行压缩处理，当咱们放大一幅图像的时候，就会发现这些8*8像素栅格中不少细节信息被去除，而经过一些特殊算法用附近的颜色进行填充。这也是为何咱们用JPG存储图像有时会产生块状模糊的缘由。

同时由于它是一块一块的，那么当边界模糊，颜色渐变的时候，就能达到很是好的效果，这也是它适合大块颜色相近图片的缘由。

JPG在栅格化时精确记录少数点，其它点用差值补齐，因此当颜色较少时，在文件大小上能够体现出优点。

优缺点：

1. 支持摄影图像或写实图像的高级压缩，而且可利用压缩比例控制图像文件大小。
2. 有损压缩会使图像数据质量降低，而且在编辑和从新保存JPG格式图像时，这种降低损失会累积。
3. JPG和PNG8都适合颜色较少的图片，可是当图像颜色数少于必定值好比256的时候，PNG8可能更合适
4. JPG和PNG8都适合大块颜色相近的图片。
5. JPG不适合亮度("锐度")差别十分明显的较简单的图片。

JPG在存储摄影或写实图像通常能达到最佳的压缩效果，好比网站的背景图，轮播图，用户头像等等。

 

3 PNG

这里PNG放在最后说，PNG能够细分为三种格式:PNG8，PNG24，PNG32。

后面的数字表明这种PNG格式最多能够索引和存储的颜色值。”8″表明2的8次方也就是256色，而24则表明2的24次方大概有1600多万色。

关于透明：

1. PNG8支持索引透明和alpha透明
2. PNG24不支持透明;
3. 而PNG32在24位的PNG基础上增长了8位（256阶）的alpha通道透明，也就是说能够存储从彻底透明到彻底不透明一共256个层级的透明度（即所谓的半透明）。

你可能要问了，我保存是PNG-24格式，为何还有透明呢？

其实在你勾选了透明度选项以后，你保存的格式就是PNG-32了，只是ps没有提示你罢了。

优缺点：

1. 能在保证最不失真的状况下尽量压缩图像文件的大小。
2. PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，而且还可存储多到16位的α通道数据。
3. 对于须要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

使用规范：

1，少用图片元素，尽可能用css3代替

好比圆角，提示框，不会二次渲染的元素的阴影。关于css3的filter属性，在移动端并不推荐使用，虽然会节省图片的空间，可是  一、渲染会消耗性能，致使页面加载反而变慢；二、andorid系统在4.0以上版本才支持。

2，尽可能少用png32格式，太大了=。=

在某些状况下，若是损失必定的视觉能够得到性能较大的提高，能够和设计师协商去掉一些效果。

3， JPG适合摄影图像或写实图像，同时也适合颜色较少图像；

　　PNG8 适合所含颜色不多(少于256)、具备大块颜色相近的区域或亮度差别十分明显的较简单的图片；

　　PNG32适合图片较为复杂且有透明效果且透明效果没法用css来实现的状况。

4， 若是页面中有较多的小icon，首先考虑使用webfont,若是webfont不能知足需求，必须使用css sprite将图片合并，来压缩整体图片的大小，同时减小页面请求提升访问速度。

 

另外关于png图片的压缩，除了调整最大索引色外，这个网站用着还不错 www.tinypng.com

肉山说压缩去grunt找个插件写个脚本就能够，imagemin,等我成功后再来更新~