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

Python技术文章2016-09-21 |程序圆教程网 |Python培训,前端图片优化

前端图片优化七大方法
 
网页在加载的过程中,图片资源在网页加载中占有很大容量比例,所以对图片进行优化,是提高前端性能的一个重要的方法,本文总结了七大优化方法:
 

  • 使用JPG图片

Jpg格式的图片是一种高效的有损压缩图片,它是通过损失一部分图像数据的方式来极大地压缩图片的容量,虽然损失了图像数据,但是在高效率压缩的同时,图片的观看效果也不会相差很大,所以这种格式的图片广泛地应用在网页制作中,这种格式不能使用透明背景,所以在网页中,只要是图片不需要透明背景,就可以使用这种图片,我们利用Photoshop压缩这种图片时,可以根据图片不同的用途,设置不同的压缩比例,还可以设置图片的连续属性,这样图片在加载时,可以按照从模糊到清晰的方式加载,提高用户体验。如图:
 Python培训之前端图片优化七大方法(一) 
 

  • 使用雪碧图

所谓的“雪碧图”,是指将多张网页上使用的小图片合并成一张图片,这种图片叫做”雪碧图”,使用“雪碧图”优化的原理其实就是减少http请求数,我们知道,网页上使用的一张图片,在加载时就会发送一个http请求,让服务器下载这张图片,如果有十张图片,就会有十个http请求,而http请求,在前端性能上是很奢侈的事情,一般为了前端性能会尽量减少http请求数,我们可以将那十张图合并成一张图片,利用CSS的技术,将图片的不同部分应用在网页的不同地方,这样就可以将十个http请求减少至一个http请求,极大地优化的前端的性能,这是一个常用的技术,下图就是facebook使用的雪碧图,它们是一张图片:
 Python培训之前端图片优化七大方法(一) 
 
 

  • 图片使用base64编码

图片使用base64编码,就是将图片数据编码成base64编码的字符串,我们在CSS样式中可以直接使用这个字符串作为要加载的图片数据,节省了一个http请求数,而且方便CSS的维护,比如说,我们在网页中要使用下面这个小图标的图片作为背景,图片的名称为:shutoff.jpg,Python培训之前端图片优化七大方法(一)  在CSS中的伪代码如下:

.icon{ background:url( ..images/shutoff.jpg ); }

 如果将这张图片转化为base64编码,可以写成如下格式:
 

.icon{ background:url(“data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL….”);

此时图片的数据直接嵌入到了CSS样式中,CSS就不用外链这张图片了。本文版权归程序圆Python培训学院所有,欢迎转载,转载请注明程序圆出处。谢谢!程序圆:程序圆教程网首发:http://www.itcast.cn/python/ 

Python教程

Python培训之python三大并发服务器

2021-5-5 2:38:08

Python教程

python培训之python两大web大框架

2021-5-5 8:39:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索