Suppressing downloads for hidden images using srcset + sizes

Question

I'm looking for a solution to suppress/limit downloads for images that are hidden at certain breakpoints, using srcset. I'd like to avoid using background images and javascript.

Wondering if this is a legitimate approach:

@media screen and (max-width: 768px) {
  .container {
    display: none;
  }
}

<div class="container">
  <img src="http://lorempixel.com/1200/1200" 
       srcset="http://lorempixel.com/1200/1200 1200w, http://lorempixel.com/1000/1000 1000w, http://lorempixel.com/800/800 800w, https://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif 1w" 
       sizes="(max-width: 768px) 1px, 100vw, (min-width: 1920px) 50vw,">
</div>

The idea being that where the viewport ≤ 768px (where the containing div is hidden), the user is served a 1px transparent gif rather than a weightier image.

score 1 · Answer 1 · edited May 23 '17 at 12:10

With this approach, you still make the browser download the 1px gif.

Unfortunately, there is currently no way to really prevent downloads on some viewport sizes with only HTML.

You can either:

use an inline data-URI encoded 1px transparent GIF in the srcset, instead of an external image
use CSS Media Queries to hide the container, but be careful how you do it: https://timkadlec.com/2012/04/media-query-asset-downloading-results/

You can also join this discussion to explain your use case and help the standard evolve on this topic.

Suppressing downloads for hidden images using srcset + sizes

1 Answers1

Linked