png8,png24,jpg,jpeg,gif,webp 图片格式区别

1、基本概念区分

一、PNG图片
1). PNG8(布尔透明)
简单说能够理解为静态的GIF
他们都只有256色,也支持索引透明,就是指定一个像素点是否是透明

2). PNG8(Alpha透明)
可指定像素点的透明度,例如50%透明度，比布尔透明高级一点
这种优势在于比PNG24/32体积小,但效果同样
缺点在于IE6支持很差,会把半透明的像素点显示成全透明

3). PNG24

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

PNG24不透明,可是颜色数不少,不止256色, 而Photoshop里导出的png24实际上是png32
4). PNG32
和photoshop的PSD同样,是Fireworks的默认源文件格式,包含图层和通道信息
和PNG24的区别在于多了透明信息
PNG32 不只可使用更多的颜色，并且还支持透明度设定。属于 PNG 系列中较经常使用的一种格式。

缺点在于IE6支持很差,会把透明区域显示成蓝灰底色 : 只能经过影响性能的方法AlphaImageLoader与须要加特殊标签（VML）。
png8 和 png24的区别

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

如何区分png8和24
1).在ps里看图像—模式，png8固然只有8位/通道了。

2).当打开png8的图片时，ps会默认给它的图片标题上加上“索引”两字，png24的则没有。

3).文件属性详细信息。

二、jpg和jpeg

JPEG的文件格式通常有两种文件扩展名：.jpg和.jpeg，这两种扩展名的实质是相同的，咱们能够把.jpg的文件更名为.jpeg，而对文件自己不会有任何影响。严格来说，JPEG的文件扩展名应该为.jpeg，但因为DOS时代的8.3文件名命名原则，PC机使用了.jpg的扩展名，而因为Mac并不限制扩展名的长度，所以当时苹果机上都使用了.jpeg的后缀名。虽然如今windows也能够支持任意长度的扩展名了，但你们已经习惯了.jpg的叫法，所以也就没有强制修正。这种状况相似于.htm和.html的区别。

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

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

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

优势：①减小http请求；②某些文件可避免跨域问题；

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

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

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

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

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

WEBP由于体积小，正在被大量网站使用。网站加速的内容一半包含了WEBP这种格式，可是写代码必须考虑部分不支持webp，好比苹果系统的Safari浏览器就不支持。

https://java-er.com/blog/png8-png24-jpg-jpeg-gif-webp/