img not responding to srcset specified dimensions

Question

I wanted to implement the responsive images using srcset, as described here, so the image src that the user loads is the most similar to his resolution.

The thing is that I made this test and it doesn't respond to viewport changes,

<img src="https://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="https://lorempixel.com/620/200/sports/ 280w,
              https://lorempixel.com/1000/300/animals/ 430w,
              https://lorempixel.com/1320/400/cats/ 610w,
              https://lorempixel.com/1420/500/abstract/ 1000w,
              https://lorempixel.com/1600/600/fashion/ 1220w" />

jsfiddle: http://jsfiddle.net/ad857m1r/9/

Any idea what I'm missing?

its working as a respnsive.Could you clear me what you want? — Chonchol Mahmud, Jan 07 '16 at 10:58
@ChoncholMahmud I don't see the image changing it's src attribute (it should be different and different aspect ratio for the defined resolutions). The image is the same all along... — Toni Michel Caubet, Jan 07 '16 at 11:00
Maybe this will help: [stackoverflow.com/a/29495023/729033](http://stackoverflow.com/a/29495023/729033/) — KrisD, Jan 07 '16 at 13:02
@ToniMichelCaubet Sorry for not being more specific. This solution works only when starting at small size and expanding viewport to desktop size (please clean cache before trying). It does not happen the other way around as you already have a larger image in cache and the user agent does not need to download new image data of what is considered same image. Depending on what you finally want to achieve, use img tag in case your are just switching between resolutions/pixel densities or use picture tag if you want to make that so called "art direction". — KrisD, Jan 07 '16 at 16:19
Thanks for carifiying that, so what would you suggest? The thing is that i see only two changes: the initial and then the 430w. The other imagen won't ever show (and my screen is 1600+ px width ) — Toni Michel Caubet, Jan 08 '16 at 09:48

ElChiniNet · Accepted Answer · 2019-06-14T12:59:31.640

The srcset attribute is interpreted by the browser at first load, then the loaded image is stored in cache and the browser might not load any other image until you clear the cache and reload the page.

If you want that the srcset is reinterpreted on each resize event of the page, you need to update it adding a random variable at the end of each url, then the browser will reload the correct one for that screen size.

I've added a delay to this process to reduce the number of times that it is executed. You'll notice that this practice forces the browser to download the correct image at each resize and this is bad for bandwidth. I do not recommend the use of this technique, let the browser decides which image it uses on each situation. I think that viewport resize is not a common situation in an everyday environment. Maybe is better for your purposes the use of picture element (using some approach to making it compatible with old browsers) as @KrisD said.

var img = document.getElementById("myImage");
var srcset = img.getAttribute("srcset");
var delay;

window.onresize = function() {

    clearTimeout(delay);

    delay = setTimeout(refreshImage, 500);

}

function refreshImage() {

    var reg = /([^\s]+)\s(.+)/g;
    var random = Math.floor(Math.random() * 999999);

    img.setAttribute("srcset", srcset.replace(reg, "$1?r=" + random + " $2"));

}

jsfiddle

I'm glad to hear that ;) [Here](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) you can find more info. — ElChiniNet, Jan 11 '16 at 01:08
css-tricks is great, I read this and more articles before on css-tricks, just never knew about the browser caching of these images ^^ — seahorsepip, Jan 11 '16 at 01:56

score 0 · Answer 2 · answered Jan 13 '16 at 23:41

when you try to apply the code in the example for thelink you mentioned you made few edits for the code in the example:

1- when you are setting the sizes attribute values you set the last one and the default to 280 as the example explained butthe value before it directly was 580 not as you did 280

2- when you use one of the dummy generators of the images you made a slash in the end of the image link, then space before binding the image with its size and this has been translated by the image generator site with a text on the image you need to change the code to the following to be as the same explained in the example link you mentioned

<img src="https://lorempixel.com/400/200/sports/"
  alt=""
  sizes="(min-width:1420px) 610px,
         (min-width:1320px) 500px,
         (min-width:1000px) 430px,
         (min-width:620px)  580px,
         280px"
  srcset="https://lorempixel.com/620/200/sports 280w,
          https://lorempixel.com/1000/300/animals 430w,
          https://lorempixel.com/1320/400/cats 610w,
          https://lorempixel.com/1420/500/abstract 1000w,
          https://lorempixel.com/1600/600/fashion 1220w" />

score 0 · Answer 3 · edited Jan 17 '16 at 00:13

You just copy and paste it. First thing you need to know you have to arrange the size of the images as increasing order and then you will need to adjust according to that.

For Example

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

By this you can view your result, I just tried this and its working

img {
  width: 100%;  
}

<img src="http://lorempixel.com/400/200/sports/"
      alt=""
      sizes="(min-width:1420px) 610px,
             (min-width:1320px) 500px,
             (min-width:1000px) 430px,
             (min-width:620px)  280px,
             280px"
      srcset="http://lorempixel.com/620/200/sports/ 620w,
              http://lorempixel.com/1000/300/animals/ 1000w,
              http://lorempixel.com/1320/400/cats/ 1320w,
              http://lorempixel.com/1420/500/abstract/ 1420w,
              http://lorempixel.com/1600/600/fashion/ 1600w" />

Notes -> Call your image as image.jpg then it would be more effective.

img not responding to srcset specified dimensions

3 Answers3