Firefox and Safari are straightforward and logical. In Firefox the image is changed whenever the DPR value changes (i.e. when the user zooms). Safari treats DPR as a constant and therefore never changes the image. Their behaviour is thus consistent with their treatment of DPR.

In Edge the image is adjusted when you zoom in, but not when you zoom out. Reloading the page restores the correct image in all cases.

In Chrome and Opera the image is not adjusted when you zoom; only when you reload. HOWEVER, a reload will always cause the highest-density image in your cache to be displayed, even if the current DPR calls for a lower-density one.

General note: browsers are allowed to do as they please with img-w. Thus any and all bugs below can be defended by “It’s how we choose to do it.” Whether that makes img-w a useful tool is unclear.

Firefox adjusts the image when you resize and zoom, but it has issues at very high or very low zoom levels: although the image size is adjusted correctly, the the image source is not. I haven’t been able to figure out what’s going on.

Safari picks the correct image when the page loads, but does not adjust it to zoom or resize.

In Edge the image is adjusted when you resize the window to make it larger, but not when you make it smaller. Its reaction to zooming is confused, and I don’t understand it. Reloading the page gives the correct image when you’ve resized, but the zooming problems persist.

Chrome and Opera, finally, oh my! Zooming and resizing change the image size, but not necessarily its source. Zooming does nothing to the source. Resizing to make the window larger changes the source; smaller does not. (This is the same as Edge). Finally, when you reload the page you get the largest image that’s currently in the cache.
Unlike with img-x, where retaining the highest-density image makes some sort of sense, retaining the largest image with img-w does not make sense at all. It could be than a smaller image is better suited to the current zoom level or window width, and Chrome ignores that.

In general I advise you to use the picture element instead, even though it doesn’t work in Safari.

img.currentSrc

The source that’s currently being applied to the image. May change with zooming.

All browsers handle zooming and resizing correctly.

picture.querySelector('img').currentSrc

The source that’s currently being applied to the image. May change with zooming. Note that this is a property of the <img> tag, not the <picture> tag.