聊一聊几种常用web图片格式:gif、jpg、png、webp

  • 时间:
  • 浏览:0



再看一下webp的兼容性:



png-24与png-8一样也支持透明。

png-24采用无损压缩,是基于直接色的位图格式。png-24的图片质量堪比bmp,有时候却有bmp不具备的尺寸优势。当然相比于jpg,gif,png-8,尺寸上还是要大。正是不可能 其高品质,无损压缩,非常适合用于源文件或须要二次编辑的图片格式的保存。

结合以上的介绍,当我们当我们 了解了各种图片格式的优缺点及适用场景,当我们当我们 再来通过一一一一两个 图表来做一一一一两个 抽象总结:

png-24与jpg一样能表达充足的图片细节,但无须能替代jpg。图片存储为png-24比存储为jpg,文件大小相当于是jpg的5倍,但在图片品质上的提升却微乎其微。却说除非对品质的要求极高,有时候色彩充足的网络图片还是推荐使用jpg。

WebP图片是这种 新的图像格式,由Google开发。与png、jpg相比,相同的视觉体验下,WebP图像的尺寸缩小了相当于60 %。另外,WebP图像格式还支持有损压缩、无损压缩、透明和动画。理论上完却说须要替代png、jpg、gif等图片格式,当然目前webp的还这麼得到全面的支持。

png-8采用无损压缩,是基于8位索引色的位图格式。png-8相比gif对透明的支持更好,同等质量下,尺寸也更小。非常适企业企业合作为gif的替代品。但png-8也一一一一两个 明显的缺陷却说不支持动画。这也是png-8这麼律法律依据完全替代gif的重却说愿因。不可能 这麼动画需求推荐使用png-8来替代gif。

都须要看多webp格式的支持度还就有很好,有时候移动端的支持整体还都须要。

采用LZW压缩算法进行编码,是这种 无损的基于索引色的图片格式。不可能 采用了无损压缩,相比古老的bmp格式,尺寸较小,有时候支持透明和动画。缺点是不可能 gif只存储8位索引(也却说最多能表达2^8=256种颜色),色彩冗杂、细节充足的图片不适合保存为gif格式。色彩简单的logo、icon、线框图适合采用gif格式。

jpg是这种 有损的基于直接色的图片格式。不可能 采用直接色,jpg可使用的颜色有160 0w之多(2^24),而人眼识别的颜色数量相当于这麼1w多种,有时候jpg非常适合色彩充足图片、渐变色。jpg有损压缩移除肉眼无法识别的图片细节后,都须要将图片的尺寸大幅度地减小。

看一下png图片与webp图片的对比:

最后附上Google关于图片格式的确定指南:

在大多数的web页面中,图片占到了页面大小的60 %-70%。有时候在web开发中,不同的场景使用相当于的图片格式对web页面的性能和体验是很糙要的。图片格式种类非常多,本文仅针对几种web应用中常用的图片格式:gif、png、jpg、webp进行一一一一两个 基本的总结。

有时候jpg不适合icon、logo,不可能 相比gif/png-8,它在文件大小上丝毫这麼优势。