Best way to load an image only on screen widths over a certain size?

Technical Q&A
1

Hi

Is it possible to have an image only download after a certain screen width (say viewports 1000px width and above)?

The idea is for it not to download at all on smaller screens, mobiles phone s etc.

I’m really looking for an solution using srcset etc, but I have not been able to get that to work. No matter what I do, some version of the image from the srcset is still downloaded on mobile as well.

The closest I got was to set the default img in a without a url, but then I lost a fallback image for browsers that done support <picture scrset"">

e.g.

The only way I’ve found so far is to set it as a CSS background image and put it in a media query.

e.g. @media and screen (min-width 1000px) { .class { background: url(“image_url.jpg”); }}

Is this possible, and if so, what’s the correct way to do it?

Thanks

2

You can use srcset for this. Here are the developer.mozilla.org docs for it (works in all modern browsers):

Responsive_images

3

Thanks. I’ll have to look into that more. I did look into srcset but couldn’t get it to work as I require.

4

I’ve tried and tried to get this to work using srcset but can’t. If anyone can post an example that should work I’d be grateful. I couldn’t srcset to work at all. No matter what I do it always shows the

img-1200x1200-srcset.jpg image, no matter the screen width.

Does the fact that I’m testing this locally affect how the browser decides which image to load?

My test code:

<img
srcset=“img-300x300-srcset.jpg 300w, img-1200x1200-srcset.jpg 1200w,”
sizes=“(max-width: 499px) 300px, (min-width: 500px) 500px”
src=“img-600x600-src.jpg”
alt=“alt”