网页图片格式区别

　五种网页图片格式对比：

特点	Gif	Jpeg	Png	Svg	Webp
透明性	布尔透明类型，它可以是全透明，可以是不透明，它并没有半透明（alpha透明）	不支持透明	Png是完全支持alpha透明的（透明，半透明，不透明）
动画	支持动画	不支持动画	不支持动画
损耗性	Gif是一种无损耗的图像格式(LZW压缩算法进行编码)	损耗性，有损压缩格式，因此在编辑过程一般用png作为过渡格式	无损的	无损的、矢量图	同时支持有损和无损压缩的、使用直接色的、点阵图。
颜色	Gif只能显示 256种颜色,	可以显示全部颜色,全色显示	1.PNG8 256色PNG的别名 2.PNG24全色PNG的别名 3.PNG32全色PNG的别名
适合场景	不适合用来做照片，但它适合对颜色要求不高的图形（比如说图标，图表等）	最适web上面的摄影图片和数字照相机中		非常适合用来绘制企业Logo、Icon等
图片大小	得益于数据的压缩，GIF格式的图片文件大小远远小于其他格式的图片。				相同质量的图片，WebP具有更小的文件体积
分类			大致可以分为256色的png和全色的png，可以用256色的png代替gif(因为在相同的图片效果下，PNG-8具有更小的文件体积)，用全色的png24(体积比jpeg大的多)代替jpeg

一、Jpeg格式特点:
1.透明性,它并不支持透明,但是它可以显示全部颜色,全色显示。
2.动画,它也不支持动画。
3.损耗性,除了一些比如说旋转（仅仅是90、180、270度旋转），裁切，从标准类型到先进类型，编辑图片的原数据之外，所有其它操作对jpeg图像的处理都会使得它的质量损失。所以我们在编辑过程一般用png作为过渡格式。

4.由上可以看出Jpeg是最适web上面的摄影图片和数字照相机中。

二、Gif格式特点:
1.透明性,Gif是一种布尔透明类型，既它可以是全透明，也可以是不透明，但是它并没有半透明（alpha透明）。
2.动画,Gif这种格式支持动画。
3.无损耗性,Gif是一种无损耗的图像格式(LZW压缩算法进行编码)，这也意味着你可以对gif图片做任何操作也不会使得图像质量产生损耗。

4. 得益于数据的压缩，GIF格式的图片文件大小远远小于其他格式的图片.

5.gif只能显示 256种颜色,不适合用来做照片，但它适合对颜色要求不高的图形（比如说图标，图表等），它并不是最优的选择，我们会在后面中看到png是最优的选择。

三、Png格式特点:
1.类型,Png这种图片格式包括了许多子类，但是在实践中大致可以分为256色的png和全色的png，你完成可以用256色的png代替gif(因为在相同的图片效果下，PNG-8具有更小的文件体积)，用全色的png24(体积比jpeg大的多)代替jpeg
2.透明性,Png是完全支持alpha透明的（透明，半透明，不透明），尽管有两个怪异的现象在ie6（下面详细讨论）

（1）针对GIF/png图像边缘带明显锯齿情况解决的方法：在PS里保存GIF/PNG格式的图片时尽量使用PNG-8，且加个描边之类的，减小锯齿的严重程度；

（2）针对png图片IE6下背景不透明：可以专门针对IE6写hack语句。例如_color:#333;_margin-top:20px；在IE6下使用GIF背景图，对其它浏览器使用PNG背景图，减小图片显示得缺陷；

3.动画,它不支持动画
PNG图片格式现在包含三种类型：
1.PNG8 256色PNG的别名
2.PNG24全色PNG的别名
3.PNG32全色PNG的别名
　　基本上PNG32就是PNG24，但是附带了全alpha通道。就是说每个像素上不仅存储了24位真色彩信息还存储了8位的alpha通道信息，就如同GIF能存储透明和不透明信息一样。当我们把图片放到不太搭配的背景上的时候，透明PNG图片的边缘会显示得更加平滑。

四. SVG全称Scalable Vector Graphics

        是无损的、矢量图。SVG跟上面这些图片格式最大的不同，是SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着SVG图片在放大时，不会失真，所以它非常适合用来绘制企业Logo、Icon等。SVG是很多种矢量图中的一种，它的特点是使用XML来描述图片。借助于前几年XML技术的流行，SVG也流行了很多。使用XML的优点是，任何时候你都可以把它当做一个文本文件来对待，也就是说，你可以非常方便的修改SVG图片，你所需要的只需要一个文本编辑器。SVG并非只能绘制简单的Logo类的图片，它可以绘制出精致的图片的. 

五.WebP

        WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。想象Web上的图片之多，百分之几十的提升，是非常非常大的优化。只可惜，目前只有Chrome浏览器和Opera浏览器支持WebP格式，所以WebP的应用并不广泛。为了使用更先进的技术，比如WebP图片格式，来压缩互联网上传输的数据流量，谷歌甚至提供了Chrome Data Compression Proxy，设置了Chrome Data Compression Proxy作为Web代理之后，你访问的所有网站中的图片，在经过Proxy的时候，都会被转换成WebP格式，以降低图片文件的大小。