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%。

推荐阅读更多精彩内容