JSFiddle - React, Tailwind, and code Playground

by Iván Pereira

HTML

<img id="myImage" 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/ 280w,
              http://lorempixel.com/1000/300/animals/ 430w,
              http://lorempixel.com/1320/400/cats/ 610w,
              http://lorempixel.com/1420/500/abstract/ 1000w,
              http://lorempixel.com/1600/600/fashion/ 1220w" />

CSS

img {
  width: 100%;  
}

JavaScript

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

window.onresize = function() {
    
    if(!isNaN(delay)) 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"));

}