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.

score 15 · Answer 1 · answered Mar 29 '15 at 12:55

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

Excellent comment @alexanderfarkas. I was hoping that if a specific srcset was empty then that's what would be rendered... an empty img src... Can't understand why it wouldn't. — Ben Racicot, Mar 29 '15 at 19:44
I know is an old thread... but what about IE? Emtpy img means there would not be any image at all on those old browsers that don't support . — Jav Rok, Sep 05 '17 at 13:04
@JavRok You can make your picture as you want. You can use img[src] for IE and override it with img[srcset] if you want. — alexander farkas, Sep 07 '17 at 17:05

score 4 · Answer 2 · answered Aug 17 '15 at 13:18

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

This goes against the spec and doesn't take chromes cached candidate selection into account. You need to use picture. — alexander farkas, Aug 17 '15 at 19:14
Yes you need picture for several reasons. Also this would still need an http request... I've actually brought this issue up to the movers and shakers building the picture element spec. — Ben Racicot, Aug 18 '15 at 00:09

Substantial · Answer 3 · 2014-10-27T13:56:39.703

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

Hey thanks for the breakdown, much appreciated. However The question is 'how to display/download NO image on screens less than 768px wide with srcset' :) can it be done? — Ben Racicot, Oct 26 '14 at 20:50
Got it. I didn't read the question carefully enough. Check my revised answer. I also edited the question title to be more specific. Good question. — Substantial, Oct 27 '14 at 13:57
Your comment about sizes doesn't make much sense to me. min-width seems appropriate if you want fluid from 0 to 768px and fixed at 768px for larger viewports. I suppose you could have a layout where it is the other way around, but it wouldn't be particularly "mobile-friendly". :) — zcorpan, Mar 30 '15 at 06:23

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

3 Answers3

EDIT:

srcset

sizes

Linked