第四十五节 常用图片格式

  1 <!-- 矢量图与位图
  2 
  3 矢量图是通过组成图形的一些基本元素，如点、线、面，边框，填充色等信息通过计算的方式来显示图形的。一般来说矢量图表示的是几何图形，文件相对较小，并且放大缩小不会失真。
  4 
  5 这里有一点要注意的是web开发中用到的图片都不是矢量图，即使是一个三角形，只有一个边框，都是位图。
  6 
  7 那么矢量图在哪里有用到呢？
  8 
  9 我目前的知识池就知道一个图标字体，比如 font-awesome 
 10 
 11  
 12 
 13 位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。一张位图就好比一幅大的拼图，只不过每个拼块都是一个纯色的像素点。位图的优点是利于显示色彩层次丰富的写实图像。缺点则是文件大小较大，放大和缩小图像会失真。
 14 
 15 目前在前端的开发中常用的图片格式有三种：jpg,png,gif。这些都是位图。
 16 
 17  
 18 
 19 有损压缩和无损压缩
 20 
 21 有损压缩是对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。这样既能大大降低图像信息的数据量，又不会影响图像的还原效果。
 22 
 23 JPG是我们最常见的采用有损压缩对图像信息进行处理的图片格式。
 24 
 25 我们在保存图片为jpg格式时，会有一个品质选项
 26 
 27 
 28 
 29 这里指的就是对图片的损耗程度，如果压缩的话一般选择品质在60-80之间，60以下图片失真会很严重。
 30 
 31 无损压缩
 32 
 33 PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空之需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）。
 34 
 35 这里要说明的是，无损压缩只是一种相对的“无损”压缩，并不是说无论如何压缩图片都不会失真。这点在PNG8中体现的尤为明显。PNG8最多只能索引256种颜色，所以在图像上出现的颜色数量大于我们可以保存的颜色数量时，我们就不能真实的记录和还原图像了。
 36 
 37  
 38 
 39 透明
 40 
 41 索引透明：即布尔透明，类似于GIF，某一像素只有全透和全不透明两种效果不能对透明度进行设置
 42 
 43 Alpha透明：半透明
 44 
 45  
 46 
 47 下面咱们进入正题，这是重点O(∩_∩)O哈！（拍桌子~）。
 48 
 49 1 GIF
 50 
 51 先简单说一下GIF吧，GIF是一种正在逐渐被抛弃的图片格式。PNG格式的出现就是为了替代它。PNG 8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩（GIF仅支持索引透明）。
 52 
 53 但是gif在网上还是有一席之地的，比如在贴吧或者qq群里常看到的动画图片，用的都是gif。
 54 
 55 当图片颜色简单到一定程度，大小小到一定程度的时候，gif格式图片大小要小于png8。比如一个1*1像素的纯黑色点，在PNG8下是124byte，在GIF下是43byte。
 56 
 57  
 58 
 59 2 JPG
 60 
 61 优缺点：
 62 
 63 支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。
 64 有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
 65 JPG和PNG8都适合颜色较少的图片，因为JPG在栅格化时精确记录少数点，其它点用差值补齐。但是当图像颜色数少于一定值比如256的时候，PNG8可能更合适
 66 JPG不适合具有大块颜色相近的区域或亮度("锐度")差异十分明显的较简单的图片。
 67 JPG在存储摄影或写实图像一般能达到最佳的压缩效果，比如网站的背景图，轮播图，用户头像等等。
 68 
 69  
 70 
 71 3 PNG
 72 
 73 这里PNG放在最后说，PNG可以细分为三种格式:PNG8，PNG24，PNG32。
 74 
 75 后面的数字代表这种PNG格式最多可以索引和存储的颜色值。”8″代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。
 76 
 77 关于透明：
 78 
 79 PNG8支持索引透明和alpha透明
 80 PNG24不支持透明;
 81 而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明，也就是说可以存储从完全透明到完全不透明一共256个层级的透明度（即所谓的半透明）。
 82 你可能要问了，我保存是PNG-24格式，为什么还有透明呢？
 83 
 84 其实在你勾选了透明度选项之后，你保存的格式就是PNG-32了，只是ps没有提示你罢了。
 85 
 86 优缺点：
 87 
 88 能在保证最不失真的情况下尽可能压缩图像文件的大小。
 89 PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。
 90 对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
 91  
 92 
 93  
 94 
 95  
 96 
 97 使用规范：
 98 
 99 1，少用图片元素，尽量用css3代替
100 
101 比如圆角，提示框，不会二次渲染的元素的阴影。关于css3的filter属性，在移动端并不推荐使用，虽然会节省图片的空间，但是  1、渲染会消耗性能，导致页面加载反而变慢；2、andorid系统在4.0以上版本才支持。
102 
103 2，尽量少用png32格式，太大了=。=
104 
105 在某些情况下，如果损失一定的视觉可以获得性能较大的提升，可以和设计师协商去掉一些效果。
106 
107 3， JPG适合摄影图像或写实图像，同时也适合颜色较少图像；
108 
109 　　PNG8 适合所含颜色很少(少于256)、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片；
110 
111 　　PNG32适合图片较为复杂且有透明效果且透明效果无法用css来实现的情况。
112 
113 4， 如果页面中有较多的小icon，首先考虑使用webfont,如果webfont不能满足需求，必须使用css sprite将图片合并，来压缩总体图片的大小，同时减少页面请求提高访问速度。 -->