当视口大于 960 像素时，会加载 960.jpg。大于 768 像素时，会加载 768.jpg。视口小于768，则加载默认图像。虽然不是每个浏览器都支持 picture 元素，还可以使用 Picturefill polyfill。

　　加载以及显示策略

　　多图渲染的情况下，结合懒加载，又要保证图像的渲染速度，类似知乎的渲染效果，我们可以使用 progressive-jpg。

　　相比 baseline-jpg 一行一行的扫描并显示图片，当然都是从弱网角度考虑，这种显示可能更合适。但还是有不足。参考了下知乎和 medium 等网站的示图效果，可以进行模拟：

　　先创建一个为图片占位的预留块，在这个块中会展示图片。块中有另外一个块会先设置一个 padding-bottom 来撑起块的高(即保证需要加载图像也是这个宽度高度的比例)。这样防止图片在加载时发生重排。

　　加载一个轻量版的图片。这个时候会先请求一个图片的缩略图。并使用模糊 blur 效果

　　等滚到到可视区域，加载高质量图，加载完毕后取消模糊效果。

　　medium 下的实现方式更为复杂点，是在缩略图加载完毕后，绘制到 canvas 画布，再通过一个自定义的模糊函数，类似于 StackBlur，同时请求高质量图。等到请求完，再隐藏画布。

　　简单的例子可参照 “https://codepen.io/SitePoint/pen/VPVEZm”。