Is it possible to recalculate the `srcset` image used if browser window is resized?

You can use

var img = document.getElementById('resizeMe');

window.onresize = function() {
    img.outerHTML = img.outerHTML;
}

Which will cause the HTML to be sent through the parser again, causing the browser to reload the image according to the srcset.

Of course you should probably include some logic to detect if the screen size has changed to a size outside of the current range so the image isn't reloaded every single time the user resizes the window slightly.


Or, you could clone the node, insert it before the current node, then remove the old node.

var img = document.getElementById('resizeMe');

window.onresize = function() {
    var clone = img.cloneNode(true);
    img.parentNode.insertBefore(clone, img);
    img.remove();
}

Which will also cause the parse to re-render the html, but will consume more resources.