JSFiddle - React, Tailwind, and code Playground

by Julien Roche

HTML

<img src="https://i.imgur.com/sTHYAYd.png"
  srcset="https://i.imgur.com/sTHYAYd.png 480w,
          https://i.imgur.com/HV7jg69.png 720w,
          https://i.imgur.com/DDonskP.png 960w,
          https://i.imgur.com/rNEitEH.png 1200w"
  sizes="(min-width: 1200px) 1200px,
         (min-width: 960px) 960px,
         (min-width: 720px) 720px,
         480px">

JavaScript

/*

This is a quick example showing how the HTML5 attributes "srcset" and "sizes" work together.

1. Resize the result window (the bottom right square)
2. See which one of the 4 images gets loaded

Note that if you resize _after_ load, and multiple images are loaded, only the largest one will be shown.

If you want to see the smaller ones (like "480.png"), you will need to resize _first_, then click "Run" again.

Resources:
http://htmlreference.io/element/img/
https://cloudfour.com/thinks/responsive-images-101-part-4-srcset-width-descriptors/

*/