When I resize the viewport, smaller images are downloaded. And when I resize to wider viewports, the larger images appear to be re-downloaded. So I can end up with dozens of requests in my dev tools when there are only 5 or so images referenced in the HTML.
A native implementation would probably do the best job of ensuring that re-requests don't happen on resize, regardless of cache settings, though I'd think the average image caching configuration would probably ensure resize re-requests are hitting cache as it is.
For this though, I wonder if keeping already-used image objects on-hand would avoid the issue entirely...
Using the div version all images are downloaded once, but it appears that the src is replaced while resizing even if it isn't needed, resulting in a lot of aborted connections.
@scottjehl i also recognized this behaviour when scalling the browser windows down.
Maybe you can just make and if clause to check following:
that would go against the art direction benefit of this technique
hmm....but target is better performance -> so this could improve it.
When i move my browser window from fullscreen to a smaller size -> every image gets reloaded....
Maybe this could be just an configuration option?
Since we're aiming to match native picture support at this point, I'm going to close this out. Per the spec at this point, the native element will act as a controller for an img tag, and I'm not sure how to avoid those requests to cache without toggling the image's src. Happy to reopen if there's a workaround to explore here. Thanks!