认识达内从这里开始

相信大家在进行产品优化和网站优化的时候，对于如何提高网站的性能都是一定的帮助的，那么，我们在设计网页的时候，如何来提高网页的性能呢？今天，我们就给大家介绍一下，在网页优化中的图片优化的方法，希望能够对大家有一定的帮助作用。当然了，如果您对运城计算机培训课程感兴趣的话，也可以与我们的在线咨询联系，了解更多课程内容。

何为性能优化

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

摘自百度百科

性能优化的好处

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

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

设计师能做什么

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

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

1.选对格式

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

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标准采纳，其他平台及浏览器的支持性相对较差，但可以在不支持的环境中进行的功能降级处理。

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

2.一图多用

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

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

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

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

3.无图模式

拉上你的前端小伙伴，开启无图模式：

css，Web的诸多样式其实都是可以都过css来实现，例如简单的几何图形、圆角、渐变、阴影等等(考虑IE8的还是有些鸡肋)，代码毕竟属于文本模式，请求资源小，加载和渲染速度都是图片不可比拟的，每一个图片的加载都需要一个http的请求，而浏览器同一时间对同一域名下的请求是有一定数量限制，超过限制数目的请求会被阻塞，从而延长用户的感知时间，因此减少请求次数，也就提高了页面的呈现速度。 另外通过css实现，在任何屏幕上都可以显示出良好视觉的效果，无需多分辨率、多端适配。若软件具有的自定义外观的功能，css的优势就更加的明显强大，属性修改一下就ok了。

iconfont，图标字体，其实字体就是图形化的东西，把图标处理成字体来显示在屏幕上，同样浏览器也会将其视为字体进行抗锯齿处理，有时效果并没有想象中的那么清晰锐利(相对与纯图片效果还是相当可人的)。iconfont，作为字体，其位置和大小也会受css属性的影响，同时为了得到最大范围的浏览器支持，需要生成TTF、WOFF、EOT、SVG四种字体格式，不过这些问题交给阿里UX矢量库就好了。

感悟

就像自己，也会在使用产品中，因长时间的等待加载而烦躁不安，从而影响操作和心情，作为一名产品设计师你需要为用户着想，而不是看着自己的设计稿觉得NB，你需要去真正用、去运行你的产品，才知道什么是产品设计。

达内时代科技集团致力于培养面向电信和金融领域的Java、C++、C#/.Net、3G/Android、3G/IOS、PHP、嵌入式、软件测试、UID、网络营销、网络工程、会计、UED、web、Unity3D、大数据、童程童美等17大方向中高端软件人才课程与少儿教育课程。选择运城电脑培训，不再孤军奋战，轻轻松松做IT高薪白领。运城达内培训带领有明确目标的学子迈向成功之路!想找工作的求职者可以加QQ：3373924515（太原达内就业服务部）咨询了解。