仅以特定分辨率加载图像答案

【问题标题】：Load images only in certains resolutions仅以特定分辨率加载图像
【发布时间】：2015-04-24 22:57:32
【问题描述】：

我的页面顶部有一个标题，其中有两张图片，其中一张仅在视口较大 (> 940) 时可见，另一张仅在移动设备上显示。为了实现这种行为，我使用了 Bootstrap 3 及其定义的媒体查询集：

<header class="container">
   <div class="row">

      <div class="col-lg-4 hidden-xs">
        <img src="img/hi-res-logo.png">
      </div>

      <div class="col-xs-12 visible-xs">
        <img src="img/small-logo.png">
      </div>

  </div>
</header>

到目前为止，没什么大不了的，前面的代码做得很好，但我想要的是防止在移动设备上加载大图像文件本身以避免不必要的数据消耗......那么如何实现呢？

【问题讨论】：

可以使用srcset img 属性。 html5rocks.com/en/mobile/high-dpi/#toc-srcset
这真的取决于浏览器。如果父母有display: none，一些浏览器足够聪明，不会下载图像——关于这个主题有几个问题。你也可以只有一张图片（较小的尺寸）并使用 JS 来替换 SRC。
@kel，请赐教，我没有找到与这个特定主题相关的内容
@JoshGuzman 这是一篇关于图像未根据浏览器下载的帖子，stackoverflow.com/questions/12158540/…。就图像 SRC 而言，有一些插件可以让您从中获取更多信息或使用，例如 luis-almeida.github.io/unveil -- 希望对您有所帮助！
@kel wooa，这是一个好的开始！谢谢老兄。

标签： javascript html image css responsive-design

【解决方案1】：

将图像设置为背景并在 CSS 中使用媒体查询。

<div class="container">
    <div class="row">
         <div class="col-lg-4" id="my-div"></div>
    </div>
</div>

CSS

@media (max-width: 700px) {
    #my-div {
        background-image: url('img/small-logo.png');
    }
}
@media (min-width: 700px) {
    #my-div {
        background-image: url('img/hi-res-logo.png');
    }
}

【讨论】：

我认为重新定义一些媒体查询比使用用户的移动数据更好！

【解决方案2】：

**I think it is better to use single media query in this case.**   
#my-div {
    background-image: url('img/hi-res-logo.png.png');
    width: 100px; /*image width - please change as per your image*/
    height: 100px; /*image height - please change as per your image*/
}
@media (min-width: 700px) {
   #my-div {
       background-image: url('img/small-logo.png');
       width: 200px; /*image width - please change as per your image*/
       height: 200px; /*image height - please change as per your image*/
   }
}

【讨论】：