How to use image srcset properly in HTML5

Question

I have setup the following img srcset:

<img srcset="http://via.placeholder.com/320x150 320w,
             http://via.placeholder.com/480x150 480w,
             http://via.placeholder.com/800x150 800w"
        src="http://via.placeholder.com/800x150"
      sizes="(max-width: 320px) 280px,
             (max-width: 480px) 440px,
             800px"
      width="200" />

No matter how I set the width of the img, or how I resize the window, chrome always downloads and displays the 800px wide image. What gives? Adding sizes attribute also has no effect. I referenced this article.

Demo here: http://jsfiddle.net/7ek62m13/1/

Dennis Spierenburg Dennis Spierenburg · Accepted Answer · 2018-06-14T20:19:35

You are using srcset the correct way. Srcset is for when you have big images and you have smaller formats on smaller devices. If you load the biggest image there is no need to load another smaller image (cause a srcset is meant for the same image). This results in when you open this code on your phone it will display the smallest image, but when you are on desktop it will open the regular image. If you upscale your browser again srcset will replace your image with a bigger image but it will never swap back to a lower image. I hope I made it a bit clearer.

How to use image srcset properly in HTML5

1 Answers