前端开发中对图片的优化技巧总结

1.去掉无意义的修饰。优化之前首先确认一下设计本身是否需要用这么多图片，是否可以更简洁！

2.不用图片。如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。将来CSS滤镜得到广泛支持后，还可以做到alpha混合、正片叠底等各种效果。

3.使用矢量图替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！

4.使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。而GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。除了这些格式之外，Chrome、新版Opera、Android 4+支持WebP格式，IE 9+、IE mobile 10+支持JPEG XR。这两个新格式都支持无损和有损压缩，都具有更良好的压缩比。当然这需要为不同的浏览器返回不同的图片，增加了开发成本，也增加存储成本。不过省了流量或者相同流量下改善了图片质量，提升了用户体验。

5.使用data url。资源内嵌于CSS或HTML中，而不必单独请求。注意，多个地方都要使用的资源不一定适合用此优化方式，因为图片数据重复多了，增加流量。另外许多浏览器对data url有长度限制，注意资源的大小。注意：如果 CSS 还是放在head里，使用data URL时文件的增大必然导致性能（开始渲染时间、首屏）变差。

6.设置缓存。缓存策略（如永久缓存+重命名）、部署策略（如反向代理、CDN等）。

7.资源的lazyload或postpone。（lazyload：延迟到其他资源下载完成后再加载，postpone：延迟到元素可见再加载。）目前基本上都要用脚本控制。未来HTML和CSS会增加相关的控制属性，见：Resource Priorities。

8.CSS Sprites。 使用CSS Sprites,减少对图片的请求次数。

9.使用base64编码代替图片。适用于图片小于2KB，页面引用图片不多的情况。将图片转换为base64编码字符串inline到CSS或页面中，减少http的请求次数。

10.更好的图片格式，使用webp、bpg、sharpP等新图片格式具有更好的压缩比。