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

Question

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

<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表达的方法。

Answer 1

Media Query & Asset Downloading Results

Answer 2

@media (min-width: 720px){
  .img{
    background-image: url('...');
  }
}

小于720时不加载。

Answer 3

用background-image默认不加载，大于 720的时候再加载
或者用js在加载前把img的dom给remove掉

Answer 4

如果你这个必须要img标签加载的话就只能先通过dom加载完成然后js获取浏览器宽度后判断加载了。

按照你的需求还是应该从css的层面来解决。

Answer 5

纯CSS的话应该不行，因为会创建dom节点，如果非要CSS，一个比较作死的办法是把图片放到:before中当背景，小屏就不需要before了，不过那样还不如直接用背景图片

Answer 6

还是写出来一下，Media Query & Asset Downloading Results
文章里面一个比较靠谱大方法就是把图片当作一个背景图像展现，然后将元素包裹一层父元素，media query时将父元素设置display:none

贴上文章里面的代码：

<div id="test3">
    <div></div>
</div>

#test3 div {
    background-image:url('images/test3.png');
    width:200px;
    height:75px;
}
@media all and (max-width: 600px) {
    #test3 {
        display:none;
    }
}