作为一名设计师，你对图片的性能优化了解多少？
做B终端软件产品，由于大多数企业计算机设备更新周期长，导致大多数员工使用计算机旧性能差，为了使软件运行平稳，软件本身性能的重要性不言而喻（想想你曾经卸载酷360），卡是禁忌，作为一名产品设计师，如何既美丽又有才华，不失去用户体验？
总之，在不影响系统运行正确性的前提下，使其运行得更快，完成特定功能所需的时间更短。
摘自百度百科
对软件自身而言，能够减少网络请求、节省宽带资源和数据空间，从而提高软件性能及自身的易用性;
在用户感知方面，页面加载更流畅，操作响应更及时，带来良好的使用体验。
虽然性能优化是程序员经常谈论和擅长的，但事实上，设计师也可以从自己的角度来看-图片优化贡献力量。Web网站用户体验的一个重要方面是保证网页的呈现速度，其中网站的静态资源-图片通常占据页面下载的绝大多数，所以从性能优化的角度来看，图片绝对是关键之一，优化图片可以大大节省宽带，提高性能。
以下是一些个人总结和工作经验，开始编码，带上你的小板凳，前排挤：
图片格式多种多样，其优缺点决定了使用场景和环境。在什么情况下使用什么样的图片格式是我们犯错误的第一步。首先，我们应该从了解他们开始：
JPEG是第一个国际图像压缩标准，.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采用标准，其他平台和浏览器的支持性相对较差，但在不支持的环境中可以降级功能。
以下是对上述常用图片格式的简单对比总结:
以下是一些减少图片使用的小技巧：
opacity，通过透明度处理，在不影响用户体验和设计的情况下，只能使用一张图片来处理控制器的各种状态，从而减少图片的使用和网络要求。
SVG，可通过css风格改变了图片的颜色，从而减少了多张图片的使用。
css sprite，俗称雪碧图，是将网页中的一些图片整合到图片文件中，然后再利用CSS定位显示所需显示图片的位置。优点是可以减少在网页上加载图片时对服务器的要求次数。同时，合并的图片存储在统一的色表中。因此，单个雪碧图片的总尺寸可能小于以前的小图片，降低了服务器存储和请求压力，提高了页面的加载速度。
拉上你的前端朋友，打开无图模式:
css，Web其实很多款式都可以通过css为了实现，如简单的几何图形、圆角、渐变、阴影等。IE 8 仍然有一些鸡肋），毕竟，代码属于文本模式，要求资源小，加载和渲染速度是图片无与伦比的，每张图片的加载都需要一个http浏览器对同一域名下的请求有一定数量的限制，超过限制的请求会被阻塞，从而延长用户的感知时间，从而减少请求次数，提高页面的呈现速度。css在没有多分辨率和多端适应的情况下，可以在任何屏幕上显示良好的视觉效果。如果软件具有定制外观的功能，css优势更加明显和强大，修改属性ok了。
iconfont，事实上，图标字体是图形化的东西。将图标处理成字体并显示在屏幕上。同样，浏览器也将其视为字体进行抗锯齿处理。有时效果并不像预期的那么清晰和尖锐（相对于纯图片效果相当可爱）。iconfont，作为字体，它的位置和大小也会受到影响css为了获得最大范围的浏览器支持，需要生成属性的影响TTF、WOFF、EOT、SVG四种字体格式，但这些问题都给了阿里UX矢量库很好。
就像你自己一样，在使用产品时，你会因为等待加载时间长而烦躁不安，从而影响操作和情绪。作为一名产品设计师，你需要考虑用户，而不是看你的设计手稿NB，在知道什么是产品设计之前，你需要真正使用和操作你的产品。
作者：Wing Hu
