图片的所有格式，对应的适合于什么场景？有什么优化的方案？

一、常见的图片的格式

1、TIFF格式

TIFF（Tag Image File Format）是Mac中广泛使用的图像格式，它的特点是图像格式复杂、存贮信息多。正因为它存储的图像细微层次的信息非常多，图像的质量也得以提高，故而非常有利于原稿的复制。

2、PSD格式

PSD其实是Photoshop进行平面设计的一张"草稿图"，它里面包含有各种图层、通道、遮罩等多种设计的样稿，以便于下次打开文件时可以修改上一次的设计。在Photoshop所支持的各种图像格式中，PSD的存取速度比其它格式快很多，功能也很强大。

3、PNG格式

PNG（Portable Network Graphics）是一种新兴的网络图像格式。PNG是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点，存贮形式丰富，兼有GIF和JPG的色彩模式；它的另一个特点能把图像文件压缩到极限以利于网络传输，但又能保留所有与图像品质有关的信息，因为PNG是采用无损压缩方式来减少文件的大小，这一点与牺牲图像品质以换取高压缩率的JPG有所不同；它的第三个特点是显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像；

PNG的缺点是不支持动画应用效果，如果在这方面能有所加强，简直就可以完全替代GIF和JPEG了。Macromedia公司的Fireworks软件的默认格式就是PNG。现在，越来越多的软件开始支持这一格式，而且在网络上也越来截止流行。

4、SWF格式

利用Flash我们可以制作出一种后缀名为SWF（Shockwave Format）的动画，这种格式的动画图像能够用比较小的体积来表现丰富的多媒体形式。在图像的传输方面，不必等到文件全部下载才能观看，而是可以边下载边看，因此特别适合网络传输，特别是在传输速率不佳的情况下，也能取得较好的效果。此外，SWF动画是其于矢量技术制作的，因此不管将画面放大多少倍，画面不会因此而有任何损害。

5、SVG格式

SVG可以算是目前最最火热的图像文件格式了，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有互交功能，并可以随时插入到HTML中通过浏览器来观看。

它提供了目前网络流行格式GIF和JPEG无法具备了优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价；字在SVG图像中保留可编辑和可搜寻的状态；平均来讲，SVG文件比JPEG和GIF格式的文件要小很多，因而下载也很快。可以相信，SVG的开发将会为Web提供新的图像标准。

6、GIF

该格式使用无损压缩来减少图片的大小，当用户要保存图片为.GIF时，可以自行决定是否保存透明区域或者转换为纯色。同时，通过多幅图片的转换，GIF格式还可以保存动画文件。但要注意的是，GIF最多只能支持256色。

7、BMP格式

BMP是英文Bitmap（位图）的简写，它是Windows操作系统中的标准图像文件格式，能够被多种Windows应用程序所支持。随着Windows操作系统的流行与丰富的Windows应用程序的开发，BMP位图格式理所当然地被广泛应用。这种格式的特点是包含的图像信息较丰富，几乎不进行压缩，但由此导致了它与生俱生来的缺点--占用磁盘空间过大。所以，目前BMP在单机上比较流行。

二、前端的图片优化的6种方案：

1、使用base64编码代替图片

场景：适用于图片大小小于2KB，页面上引用图片总数不多的情况

原理：将图片转换为base64编码字符串inline到页面或css中

优势：减少http的请求次数，并可以放到后台数据库中，只传输字符串，有较多的构建工具可以直接实现

劣势：这种方法仅限于图片总数较少，而且图片大小小于2KB的情况。否则图片字符串会变得很长很长

2、合并图片sprite(雪碧图)

场景：任何用到页面图片的场景

原理：将多个页面上用到的背景图片合并成一个大的图片在页面中引用

优势：可以有效的较少请求个数，而且，而不影响开发体验，使用构建插件可以做到对开发者透明。适用于页面图片多且丰富的场景。

劣势：生成的图片体积较大，减少请求个数同时也增加了图片大小，不合理拆分将不利于并行加载

3、使用css、svg、canvas或iconfont代替图片

css代替图片

场景：适用于移动端或较高级的浏览器，而且绘制的图案较为简单。

原理：css方式可以用来绘制相对简单的团来代替图片，一般使用before或者after伪元素来丰富图案的复杂度。

优势：具有实现简单，图片体积小的特点，可以实现简单的动态效果

劣势：也受限于css的兼容性特点，绘制复杂图案困难。

canvas代替图片

场景：需要高性能的图片或动画

原理：适用html5的canvas元素绘制创建图片

优势：整个就是画2D图形时，页面渲染性能比较高，页面渲染性能受图形复杂度影响小，性能只受图形的分辨率的影响，画出来的图形可以直接保存为 .png 或者.jpg的图形，适合于画光栅图像或者不规则图形

劣势：没有dom操作，必须依赖定时器，文字渲染性能差，不能添加描述(title属性什么的)，兼容性限制

iconfont是一种web字体来代替图片的解决方案

场景：代替页面上色彩单一的图片 

优势：兼容性好，应用广，目前使用也很广泛 

劣势：但是由于字体的颜色设置单一，只能用于代替颜色单一的图片，对于色彩复杂的图片，iconfont处理起来比较困难

4、响应式图片

场景：不同终端对同一个图片需求不一样，可以根据终端加载不同的图片来节省没必要的流量

原理：通过picture元素，picturefill或平台判断来为不同终端平台输出不同的图片

优势：减少没必要的图片加载，灵活控制，慢速用户加载小图片不至于加载失败，移动端没必要加载大尺寸图片等，可以通过不同方式兼容所有浏览器

劣势：无法避免图片的加载过程，图片本身没优化

5、图片压缩

场景：在不得不加载图片的前提下，要进一步提升优化效果，只能通过有损或无损压缩来减少图片的大小。

原理：对图片进行无损、有损压缩，转为压缩后图片来实现

优势：减少图片加载流量，效果比较明显

劣势：服务器和浏览器压力增大，而且服务器需要额外的服务支持

6、更好的图片格式

场景：之前说到webp、bpg、sharpP等新图片格式具有更好的压缩比，可以使用这类新型的图片来代替原始图片

原理：对图片格式转换，在画质可以接受的情况下达到更好的压缩比效果

优势：减少图片加载流量，效果比较明显

劣势：服务器和浏览器压力增大，而且服务器需要额外的服务支持，格式转换要考虑浏览器的兼容性