png、jpg、gif与webp不得不说的前端基础知识

  今天偶然得到公司UI大神指导，介绍了几款前端切图神器，后在实践的过程看到两个概念，png8与png24，引起了自己的注意，还记得之前去腾讯面试（偶然得到的面试机会，可惜po主没把握住，伤心事不必再提，不过这次面试确实让自己受益匪浅），也被问到类似的概念。今天对比完几个概念的差别之后，把自己的一些理解写下，希望可以帮到跟我一样之前踩过坑的前端小白们：

一、基本概念区分

1、png8与png24

（1）概念的区别：

          ①png8：是指8位索引色位图，属于布尔透明类型，只有全透明跟全不透明两种类型，最多能显示2的8次方即256种颜色，适合颜色比较单一的图像、纯色、logo、图标等图片体积小的图像。

  ②png24:是指24位索引图，有全透明跟半透明以及全不透明的类型，即最多可展示的颜色数量大于1600M，所以它展示的图片颜色更丰富，更清晰。不过图片的大小也会相应增加，适用于摄影作品的展示。

（2）根本区别：

png8与png24的根本区别是存储方式的不同，那我们如何辨别png8还是png24格式的图片呢？在ps中，打开图像—>模式。如果是png8格式的图片，只有8位/或单通道，而且该通道会自动添加上‘索引’，而png24格式的图片还有其他的通道可选。

（3）除开png8、png24，还有一种png32格式的图片，png32基本等同于png24，不同的是比png24格式多了alpha通道。

2、jpg和jpeg

（1）JPEG的文件格式一般有两种文件扩展名：.jpg和.jpeg，这两种扩展名的实质是相同的，我们可以把*.jpg的文件改名为*.jpeg，而对文件本身不会有任何影响。严格来讲，JPEG的文件扩展名应该为.jpeg，但由于DOS时代的8.3文件名命名原则，PC机使用了.jpg的扩展名，而由于Mac并不限制扩展名的长度，因此当时苹果机上都使用了.jpeg的后缀名。虽然现在windows也可以支持任意长度的扩展名了，但大家已经习惯了.jpg的叫法，因此也就没有强制修正。这种情况类似于.htm和.html的区别。

     3、gif：区别与png与jpg以及其他图像格式的，是gif可以支持动画，类似于png8的布尔透明类型，只有全透明跟全不透明，没有半透明，是无损耗的图像格式。

     4、webp：是谷歌2010年推出的一种旨在加快图片加载速度的图片格式，图片的体积只有jpg的2/3，美中不足的是，webp是一种有损压缩，而且目前支持这种图片格式的，只有谷歌以及Opera11.10之后的版本，火狐以及IE暂不支持。并且这种图片格式的编码时间是jpg的8倍。因此在使用时也应结合自己的实际情况。

     5、base64：是网络上最常见的用于传输8bit字节码的编码方式之一。可用于在http环境下传递较长信息，使用base64编码格式存储图片在网页上传输图片的优缺点如下：

    （1）优点： ①减少http请求；②某些文件可避免跨域问题；

     （2）缺点：①浏览器的支持问题（IE6/IE7不支持，但是IE9版本的IE7模式下又是支持的）；②增加css的尺寸；③增加编码成本。

二、实际运用（前端切图）

（1）色彩丰富的、比较大的图片切成jpg格式，例如一些网站的banner图

（2）尺寸小的、色彩不丰富的、以及背景透明的切成gif或者png8

（3）半透明的图片切成png24格式

（4）值得注意的一点是。通常说的IE6不支持png，是指不支持png24的半透明，实际上IE6是支持png8的透明格式的。