Mobile LCP – Post Featured Images

The code is working as i can see it in the HTML:

https://www.screencast.com/t/zG9cruAW0

NOTE: I had to clear the browser caches ( a few times weirdly ) to get it to load the latest version of the site.

Part of the browser image selection process is to calculate the number of pixels it ideally wants to display the image. Simply put the calculation is:

Displayed Image size * Device Pixel Resolution (DPR) = the ideal image size.

In your example URL and your chrome mobile test thats:

300px x 3.0 ( Moto 4G DPR of 3.0 ) = 900px.

And in the src-set it has 300, 750 and 1000px sizes to choose from. The first two aren't large enough to fulfil the requirement so it loads the 1000px.

And as you can see here, by using a custom mobile view and setting the DPR to 1.0

https://www.screencast.com/t/RT9A83S1N

With the code i provided it now loads the 300px image.

Thats how src-set works...