Wordpress responsive images - Selecting wrong image on retina screens

Right people, i managed to find out why the page wasn't loading the correct images. As i mentioned in my question, Wordpress by default will only load the images in the srcset with the same aspect ratio. If you want to include custom image sizes with a different ratio you need to add them via the wp_calculate_image_srcset function.

The problem with doing this, is that all custom sizes will be loaded into every images srcset and the browser will select the image based on the closest width and ratio.

Secondly, I realised that the image which Wordpress bases the aspect ratio on is the original image size rather than the custom size you load into the page. So where i had the portrait image with the custom size of add_image_size('portrait-case-study-lg', 505, 757, true); Wordpress was actually getting the aspect ratio from the original file which was 2000px x 1500px. As this had a different ratio, the image sizes i created for the portrait sizes were being ignored and instead the image with the closest aspect ratio was being chosen.

How i fixed this was to remove the function wp_calculate_image_srcsetwhich added the sizes into the srcset and instead re size the original images in Photoshop to have the same aspect ratio as the smaller images.

So for example, instead of having the custom image size of portrait-case-study-xl which was used to crop the original image file. I removed this and instead uploaded the original image at this size.

add_image_size('portrait-case-study-xl', 1010, 1514, true);add_image_size('portrait-case-study-lg', 505, 757, true);

This means Wordpress now selects the 'portrait-case-study-lg' on different screen sizes as the aspect ratio is the same as the original.

It would good if Wordpress could allow you to remove the original image from the srcset as it now means i can't automatically the create the correct size when the client uploads an image to a page.