说到响应式网站，我们都知道弹性布局、弹性图片、媒体查询，更多指的是布局的方式，比如说使用max-width: 100%，这样让图片的宽度随着容器的大小而改变，响应式设计让网站能兼容各种屏幕设备，但是在我们流量这么昂贵的时代，让一个小屏幕的手机去加载一张为大屏幕PC设计的几百K的图片，虽然这张图片会看起来非常的清晰，但是疯涨的流量消耗肯定会让用户非常的苦恼，而且我们也需要加载更长的时间才能把页面加载出来。

我们开发的目的不是挑战用户的耐心和金钱，而是让用户在使用的过程中有更好的感受，在这种情况下加载与 用户设备相匹配的小图片，即快速，又不会影响用户的体验，帮用户节省了成本，同样的，你在PC端加载一张小图片也不会影响用户的体验，帮用户节省了成本，同样的你在PC端加载一张小图片，虽然速度很快但是放大后模糊的效果会让用户觉得网站很Low很不专业,而且PC大部分使用的wifi，我们不需要去接受太多的流量，那么如何解决刚才说的这些问题呢？响应式图片的概念也就随之产生了，响应式图片，不仅仅是指图片的排版和布局，更多的还指可以根据设备大小而加载不同的图片，虽然这个过程增加了一点点UI设计师的工作量，不过那会大大改善用户的体验，那么想要响应式图片如何来实现呢？