图像优化

1.使用CSS Sprite（CSS精灵）

   由于一般的浏览器平均只支持同时下载不超过6张图片, 延时要乘以图片的下载批次。 使用CSS Sprite（CSS精灵）， 一个单一的图像包含你所有的小图标。网页从服务器上下载的该单一图像，并使用CSS 类名去指向大图像内部的小图标。

代码演示：

.sprite {background: url(img/sprite01.png) no-repeat; display: inline-block;}
.sprite-address {width: 23px;height: 23px;background-position: -1px -1px;}
.sprite-design {width: 23px; height: 23px;background-position: -26px -1px;}
.sprite-mobile_phone {width: 23px;height: 23px;background-position: -1px -26px;}
.sprite-phone {width: 23px;height: 23px;background-position: -26px -26px;}

2.图像压缩

①无损压缩：

https://kraken.io/web-interface 【LOSSLESS】

②有损压缩：

https://kraken.io/web-interface 【LOSSY】

https://tinypng.com/ 【压缩强度最强】

http://www.jpegmini.com/main/shrink_photo 【压缩强度最弱，页面最为清晰】

3.请确保你要发布的图片完美的契合需要他们的网站的尺寸. 即使是同一张图片，也要用不同尺寸的缩略图来适配不同的页面, 创建不同尺寸的缩略图，而不是全都使用同一张大尺寸图片并依赖浏览器去调整它的大小