如何在不使用JavaScript的情况下阻止移动端下载指定响应式图片？

我有一段响应式图片的实现代码：

<picture> 
  <source media="(max-width: 767px)" srcset="//placehold.it/350x150&text=Up+to+767" /> 
  <source media="(max-width: 991px)" srcset="//placehold.it/350x150&text=Up+to+991" /> 
  <img src="//placehold.it/570x200&text=Desktop+image" class="responsive-image" /> 
</picture>

我希望在不使用JavaScript的前提下，阻止屏幕宽度≤767px的设备下载“Up to 767”对应的图片。之前尝试用CSS隐藏图片：

@media (max-width: 767px) { .responsive-image { display: none; } }

但这只是视觉上隐藏了图片，图片资源还是会被浏览器下载，这不是我想要的结果。我还试过给要隐藏的图片设置空的srcset属性，但此时浏览器会自动加载下一张匹配的图片，也不符合需求。

解决方案：用空白占位图替换目标资源 #

要彻底避免小屏设备下载目标图片，我们可以结合CSS媒体查询和base64空白占位图来实现，全程不需要JavaScript：

步骤1：给目标<source>添加类名 #

先给第一个针对小屏的<source>标签加上一个类名，方便CSS定位：

<picture> 
  <source class="mobile-only-source" media="(max-width: 767px)" srcset="//placehold.it/350x150&text=Up+to+767" /> 
  <source media="(max-width: 991px)" srcset="//placehold.it/350x150&text=Up+to+991" /> 
  <img src="//placehold.it/570x200&text=Desktop+image" class="responsive-image" /> 
</picture>

步骤2：用CSS替换srcset为空白图 #

在小屏媒体查询中，把mobile-only-source的srcset替换成一个1x1的空白GIF（base64编码，体积几乎可以忽略），同时隐藏图片元素：

@media (max-width: 767px) {
  .mobile-only-source {
    srcset: url('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==') !important;
  }
  .responsive-image {
    display: none;
  }
}

为什么这个方法有效？ #

浏览器在处理<picture>时，会优先匹配符合当前媒体条件的<source>并加载其srcset资源。通过把小屏对应的srcset替换成极小的空白图，我们既避免了下载原目标图片，又不会触发浏览器加载后续的图片源（因为已经匹配到了有效的srcset），同时视觉上也隐藏了图片元素，完全满足你的需求。

另一种思路：调整媒体查询逻辑 #

如果你的需求是小屏时完全不需要显示任何图片，也可以直接修改<source>的媒体查询，让小屏时没有匹配的图片源，再配合CSS隐藏整个<picture>：

<picture> 
  <!-- 只在≥768px的屏幕才匹配这个源 -->
  <source media="(min-width: 768px) and (max-width: 991px)" srcset="//placehold.it/350x150&text=Up+to+991" /> 
  <img src="//placehold.it/570x200&text=Desktop+image" class="responsive-image" /> 
</picture>

@media (max-width: 767px) {
  picture {
    display: none;
  }
}

这种方式更简洁，但灵活性稍差，适合小屏完全不需要图片的场景。

内容的提问来源于stack exchange，提问作者Chris