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

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等新图片格式具备更好的压缩比。