图片优化技巧

1. 图片大小优化

• 使用imagemin，或imagemin-webpack-plugin插件
• 可使用渐进式图片(存储是ps中设置)，使加载过程是从模糊到清晰的过程，优点是会提前占位，避免多次重排，缺点是占用cpu去多次计算渲染

2.按需加载图片

• IntersectionObserver提供给我们一项能力：可以用来监听元素是否进入了设备的可视区域之内。但兼容性不好
• vue的vue-view-lazy组件，也是基于IntersectionObserver实现的
• 网速较慢时，图片没加载完成前会看到一个空白，此时可设置图片的css渐变色背景，达到preview的效果。附：图片转换渐变色的地址https://tools.w3clubs.com/gip/

3.响应式图片的实践

• 对于背景图片，使用media媒体查询，@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
• 对于img图片，使用html5的新属性srcset

4.不推荐使用base64

本文参考：公众号：小生方勤 - 你必须知道的图片优化技巧