当视口小于特定尺寸时，我该如何告诉srcset属性不加载任何图像？

Question

我不太明白如何防止在屏幕宽度小于 768px 时加载srcset 中的任何图像。

我尝试了下面的代码，但是 sizes 属性似乎不能按预期工作。 以下代码会在所有屏幕尺寸上加载 1024.jpg：

<img 
  src="default.jpg"
  srcset="img/1024.jpg 1024w" 
  sizes="(min-width: 768px) 768px, 100vw"
/>

或者说，如果元素使用了empty srcset，但它仅仅是“提示”浏览器应该加载哪张图片，那么可以使用元素。

- Ben Racicot

Answer 1

另一个答案并不能完全令人满意。通常情况下，使用 srcset 可以让浏览器选择图像候选项。虽然你可以假设在某些设备上会选择哪个图像，但是你没有任何控制权。每个 srcset 中的图像都可以被选择。

因此，如果你想要控制使用或不使用的内容，你需要使用 picture 元素。

以下是3个示例。如果视口宽度大于等于768px，则下载 'img/1024.jpg' 图像，否则会选择 data uri 或损坏的 img。

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="img/1024.jpg" media="(min-width: 768px)">
  <!--[if IE 9]></video><![endif]-->
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Image">
</picture>

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" media="(max-width: 768px)">
  <!--[if IE 9]></video><![endif]-->
  <img src="img/1024.jpg" alt="Image">
</picture>

<!-- you can also write (but this makes it invalid) -->

<picture>
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="img/1024.jpg" media="(min-width: 768px)">
  <!--[if IE 9]></video><![endif]-->
  <img alt="Image">
</picture>

尽管第一和第二个示例代码绝对有效，但目前有一些讨论，通过简单省略srcset（请参见代码示例2）来允许此操作。在此处查看此讨论：https://github.com/ResponsiveImagesCG/picture-element/issues/243

- alexander farkas

---

@alexanderfarkas 做得好！我之前认为，如果 srcset 为空，那么就会呈现一个空的 img src，但为什么不是这样还是有点不理解。 - Ben Racicot

什么是指定的空srcset？ - alexander farkas

我知道这是一个旧帖子...但IE怎么办？空的img意味着在那些不支持<picture>标签的旧浏览器上根本没有任何图像。 - Jav Rok

@JavRok 你可以按照自己的意愿设置图片。如果需要，你可以在IE中使用img[src]并将其覆盖为img[srcset]。 - alexander farkas

Answer 2

有一个非常简单的解决方案，可以在没有<picture>的情况下使用。

它可能不是用于此目的，但它非常有效。附加一个1x1像素的图像，它将在sizes == 0vw时使用。在这种情况下，对于所有小于768px的内容，都将使用此图像：

<img 
  src="default.jpg"
  srcset="img/null.jpg 1w
          img/1024.jpg 1024w" 
  sizes="(max-width: 768px) 0vw, 100vw"
/>

我知道这不是回答 OP “不加载任何图片”的问题，但相对接近，你可以在所有其他情况下引用相同的1x1像素图像，这意味着该图像将不会被下载。

但有一个注意点： 在以下情况下，即使我们指定为100px，我认为浏览器可能会在512px及以下时就使用1x1像素图像。

<img 
  src="default.jpg"
  srcset="img/null.jpg 1w
          img/1024.jpg 1024w" 
  sizes="(max-width: 100px) 0vw, 100vw"
/>

这是由于浏览器选择最接近所需大小的图像，因此在此情况下，数字1比1024更接近511......不过不确定。

编辑：这种情况可以通过附加一个200w的图像来轻松解决，在任何情况下您都可能会这样做。

- evry.one

---

这与规范相悖，并且没有考虑Chrome的缓存候选选择。您需要使用图片进行处理。 - alexander farkas

是的，您需要图片有几个原因。而且这仍然需要一个 HTTP 请求... 我实际上已经向构建 picture 元素规范的重要人物提出了这个问题。 - Ben Racicot

Answer 3

编辑：

简单来说，你不能。

移除/隐藏图像元素必须通过CSS使用媒体查询或JavaScript完成。

srcset和sizes标签可用于选择图像元素的内容来源，但无法控制元素的存在或可见性。

srcset和sizes标签旨在增强响应式CSS。它们的值应遵循CSS中定义的任何断点。

---

srcset

srcset是浏览器可以从中选择具有相应宽度的可用图像列表。

根据最新规范，当填充时，它仅从该列表中选择：

为了向后兼容，其中一个URL在img元素的src属性中指定。在新用户代理中，当srcset属性使用w描述符时，将忽略src属性。

因此，它将1024.jpg视为唯一选择并忽略default.jpg。

将默认图像添加到srcset（带有正确的w描述符-在这里我假设default.jpg宽度为768px）：

<img 
  src="default.jpg"
  srcset="default.jpg 768w, img/1024.jpg 1024w" 
  sizes="(min-width: 768px) 768px, 100vw"
/>

---

sizes

sizes 告诉浏览器当给定的媒体查询为真时，图像的宽度是多少。这有助于浏览器计算从 srcset 中选择哪个图像。

目前，sizes="(min-width: 768px) 768px, 100vw" 告诉浏览器：

"如果视口大于 768px，则图像宽度为 768px，否则在视口小于 768px 时，图像将占据整个宽度。"

我猜您不希望在视口小于 768px 时使用 1024px 的图像。

要在视口小于 768px 时提示使用小图像，请改用 max-width: 768px：

<img 
  src="default.jpg"
  srcset="default.jpg 768w, img/1024.jpg 1024w" 
  sizes="(max-width: 768px) 768px, 100vw"
/>

- Substantial

---

嘿，感谢您的说明，非常感激。不过问题是“如何在屏幕宽度小于768像素的情况下显示/下载没有图像的srcset” :) 可以实现吗？ - Ben Racicot

明白了，我没有仔细阅读问题。请检查我的修订答案。我还编辑了问题标题以使其更具体。好问题。 - Substantial

你关于尺寸的评论让我感到很困惑。如果您想要从0到768像素实现流动，并在更大的视口上以768像素为固定宽度，那么min-width似乎是合适的选择。我猜您可能会反其道而行之地设计布局，但这并不特别“移动友好”。 :) - zcorpan