2.1 图片格式

尝试把GIF格式转换成PNG格式,看看是否节省空间。在所有的PNG图片上运行pngcrush(或者其它PNG优化工具)

2.2 优化CSS Sprite

采用css雪碧图(css sprit/css 图片精灵)技术,吧一些小图合并在一张大图上面,使用的时候,通过北京图片定位,定位到具体的某一张小图上

  • 在Sprite图片中横向排列一般都比纵向排列的最终文件小
  • 组合Sprite图片中的相似颜色可以保持低色数,最理想的是256色以下PNG8格式
  • “对移动端友好”,不要在Sprite图片中留下太大的空隙。虽然不会在很大程度上影响图片文件的大小,但这样做可以节省用户代理把图片解压成像素映射时消耗的内存。100×100的图片是1万个像素,而1000×1000的图片就是100万个像素了。
1
2
3
4
5
6
7
8
.pubBg{
background:url('../img/sprit.png') no-repeat;
background-size:x y; // 和原图的大小保持一致
}

.box{
background-position:x y; // 通过背景定位,定位到具体的位置,展示不同的图片极客
}

页面中没法送一次http请求,都需要完成请求+响应这个完整的http事务,会消耗一些时间,也可能会导致http链接通道的堵塞,为了提高页面的加载速度和运行的性能,我们应该减少http的请求次数和减少请求内容的大小。

2.3 图像映射

可以把多张图片合并成单张图片,总大小是一样的,但减少了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用,比如导航条。给image map设置坐标的过程既无聊又容易出错,用image map来做导航也不容易,所以不推荐用这种方式。

2.4 行内图片(Base64编码)

用data: URL模式来把图片嵌入页面。这样会增加HTML文件的大小,把行内图片放在(缓存的)样式表中是个好办法,而且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。
减少页面的HTTP请求数是个起点,这是提升站点首次访问速度的重要指导原则。

2.5 不要用HTML缩放图片

不要因为在HTML中可以设置宽高而使用本不需要的大图。如果需要

1
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />

那么图片本身(mycat.jpg)应该是100x100px的,而不是去缩小500x500px的图片。

2.6 用小的可缓存的favicon.ico(P.S. 收藏夹图标)

favicon.ico是放在服务器根目录的图片,它会带来一堆麻烦,因为即便你不管它,浏览器也会自动请求它,所以最好不要给一个404 Not Found响应。而且只要在同一个服务器上,每次请求它时都会发送cookie,此外这个图片还会干扰下载顺序,例如在IE中,当你在onload中请求额外组件时,将会先下载favicon。
所以为了缓解favicon.ico的缺点,应该确保:

  • 足够小,最好在1K以下
  • 设置合适的有效期HTTP头(以后如果想换的话就不能重命名了),把有效期设置为几个月后一般比较安全,可以通过检查当前favicon.ico的最后修改日期来确保变更能让浏览器知道。

2.7 压缩image

在使用webp的过程中,会产生一些浏览器兼容问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function checkWebp() {

try{

return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);

}catch(err) {

return false;

}

}



$(document).ready(function() {

var webp_good = checkWebp();

if(webp_good == false) {

$('img').each(function() {

var src = $(this).attr('src');

if(typeof src != 'undefined') {

src = src.replace('/format,webp', '/format,jpg'); //将webp格式转换成jpg格式

$(this).attr('src', src);

}

var original = $(this).attr('original'); //针对用了懒加载的情况

if(typeof original != 'undefined') {

original = original.replace('/format,webp', '/format,jpg'); //将webp格式转换成jpg格式

$(this).attr('original', original);

}

})

}

})

2.8 图片懒加载

采用图片懒加载技术,在页面开始加载时候,不请求真实的图片地址,而是默认图占位,当页面加载完成后,在根据相关的条件依次加载真实的图片(减少页面首次加载http请求的次数)
真实项目中,我们开始图片都不加载,页面首次加载完成,先把第一屏幕中看见的图片进行加载,随着页面的滚动,在下面区域中能够呈现出来的图片进行加载

  • 根据图片懒加载技术,我们还可以扩充出,数据懒加载

开始加载页面的时候,我们只把首屏或者前两屏的数据从服务器进行请求(有些网站首屏数据是后台渲染好,整体返回给客户端呈现的)

  • 当页面下拉,滚动到哪个区域,在把这个区域需要的数据进行请求(请求回来数据绑定以及图片延迟加载等)
  • 分页展示技术采用的也是数据懒加载思想实现的:如果我们开始请求获取的数据是很多的数据,我们最好分批请求,开始只请求第一页的数据,当页面点击第二页(微博是下拉到一定距离后,再请求第二页数据)的时候请求第二页数据。