使用display:none with images的技巧是为它们分配一个id。这是不需要很多代码使其工作。下面是一个使用媒体查询和3个样式表的示例。一个用于手机，一个用于平板电脑，一个用于台式机。我有三张图片，手机，平板电脑和台式机的图片。在手机屏幕上只会显示手机的图像，平板电脑只会显示平板电脑的图像，桌面电脑则显示桌面电脑的图像。 下面是一个代码示例，使其工作:

源代码:

<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>

不需要媒体查询的手机CSS。是img#手机让它工作:

img#phone {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }

img#tablet {display: none;}
img#desktop {display: none;}

平板css:

@media only screen and (min-width: 641px) {
img#phone {display: none;}

img#tablet {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }
}

和桌面css:

@media only screen and (min-width: 1141px) {
img#tablet {display: none;}

img#desktop {
    display: block;
    margin: 6em auto 0 auto;
    width: 80%;
    }
}

祝你好运，并让我知道它是如何为你工作的。

不。如果您正在考虑节省手机用户带宽，图像将像往常一样加载，并且仍将使用用户的带宽。你能做的就是使用媒体查询和过滤你想要加载图像的设备。你的图像必须设置为一个div的背景图像等，而不是一个标签，因为图像标签将加载图像，无论屏幕大小和媒体查询设置。

另一种可能是使用<noscript>标记，并将图像放在<noscript>标记中。然后使用javascript删除noscript标签，因为你需要的图像。通过这种方式，您可以使用渐进增强按需加载图像。

使用我写的这个polyfill来读取IE8中<noscript>标签的内容

https://github.com/jameswestgate/noscript-textcontent

** 2019回答**

在正常情况下显示:none不阻止图像被下载

/*will be downloaded*/

#element1 {
    display: none;
    background-image: url('https://picsum.photos/id/237/100');
}

但是如果一个祖先元素有display:none，那么后代的图像将不会被下载

/* Markup */

<div id="father">
    <div id="son"></div>
</div>


/* Styles */

#father {
    display: none;
}

/* #son will not be downloaded because the #father div has display:none; */

#son {
    background-image: url('https://picsum.photos/id/234/500');
}

其他阻止下载映像的情况:

1-目标元素不存在

/* never will be downloaded because the target element doesn't exist */

#element-dont-exist {
    background-image: url('https://picsum.photos/id/240/400');
}

2-两个相等的类加载不同的图像

/* The first image of #element2 will never be downloaded because the other #element2 class */

#element2 {
    background-image: url('https://picsum.photos/id/238/200');
}

/* The second image of #element2 will be downloaded */

#element2 {
    background-image: url('https://picsum.photos/id/239/300');
}

你可以在这里观看:https://codepen.io/juanmamenendez15/pen/dLQPmX

HTML5 <picture>标签将帮助您根据屏幕宽度解析正确的图像来源

显然，在过去的5年里，浏览器的行为并没有太大的变化，许多人仍然会下载隐藏的图像，即使在它们上设置了display: none属性。

尽管有一个媒体查询的解决方案，它只能在图像被设置为CSS背景时才有用。

虽然我认为这个问题只有一个JS解决方案(延迟加载，图片填充等)，但似乎有一个很好的纯HTML解决方案是HTML5的开箱即用。

这是<picture>标签。

MDN是这样描述的:

HTML <picture>元素是一个容器，用于为其中包含的特定<img>指定多个<source>元素。浏览器将根据页面的当前布局(图像将出现在框的约束)和它将显示在设备上(例如普通或hiDPI设备)选择最合适的源。

下面是如何使用它:

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

背后的逻辑

只有当所有媒体规则都不应用时，浏览器才会加载img标记的源代码。当浏览器不支持<picture>元素时，它将再次回退到显示img标记。

通常，您会将最小的图像作为<img>的源，这样就不会为较大的屏幕加载较重的图像。反之亦然，如果应用了媒体规则，则不会下载<img>的源文件，而是下载相应的<source>标记的url内容。

这里唯一的缺陷是，如果浏览器不支持该元素，它将只加载小图像。 另一方面，在2017年，我们应该以移动优先的方式思考和编码。

在有人太兴奋之前，这里是当前浏览器对<picture>的支持:

桌面浏览器

移动浏览器

关于浏览器支持的更多信息，您可以在can I use。

好的方面是html5please的句子是用一个回退。我个人打算采纳他们的建议。

关于标签的更多信息可以在W3C规范中找到。这里有一个免责声明，我觉得这很重要:

图片元素与看起来相似的视频和音频元素有些不同。虽然它们都包含源元素，但当元素嵌套在图片元素中时，源元素的src属性没有意义，而且资源选择算法是不同的。同样，图片元素本身也不显示任何东西;它只是为它所包含的img元素提供了一个上下文，使它能够从多个url中进行选择。

它说的是，它只帮助你在加载图像时提高性能，通过提供一些上下文。

你仍然可以使用一些CSS魔法来隐藏小设备上的图像:

<style>
  picture { display: none; }

  @media (min-width: 600px) {
    picture {
      display: block;
    }
  }
</style>

<picture>
 <source srcset="the-real-image-source" media="(min-width: 600px)">
 <img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>

因此浏览器不会显示实际的图像，只会下载1x1像素的图像(如果您多次使用它，它可以被缓存)。但是要注意，如果浏览器不支持<picture>标记，即使在桌面屏幕上也不会显示实际图像(因此您肯定需要在那里进行填充备份)。

答案不像简单的是或不是那么简单。看看我最近做的一个测试的结果:

在Chrome浏览器:所有8个截图-*图像加载(img 1) 在Firefox中:仅加载当前正在显示的1个截图*图像(img 2)

所以在深入挖掘之后，我发现了这个，这解释了每个浏览器如何处理加载基于css显示的img资产:none;

摘自博客文章:

Chrome and Safari (WebKit): WebKit downloads the file every time except when a background is applied through a non-matching media-query. Firefox: Firefox won't download the image called with background image if the styles are hidden but they will still download assets from img tags. Opera: Like Firefox does, Opera won't load useless background-images. Internet Explorer: IE, like WebKit will download background-images even if they have display: none; Something odd appears with IE6 : Elements with a background-image and display: none set inline won't be downloaded... But they will be if those styles aren't applied inline.