作为唐山网络公司的设计师,今天就来说一下图片的性能优化
发布时间:2017-12-16 发布者:唐山先创网络有限公司 点击:
由于大多数唐山网络公司电脑设备更新换代周期长,致使大多员工用的电脑老旧性能差,为了让软件运行使用流畅,软件自身性能的重要性不言而喻(想想你曾经卸载狂拽炫酷吊炸天的360),卡顿是大忌,作为一名网站设计师,如何兼得美丽与才华而又不失用户体验?
何为性能优化
简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短。
对网站自身而言,能够减少网络请求、节省宽带资源和数据空间,从而提高软件性能及自身的易用性;
从用户感知方面,页面加载更流畅、操作响应更及时,带来良好的使用体验。
设计师能做什么
性能优化虽是程序员嘴中常常念叨且擅长的事情,其实设计师也能从自身角度-“图片的优化”来贡献力量。 提高Web站点的用户体验,一个很重要的方面就是保证网页的呈现速度,
其中网站静态资源-图片通常占据了页面下载的绝大部份,因此从性能优化角度而言,图片绝对是重点之一,优化图片能极大的节约宽带提升性能。
以下是一些个人的总结及工作经验,开始码字,带上你的小板凳,前排挤挤:
图片格式多种多样,其自身的优缺点决定了使用场景及环境,在什么情况下采用何种的图片格式,是我们作对的第一步,首先从了解他们入手:
PEG是第一个国际图像压缩标准,.jpg和.jpeg是JPEG文件压缩封存后常见的图片格式,均为有损压缩,且会产生迭代有损。JPEG可通过不同的压缩比,去除图像的部分信息和色彩数
据,来降低原有文件的大小,同样设计师也可以根据具体情况在图像质量和文件大小之间找到平衡,特别适用于层次丰富,色彩较多的图像。
JPEG2000 ,作为JPEG的升级版,它具备更高压缩率,同时支持有损、无损压缩和渐进传输的功能及其它新特性,必须是取代JPEG的节奏。
PNG,是一种无损压缩的位图格式,支持索引、RGB、灰度和Alpha通道等特性,具有较高的压缩空间,保真效果好,支持透明,且定义了 256 个透明层次。 适用于色彩简单,对比
强烈的图片,像图标icon等,PNG也可以被用来无失真的储存照片,但文件较太大并不适合网络呈现(像珍贵图像等其他所需另当别论)
GIF,常用于图像动画,具有高压缩比的特性,占用空间小,保存的图像只支持 256 色,会损失大量细节,但利于下载,组成的动画适合网络传播。
SVG,矢量图形格式,能够清晰的显示在任何分辨率设备,无需适配。SVG,是一种基于XML(可扩张性标记)的语言,采用文本传输且可被搜索,支持多种编辑(色彩变化,动画效果等)具有较强的交互和动态性
WebP, 2010 年由谷歌开发,文件压缩方面比JPEG更加优越,同时支持有损和无损压缩,但解码时间却相对较慢。 此前有eBay团队的测试,同时显示 50 张同质量的WebP和jpg,WebP比jpg显示快了 2 倍
多,WebP虽然会增加解码的时长,但减少了文件体积,缩短了加载时间,以致实际渲染速度更快。谷歌家的产物,且未被Web标准采纳,其他平台及浏览器的支持性相对较差,但可以在不支持的环境中进行的功
能降级处理。