vue2的项目中图片优化策略，望大牛指点一下迷津

Question

现在在使用vue2开发一套pc端的网站。因为图片图片比较多，所以最近在考虑图片优化的的策略。下面先说说我现在目前自己的一些想法吧

1. 图片可以做懒加载（即只加载目前屏幕内的图片，而不是当进入首页，将首页内的所有图片都去加载）

2. 首次加载质量偏低比较小的图片，先保证用户可以看到图片，然后在替换为比较清晰的图片

3. 静态的图片放到cdn上面

4. css内使用的图片可以考虑base64，或者雪碧图。然后将图片压缩后再使用

5. 谷歌浏览器内可以考虑webp格式的图片（但需要服务端的配合）

这是我目前可以想到，已知的在图片方面可以做的优化。webp格式图片基本前端的工作量很小，可以忽略实现也比较简单。雪碧图压缩，base64等构建工具都可以帮忙完成，也没有什么复杂的地方。以下我将主要说说第二点

1. 假设我现在将图片的初始质量调整为30%，就意味着当我打开一个网站的时候请求的所有图片都是30%质量的

2. 然后再开启请求高质量图片的功能，那么这一步我在vue中又需要如果去处理。js有onload事件，但是好像没有办法拿到一个东西是否请求完成的api

3. 假设现在先请求低质量的图片，然后又请求高质量的图片，就意味着一张图片其实请求了两次，这样会不会很浪费？

希望大神们可以分享以下自己的想法，最后是可以分享一点demo，或者说几个可以参考的例子

Answer 1

针对第二部分的第三条，稍微补充一点，可以考虑直接使用渐进式图片，对大图从上到下加载女人看了流泪男人看了沉默的效果会好一些。

详情见这篇文章

http://www.zhangxinxu.com/wor...

Answer 2

如果首页图很多的话，其实你可以考虑下用同一张加载图来代替未load出来的图片，这样的话可以省下很多请求，这个替换图你可以base64放在首页html上面

Answer 3

如果是九宫格或列表图或GIF的话，可以用缩略图，在点开时再请求大图、原图。
缩略图，可以服务器端动态生成（配合缓存，性能不是问题）。