web端常用图片格式及各自优缺点

一般来说常用的图片格式有png，gif，jpg，webP。

GIF：主要用于动图，正在被PNG所代替，现在可以被css或者base64替换

PNG：主要分为PNG8,PNG24，PNG32，后面的数字代表可存储的颜色值，比如PNG8可以存储2的8次方也就是256的颜色值。

PNG的优缺点：

能在保证最不失真的情况下尽可能压缩图像文件的大小。

PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。

对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

JPG：JPG在存储摄影或写实图像一般能达到最佳的压缩效果，比如网站的背景图，轮播图，用户头像等等。

JPG优缺点：

支持摄影图像或写实图像的高级压缩，并且可利用压缩比例控制图像文件大小。

有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。

JPG和PNG8都适合颜色较少的图片，因为JPG在栅格化时精确记录少数点，其它点用差值补齐。但是当图像颜色数少于一定值比如256的时候，PNG8可能更合适

JPG不适合具有大块颜色相近的区域或亮度("锐度")差异十分明显的较简单的图片。

WebP（个别游览器不支持，慎用）：是谷歌推出的一种新的图片格式。

WebP的优势在于它具有更优的图像数据压缩算法，在拥有肉眼无法识别差异的图像质量前提下，带来更小的图片体积，同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

WebP 的应用场景及优势：

客户端软件，内嵌了基于 Chromium 的 webview，这类浏览器中应用的网页是可以完全使用WebP 格式，提升加载渲染速度，不考虑兼容。

用 node-webkit 开发的程序，用 WebP 可以减少文件包的体积。

移动应用 或 网页游戏 ,界面需要大量图片,可以嵌入 WebP 的解码包，能够节省用户流量，提升访问速度优势：

对于 PNG 图片，WebP 比 PNG 小了45%。