1
<img src="media/640x320_image.jpg" srcset="media/640x320_image.jpg 320w, media/640x1280_image.jpg 768w" sizes="(min-width:768px) 768px, 320px">

What is wrong with the srcset and sizes above? The 640x1280_image.jpg always shows, when I make my window small it doesn't change.

poashoas
  • 1,790
  • 2
  • 21
  • 44
  • Which browser are you testing with? – user247702 Jul 08 '16 at 23:11
  • Google chrome latest – poashoas Jul 08 '16 at 23:13
  • 1
    Seems to work in Firefox for me, but not in Chrome. Not sure why, Chrome supports this. `` – user247702 Jul 08 '16 at 23:18
  • 1
    You have pointed me to the right direction, thank you. Chrome is not retrieving a new image when it already has downloaded a bigger before. So I should wrap it in a wrapper to make sure the height is not exceeded: http://stackoverflow.com/questions/28155861/google-chrome-version-40-srcset-attribute-problems – poashoas Jul 09 '16 at 07:41

1 Answers1

1

I don't understand media/640x1280_image.jpg 768w. Do you really use a 640px wide image, but tell the browser it is 768px wide?

It breaks everything in the srcset algorithm, for sure.

It looks like you want to use Art Direction to have images of different proportions based on the viewport width.

If this is what you want, you need to use <picture>, because srcset alone doesn't provide this.

Nicolas Hoizey
  • 1,954
  • 1
  • 17
  • 24