How to force loading of lower-resolution images when using srcset

Question

I need a banner to display at full width across many screen sizes. To accomplish this, I have 4 versions of the banner image.

[email protected] (2880x640)
banner-long.jpg (1440x320)
[email protected] (1440x640)
banner-short.jpg (720x320)

I'm using the srcset attribute.

<img
    src="/images/interface/banner-long.jpg"
    srcset="/images/interface/[email protected] 2880w,
            /images/interface/banner-long.jpg 1440w,
            /images/interface/[email protected] 1439w,
            /images/interface/banner-short.jpg 720w">

However, if I start with a wide browser so that the long version loads, and then shrink the width of the browser, the short version never loads because the long version is cached. The browser (Chrome) figures it's already download a higher-resolution version, so it doesn't bother loading the smaller version. However, the whole point of having a smaller version is that the aspect ratio is more suitable for mobile devices (i.e. the aspect ratio is smaller). I'd like to force the smaller image asset to load

Is there any way to do this?

alexander farkas · Accepted Answer · 2015-08-19 19:35:13Z

5

This is not the way you should do this. What you want is called artdirection and you need to use the picture element for this. There you can use source elements with media attributes.

<picture>
    <source 
        srcset="/images/interface/[email protected] 2880w,
            /images/interface/banner-long.jpg 1440w" 
        media="(min-width: 800px)"
    />
    <img srcset="/images/interface/[email protected] 1439w,
            /images/interface/banner-short.jpg 720w" />
</picture>

edited Aug 19, 2015 at 19:35

answered Aug 16, 2015 at 10:44

alexander farkas

14.2k4 gold badges43 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hayden Schiff · Accepted Answer · 2015-08-10 18:38:56Z

1

If you're building this HTML dynamically, just append ?t=<current unix timestamp> to the URL of every image. That way, the browser will have to load them from the server every time because the URL will always be different.

Alternatively, you could configure your web server to send "don't cache" headers when it sends those images (but this is probably more difficult and overly complicated).

I do question the use of srcsets for this purpose. It might work, but I'm not sure srcset is the best tool for the job, or that srcsets are intended to be used in this way. If you're switching the actual image, it seems like that ought to be done by two different image tags, each with its own srcset (which you can show/hide at different resolutions), or with some JS solution of some kind.

edited Aug 10, 2015 at 18:38

answered Aug 10, 2015 at 18:34

Hayden Schiff

3,33022 silver badges44 bronze badges

2 Comments

David Jones Over a year ago

The cachebusting technique works, but only on page refresh (and I would prefer that the images be cached). I'm starting to think, as you say, that this may not be the right tool for the job. I was hoping not to have to load two images only to hide one of them, but that's probably what I'll do.

alexander farkas Over a year ago

Please see my answer: stackoverflow.com/questions/31926597/…

Collectives™ on Stack Overflow

How to force loading of lower-resolution images when using srcset

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related