图片优化： 1. 雪碧图 2. 图片压缩 1. 优先使用png而不是GIF 2. 压缩png 3. 去掉jpg的metadata 4. 压缩gif动画 5. 尝试使用png8 6. 避免使用AlphaImageLoader 7. 压缩动态生成的图像 8. 使 favicon 更小，可缓存 9. 使用css sprites 3. base64 4. [响应式图片](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) 设置图片width: 100%， 但是如果加载的图片的实际尺寸很大，而我们所需要的很小，那么不可避免的就会造成浪费， 所以这时就可以使用响应式图片。  **主要用到的属性就是 srcset 和 sizes 属性。** 5. 延迟加载 6. SVG 7. canvas 8. 字体图库代替图标 http级别 1. 服务器压缩 减少传输大小 2. CDN 高性能 3. 多域名 增加并发能力 > [图像压缩原理](https://blog.csdn.net/newchenxf/article/details/51693753) > [web图像优化 （1）](https://www.jianshu.com/p/425e25d96a9b) > [Web性能优化：图片优化](https://www.cnblogs.com/wizcabbit/p/web-image-optimization.html) > [前端性能优化之优化图片 && 优化显示图片](https://www.cnblogs.com/zhuzhenwei918/p/6935426.html) > [web前端优化之图片优化](https://www.jianshu.com/p/b55e951e9f03)