249045439
网站设计

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

发表日期:2024-01-07   作者来源:www.wegaga.cn   浏览:0   标签:网站制作    

做B端软件商品,因为大部分企业电脑设施更新换代周期长,导致大多职员用的电脑老旧性能差,为了让软件运行用流畅,软件自己性能的重要程度不言而喻(想想你过去卸载狂拽炫酷吊炸天的360),卡顿是大忌,作为一名商品设计师,怎么样兼得漂亮与才华而又不失客户体验?

何为性能优化

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

摘自百度百科

性能优化有哪些好处

对软件自己而言,可以降低互联网请求、节省宽带资源和数据空间,从而提升软件性能及自己的易用性;

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

设计师能干什么

性能优化虽是技术员嘴中常常念叨且善于的事情,其实设计师也能从自己角度-琼海图片的优化来贡献力量。 提升We哔哩哔哩点的客户体验,一个非常重要的方面就是保证网页的呈现速度,其中网站静态资源-图片一般占据了页面下载的绝大部份,因此从性能优化角度而言,图片肯定是重点之一,优化图片能很大的节省宽带提高性能。

以下是一些个人的概要及工作经验,开始打字,带上你的小板凳,前排挤挤关于图片的性能优化,作为设计师的你了解多少

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

JPEG2000,作为JPEG的升级版,它拥有更高压缩率,同时支持有损、无损压缩和渐进传输的功能及其它新特质,需要是取代JPEG的步伐。

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

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

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

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

以下对上述常见的图片格式做了简单的对比概要关于图片的性能优化,作为设计师的你了解多少

opacity,通过透明度的处置,且在不影响客户体验和设计的目的状况下,大家便可以只用一张图片就能解决控件的多种状况,从而降低图片的用法和互联网请求。

SVG,可通过css样式完成对图片色彩的变换,从而也降低了多张图片的用法。

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

3.无图模式

拉上你的前端小伙伴,开启无图模式关于图片的性能优化,作为设计师的你了解多少Wing Hu

本文标题关于图片的性能优化,作为设计师的你了解多少

如没特殊注明,文章均为龙源技术网 原创,转载请注明来自http://www.yanlongwu.com/news/sheji/6591.html