www.8029.com-首页

教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

传智教育|传智播客

一样的教育,不一样的品质

全国校区

 

Python培训之前端图片优化七大方法(一)

更新时间:2016年09月21日14时15分 来源:传智播客Python培训学院 浏览次数:

前端图片优化七大方法
 
网页在加载的过程中,图片资源在网页加载中占有很大容量比例,所以对图片进行优化,是提高前端性能的一个重要的方法,本文总结了七大优化方法:
 
  • 使用JPG图片
Jpg格式的图片是一种高效的有损压缩图片,它是通过损失一部分图像数据的方式来极大地压缩图片的容量,虽然损失了图像数据,但是在高效率压缩的同时,图片的观看效果也不会相差很大,所以这种格式的图片广泛地应用在网页制作中,这种格式不能使用透明背景,所以在网页中,只要是图片不需要透明背景,就可以使用这种图片,大家利用Photoshop压缩这种图片时,可以根据图片不同的用途,设置不同的压缩比例,还可以设置图片的连续属性,这样图片在加载时,可以按照从模糊到清晰的方式加载,提高用户体验。如图:
 
 
 
  • 使用雪碧图
所谓的“雪碧图”,是指将多张网页上使用的小图片合并成一张图片,这种图片叫做”雪碧图”,使用“雪碧图”优化的原理其实就是减少http请求数,大家知道,网页上使用的一张图片,在加载时就会发送一个http请求,让服务器下载这张图片,如果有十张图片,就会有十个http请求,而http请求,在前端性能上是很豪侈的事情,一般为了前端性能会尽量减少http请求数,大家可以将那十张图合并成一张图片,利用CSS的技术,将图片的不同部分应用在网页的不同地方,这样就可以将十个http请求减少至一个http请求,极大地优化的前端的性能,这是一个常用的技术,下图就是脸书使用的雪碧图,它们是一张图片:
 
 
 
 
  • 图片使用base64编码
图片使用base64编码,就是将图片数据编码成base64编码的字符串,大家在CSS样式中可以直接使用这个字符串作为要加载的图片数据,节省了一个http请求数,而且方便CSS的维护,比如说,大家在网页中要使用下面这个小图标的图片作为背景,图片的名称为:shutoff.jpg,  在CSS中的伪代码如下:

.icon{ background:url( /news/20160921/..images/shutoff.jpg ); }
 如果将这张图片转化为base64编码,可以写成如下格式:
 

.icon{ background:url(/news/20160921/"data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....");
此时图片的数据直接嵌入到了CSS样式中,CSS就不用外链这张图片了。

本文版权归传智播客Python培训学院所有,欢迎转载,转载请注明编辑出处。谢谢!
编辑:传智播客Python培训学院
首发:/python/ 

www.8029.com|www.8029.com

XML 地图 | Sitemap 地图