响应式设计下img标签如何设置才在移动端不加载图片

一个响应式页面中有一张图片

<img src="./pic.jpg" alt=""/>

我想要这张图片在移动端(比如max-device-width: 720px)下的时候隐藏该图片，但是直接display:none的话我发现浏览器还是会加载，对于移动端来说这应该是不能忍的了吧？

那该如何才能实现在移动端完全移除这张图片呢？
有想过

<img src="./pic.jpg" srcset="./null.jpg 1.5x, ./null.jpg 2x, ./null.jpg 3x, " alt=""/>

（null.jpg 为一张不存在的图片）
但是一想总有什么不对劲，假如是一只1倍像素比的姥爷机那不还是加载了么（应该还有很大的兼容性问题）？

这里想问下大家有没有合适的方案可以解决(使用html&css)？谢谢！

非常感谢各位和 @aikin 给的文章，其中很详细的给出了几种css下比较完美的方案，但都是将图片作为background-image加载。还是想再求下有没有作为img单独标签和css表达的方法。