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
本文参考：公众号：小生方勤 - 你必须知道的图片优化技巧
网友评论