WP 4.4. responsive loads normal image after loading the responsive image

This is more of a general srcset and browser question, not a WordPress specific question.

However, in general, you can’t predict what browsers will do with the srcset information. For your specific example, it appears that you failed to clear the cache completely between your reloads. Note the 304 response indicating that your browser already has the image cached (304 is the Not Modified response).

In such a situation, it’s perfectly reasonable for a browser to simply use the largest image that it already has in the cache. You’ve already got the higher quality version, might as well use it. Using a lower quality image here won’t save you any network bandwidth, which is kind of the whole point of srcset to begin with. Chrome’s algorithm is not simply “use the image size that fits”.

So, in order to really test, you have to clear cache and reload. Every time.

Some background information on how different browsers use srcset’s:
https://stackoverflow.com/questions/28683635/is-there-something-wrong-with-my-srcset-definition-or-is-current-browser-suppor

Edit: As Mark Kaplun points out in the comments, it’s entirely feasible for a browser to choose a larger image based on the connection speed. Chrome, for example, will always choose the largest image if it knows that the image is on the local filesystem (like you’re viewing a local .html file). It may also know about “localhost” and choose the large image then too. You don’t get to force the issue, you can’t peek behind the curtain. Not really. The goal of srcset is to give browsers the information to allow them to choose the image. Not for you to be able to decide for them which image is used in which circumstances.

Leave a Comment