1.删除无意义的修改。优化前先确认一下设计本身是否需要用到那么多图片，能不能再简洁一点！2.没有图片。比如半透明、边框、圆角、阴影、渐变等，在目前的主流浏览器中都可以用CSS来实现。未来，CSS滤镜被广泛支持后，可以实现alpha混合、倍增等多种效果。3.使用矢量图代替位图。对于大多数图案、图标等，矢量图形更小且可扩展，无需生成多组绘图。现在各大浏览器都支持SVG，大家可以放心使用！4.使用适当的图像格式。我们常见的图片格式有JPEG、GIF、PNG。基本上内容图片多为照片之类的，适合JPEG格式。修饰过的图像通常更适合无损压缩的PNG。而GIF除了GIF动画基本不用。而对于动画，建议使用视频元素和视频格式，或者改用SVG动画。除了这些格式，Chrome、新版Opera、Android4+支持WebP格式，IE9+和IEmobile10+支持JPEGXR。两种新格式都支持无损和有损压缩，并且都具有更好的压缩率。当然，这需要针对不同的浏览器返回不同的图片，增加了开发成本和存储成本。但是在相同流量下节省了流量或者提高了画质，提升了用户体验。5.使用数据URL。资源嵌入在CSS或HTML中，无需单独请求。注意，多处使用的资源不一定适合这种优化方式，因为图片数据重复，流量会增加。另外很多浏览器对数据url有长度限制，所以要注意资源的大小。注意：如果CSS仍然放在头部，使用数据URL时文件大小的增加必然导致性能不佳（开始渲染时间，首屏）。6.设置缓存。缓存策略（如永久缓存+重命名）、部署策略（如反向代理、CDN等）。7.延迟加载或延迟资源。（lazyload：延迟加载，直到其他资源下载完，postpone：延迟加载，直到元素可见。）目前基本都是用脚本控制。HTML和CSS以后会添加相关的控件属性，参见：ResourcePriorities。8.CSS精灵。使用CSSSprites减少图像请求的数量。9.使用base64编码代替图片。适用于图片大小小于2KB，页面引用的图片不多的情况。将图像转换为base64编码的字符串，内联到CSS或页面中以减少http请求的数量。10、更好的图片格式，采用webp、bpg、sharpP等新的图片格式，压缩比更好。
