0

I am currently trying to make better responsive images on my site. After some research I found the the srcset and sizes attributes.

My goal here is the following:

  • When the screen size is above 600px or below 300px I want to serve a 250x250 image
  • When it is between these two values I want to serve a 350x350 image
  • Also I want higher resolution images for screens which have a higher pixel ratio

This is what I came up with. But it is not working as I though it would. The small 250x250 is always being served.

<img src="https://placehold.it/250"
  srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"
   sizes="((max-width: 600px) and (min-width: 300px) and (min-resolution: 2)) 350px, (min-resolution: 2) 250px, ((max-width: 600px) and (min-width: 300px)) 350px, 250px" />

And I have one additional question:
In my tests I found out that the browser won't load new images when the window is resized so that a different image should be served. Is it possible to do that?

BrainStone
  • 3,028
  • 6
  • 32
  • 59
  • 1
    Which browser? Some of the major browser [don't support or don't fully](http://caniuse.com/#feat=srcset) support this. – GolezTrol Jul 23 '15 at 22:59
  • I tested it on Firefox and Safari iOS. – BrainStone Jul 23 '15 at 23:00
  • According to the link above: *"iOS Safari (8.4) supports the subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor)"*. Now I'm not an expert on this feature (not by far), but maybe it's related. – GolezTrol Jul 23 '15 at 23:02
  • But still. Firefox (39) should support this. I wasn't really surprised that iOS Safari doesn't fully support it. – BrainStone Jul 23 '15 at 23:04
  • True that. I don't know the answer then. – GolezTrol Jul 23 '15 at 23:07
  • if you want to rescale your images just use max-width: x%; and height:auto; – Rachel Gallen Jul 23 '15 at 23:16
  • I'm already using this. I want to use these dynamic file size to reduce the amout of data the client has to download. – BrainStone Jul 23 '15 at 23:46

1 Answers1

0

Ok. After some tidious research I found out that I did not understand the sizes-attribute correctly.

The following is how I can achieve what I want:

<img src="https://placehold.it/250"
  srcset="https://placehold.it/700 700w, https://placehold.it/500 500w, https://placehold.it/350 350w, https://placehold.it/250 250w"
   sizes="(max-width: 600px) calc(100vw - 50px), 250px" />
BrainStone
  • 3,028
  • 6
  • 32
  • 59