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

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