Using SRCSET with Images and Featured Images

Browsers which understand the srcset attribute will automatically choose the image which corresponds between the defined sizes and available space. Most of modern browsers support this, older browsers still found in the wild will gracefully fall back and simply use the image linked in the src attribute. There is no additional Javascript needed to activate, the presence of the correct srcset is enough.

If you want to test if your srcset attributes are working the way you expect, you can use the developer tools (normally shown on pressing F12) of your browser. Make the browser window small enough, so one of the smaller versions should be loaded. Open the Network tab of the developer tools, then load the page. Now you see all loaded files and you can check which versions of the images werre loaded. If you now resize the window to a larger size, you should see, that the larger images get loaded additionally.

Another way to visualize which images are getting loaded is to replace the size versions with images of different content directly via ftp, so you can easily spot which one was loaded.