产品设计师必备知识分享:WEB图片常用格式与差异

了解常用的web图片格式以及各种的用途,帮助产品设计师和前端工程师提升web和APP产品的加载性能。

众所周知,从性能优化角度来说,图片优化绝对是重点之一,优化图片能极大的节约宽带提升性能。

颜色艳丽的APP icon

 

常用的web图片格式

图片格式多种多样,其自身的优缺点决定了使用场景及环境,在什么情况下采用何种的图片格式,是我们作对的第一步,首先从了解他们入手:

JPEG是第一个国际图像压缩标准,.jpg和.jpeg是JPEG文件压缩封存后常见的图片格式,均为有损压缩,且会产生迭代有损。JPEG可通过不同的压缩比,去除图像的部分信息和色彩数据,来降低原有文件的大小,同样设计师也可以根据具体情况在图像质量和文件大小之间找到平衡,特别适用于层次丰富,色彩较多的图像。

同时,JPEG 是Web 上仅次于GIF 的常用图像格式。

 

JPEG2000 ,作为JPEG的升级版,它具备更高压缩率,同时支持有损、无损压缩和渐进传输的功能及其它新特性,必须是取代JPEG的节奏。

 

PNG,是一种无损压缩的位图格式,支持索引、RGB、灰度和Alpha通道等特性,具有较高的压缩空间,保真效果好,支持透明,且定义了256个透明层次。 适用于色彩简单,对比强烈的图片,像图标icon等,PNG也可以被用来无失真的储存照片,但文件较太大并不适合网络呈现(像珍贵图像等其他所需另当别论)

 

GIF,常用于图像动画,具有高压缩比的特性,占用空间小,保存的图像只支持256色,会损失大量细节,但利于下载,组成的动画适合网络传播。

GIF 是Web 上最常用的图像格式,它可以用来存储各种图像文件。特别适用于存储线条、图标和电脑生成的图像、卡通和其它有大色块的图像。

 

SVG,矢量图形格式,能够清晰的显示在任何分辨率设备,无需适配。SVG,是一种基于XML(可扩张性标记)的语言,采用文本传输且可被搜索,支持多种编辑(色彩变化,动画效果等)具有较强的交互和动态性 。

 

WebP,2010年由谷歌开发,文件压缩方面比JPEG更加优越,同时支持有损和无损压缩,但解码时间却相对较慢。 此前有eBay团队的测试,同时显示50张同质量的WebP和jpg,WebP比jpg显示快了2倍多,WebP虽然会增加解码的时长,但减少了文件体积,缩短了加载时间,以致实际渲染速度更快。谷歌家的产物,且未被Web标准采纳,其他平台及浏览器的支持性相对较差,但可以在不支持的环境中进行的功能降级处理。

比如下图所示:

026821581720a3a84a0e282b06665f

 

 

以下对上述常用的图片格式做了简单的对比总结:

0291335817208ca84a0e282b6128aa

 

在实际项目当中,我们都会要求提供最小的图片,有些时间需要对图片进行压缩。

25学堂推荐了很多个在线压缩图片的网站:

1、推荐一个APP切图文件的PNG压缩工具-Pnggauntlet

2、手机APP设计必备图片压缩神器-TinyPNG

3、实用的图片批量压缩优化工具—JPGmini、Punypng和PNGmini

 

 

 

每天更新,
全站高品质素材免费下载!