关于图片的性能优化,作为设计师的你知道多少

2019-09-15 郑州网站建设  

关于图片的性能优化,作为设计师的你知道多少

做B端软件产品,由于大多数公司PC设备更新换代周期长,致使大多员工用的PC老旧性能差,为了让软件运行使用流畅,软件自身性能的重要性不言而喻(想想你曾经卸载狂拽炫酷吊炸天的360),卡顿是大忌,作为一名产品设计师,怎么兼得美丽与才华而又不失用户体验?

何为性能优化

简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短。

摘自baidu百科

性能优化的好处

对软件自身而言,能够减少网络请求、节省宽带资源和数据空间,从而提高软件性能及自身的易用性;

从用户感知方面,页面加载更流畅、操作响应更及时,带来良好的使用体验。

设计师能做什么

性能优化虽是程序员嘴中常常念叨且擅长的事情,其实设计师也能从自身角度-“图片的优化”来贡献力量。 提高Web站点的用户体验,一个很重要的方面就是保证网页的呈现速度,其中网站静态资源-图片通常占据了页面download的绝大部份,因此从性能优化角度而言,图片绝对是重点之一,优化图片能极大的节约宽带提升性能。

以下是一些个人的总结及工作经验,开始码字,带上你的小板凳,前排挤挤:

1.选对格式

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

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

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

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

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

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

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

22222

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

3333

2.一图多用

以下介绍了一些小技巧,从而达到减少图片的使用:

opacity,通过透明度的处理,且在不影响用户体验和设计的目的情况下,我们便可以只使用一张图片就能搞定控件的多种状态,从而减少图片的使用和网络请求。

4444

SVG,可通过css样式完成对图片颜色的变换,从而也减少了多张图片的使用。

css sprite,俗称雪碧图,就是把网页中一些图片整合到一张图片文件中,再利用CSS定位显示所需要显示图片的位置。好处在于能够在网页加载图片时减少对服务器的请求次数,同时合并后的图片应用统一色表储存,因此单独的一张的雪碧图在大小上可能比之前的多张小图片总的尺寸还要小,降低服务器储存和请求压力,同时提高了页面的加载速度。

54555

3.无图模式

拉上你的前端小伙伴,开启无图模式:


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/web/2551.html转载请标明出处,谢谢合作!
标签:
  • 用户体验
  • 设计师
  • 图片优化