现在在使用vue2开发一套pc端的网站。因为图片图片比较多，所以最近在考虑图片优化的的策略。下面先说说我现在目前自己的一些想法吧
图片可以做懒加载（即只加载目前屏幕内的图片，而不是当进入首页，将首页内的所有图片都去加载）
首次加载质量偏低比较小的图片，先保证用户可以看到图片，然后在替换为比较清晰的图片
静态的图片放到cdn上面
css内使用的图片可以考虑base64，或者雪碧图。然后将图片压缩后再使用
谷歌浏览器内可以考虑webp格式的图片（但需要服务端的配合）
这是我目前可以想到，已知的在图片方面可以做的优化。webp格式图片基本前端的工作量很小，可以忽略实现也比较简单。雪碧图压缩，base64等构建工具都可以帮忙完成，也没有什么复杂的地方。以下我将主要说说第二点
假设我现在将图片的初始质量调整为30%，就意味着当我打开一个网站的时候请求的所有图片都是30%质量的
然后再开启请求高质量图片的功能，那么这一步我在vue中又需要如果去处理。js有onload事件，但是好像没有办法拿到一个东西是否请求完成的api
假设现在先请求低质量的图片，然后又请求高质量的图片，就意味着一张图片其实请求了两次，这样会不会很浪费？
希望大神们可以分享以下自己的想法，最后是可以分享一点demo，或者说几个可以参考的例子
相关分类