黑马程序员技术交流社区

标题: Python培训之前端图片优化七大方法（一） [打印本页]
作者: 播妞    时间: 2017-10-24 17:40
标题: Python培训之前端图片优化七大方法（一）
前端图片优化七大方法

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

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



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




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

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

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

本文版权归传智播客Python培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客Python培训学院




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2