How do I tell srcset attribute to load NO images when viewport smaller than certain size

Question

I'm having trouble understanding how to keep srcset from loading any images on screens < 768px.

I've tried the code below but the sizes attribute doesn't seem to do what you may think. Below loads 1024.jpg on all screen sizes:

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

Or the picture element, if it would honor an empty srcset but it only "hints" to which image a browser should load.

Answer 1

The other answer isn't really satisfying. In general with srcset you give the browser the choice to select an image candidate. While you can assume which image is taken on certain devices. You don't have any control. Each image in srcset can be taken.

So if you want to control, what is used or not used, you need to use the picture element.

Here are 3 examples. If the viewport is 768px or wider the 'img/1024.jpg' image is downloaded, otherwise a data uri or a broken img is selected.

<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>

Although the first and the second code example are absolutely valid. There is currently some discussion to allow this by simply omitting the srcset (see code example 2). See this discussion here: https://github.com/ResponsiveImagesCG/picture-element/issues/243

Answer 2

There's a really simple solution to this which works without <picture>. It is likely not intended to be used this way, but it works very well.

Attach a 1x1px image and it will be used whenever sizes == 0vw. In this case this would be true for everything under 768px:

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

I'm aware that this is not answering the OP's question of "loading NO images", but it's relatively close and you can reference the same 1x1 px image in all other situations, which means it's not gonna be downloaded there.

One caveat: In the following situation I believe the browser might decide to use the 1x1px image already from 512px and downwards even though we specify 100px

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

This is due to the fact that the browser takes whatever is closest to the desired size in this case 1 is closer to 511 than 1024 is... not sure though Edit: This situation could quite easily be fixed by attaching a 200w image as well, which you would likely do in any case

Answer 3

EDIT:

To say it simply, you can't.

Removing/hiding an image element must be done in CSS with media queries, or with Javascript.

The srcset and sizes tags are useful for choosing the content source of an image element, but it cannot control the existence or visibility of the element.

The srcset and sizes tags are intended to augment responsive CSS. Their values should follow whatever breakpoints are defined in CSS.

---

srcset

srcset is a list of available images the browser can choose from with their respective widths.

According to the latest spec, it will choose only from that list when populated:

For backwards compatibility, one of the URLs is specified in the img element's src attribute. In new user agents, the src attribute is ignored when the srcset attribute uses w descriptors.

Therefore, it sees 1024.jpg as the only choice and ignores default.jpg.

Add the default image to srcset (with the correct w descriptor - here I assume default.jpg is 768px wide):

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

---

sizes

sizes tells the browser how wide the image will be when a given media query is true. This helps the browser calculate which image to pick from srcset.

Currently, sizes="(min-width: 768px) 768px, 100vw" is telling the browser:

"The image will be 768px wide if the viewport is larger than 768px, otherwise the image will be full width when the viewport is less than 768px."

I assume you don't want to use a 1024px image when the viewport is less than 768px.

To hint at a small image when the viewport is less than 768px, use max-width: 768px instead:

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