常用的几种图片格式

在开发中，图片的优化很重要，图片过大，很消耗页面的性能的，那么作为前段开发，对不同图片的格式的特点需要了解清楚，这样在工作中才能正确使用相应的图片。

jpg  jpeg baseline-jpeg progressive-jpeg   gif  png  webp apng  svg  bpg

在介绍图片的之前，来了解两个概念：

矢量图与位图

位图：是由称作像素（图片元素）的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时，可以看见赖以构成整个图像的无数单个方块。扩大位图尺寸的效果是增多单个像素，从而使线条和形状显得参差不齐。

然而，如果从稍远的位置观看它位图的颜色和形状又显得是连续的，缩小位图尺寸也会使原图变形，因为此举是通过减少像素来使整个图像变小的。

简单说，位图就是以无数的色彩点组成的图案，当你无限放大时你会看到一块一块的像素色块，效果会失真。常用于图片处理、影视婚纱效果图等，象常用的照片，扫描，数码照片等。Photoshop主要处理的是位图图像。

矢量图：在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，矢量图只能靠软件生成，文件占用内在空间较小，因为这种类型的图像文件包含独立的分离图像，可以自由无限制的重新组合。

它的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

在web中图标字体，比如 font-awesome  就是矢量图

 

有损压缩和无损压缩

 

有损压缩

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

 

无损压缩

PNG是我们最常见的一种采用无损压缩的图片格式。无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，而把不同的数据另外保存。

无损压缩只是一种相对的“无损”压缩，并不是说无论如何压缩图片都不会失真。

 

 1，baseline-jpeg和progressive-jpeg的特点及不同

jpeg文件后辍名为"．jpg"或"．jpeg"，baseline-jpeg和progressive-jpeg分别是jpeg文件的两种保存方式

baseline-jpeg和progressive-jpeg这两种格式有相同尺寸以及图像数据，扩展名也是相同的，唯一的区别是二者显示的方式不同。

baseline-jpeg属于通用的标准型图片，图片是从上到下的扫描方式，把每一行顺序的保存在jpeg文件中。当打开这个图片时，图片内容从上到下一行一行的被显示出来，直到所有的图片数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，像瀑布流式的网页布局使用这种比较合适。

progressive-jpeg属于渐进式图片，ps保持图片的时候有个交错式的格式，选择这个就是保存为渐进式格式的图片啦。这种格式的图片和baseline-jpeg一遍扫描不同，progressive-jpeg文件包含多次扫描，这些扫描顺寻的存储在JPEG文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时，会使用这种图片。

优缺点：

baseline-jpeg没有什么很大优点，一般使用progressive-jpeg比较多

progressive-jpeg带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验。

progressive-jpeg的大小并不会和基本的图片大小相差很多，有时候可能会比基本图片更小。

progressive-jpeg图片的缺点就是吃用户的CPU和内存，不过对于现在的电脑来说这点图片的计算并不算什么。

basbaseline-jpeg和progressive-jpeg不支持透明。不支持动画。都是有损压缩。所有浏览器都支持。相对原图的大小呢是由画质来决定的。

2，gif

应用：

gif图片一般用来做loading图，还有表情等。

特点：

gif图是无损压缩的。支持透明。所有浏览器都支持。相对原图的大小是由帧数和每帧图片大小决定的。256位色，简单色不多。

3，png

应用：

在web中一些icon使用png

特点：

png图支持透明。无损压缩。所有浏览器都支持。相对原图大小由png色值位数决定。使用场景是需要透明的时候。

png格式有8位、24位、32位三种形式：

8位png支持两种不同的透明形式（索引透明和alpha透明）。

24位png不支持透明。

32位png在24位基础上增加了8位透明通道，因此可展现256级透明程度。

png8和png24后面的数字则是代表这种png格式最多可以索引和存储的颜色值。8代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。

 

4，webp

webp是goole新推出的影像技术

特点：

支持透明，不支持动画。有损压缩。谷歌和欧朋浏览器支持。相对原图大小由压缩率决定 。适用于复杂的颜色及形状，浏览器平台可预知。

如何判断浏览器是否支持webp图片格式：

第一种：对webp的图片进行base64，复值给img标签的src，如果触发了onerror 就证明该浏览器不支持webp格式图片。如果onload 事件触发了，并且没有触发onerror就说明该浏览器支持webp格式的图片

第二种是：请求头中accept中标明了格式就说明该浏览器支持的图片格式

cdn就会根据这个来判断浏览器是否支持webp格式图片，如果支持就返回webp，不支持就返回本来的图片如jpg,png等。

5，apng

特点：支持透明。支持动画。无损压缩，支持的浏览器有firefox safari ios。相对原图大小由每帧图片决定。适用于需要半透明效果动画。

6，svg

属于矢量图片

特点：支持透明。支持动画。无损压缩。所有浏览器支持（ie8以上）。相对原图大小由特效和内容复杂度决定。适用场景是简单图型，需要良好的放缩体验，需要动态控制图片特效。

svg并没有广泛被使用，实际上在开发中维护svg成本很高，所以适用jpg和png更多一些。

7，bpg

同样大小的jpg和bpg，bpg 图片清晰度要高。

做动图，相同动画要比apng小很多

特点：支持透明。支持动画。有损压缩。所有浏览器不支持，需要js解码。相对原图大小由画质决定。适用场景jpeg上需要极限优化场景。

以上就是自己学习的图片格式总结，希望大家共同学习。fighting!!!!!!!!!!