Wordpress responsive images - Selecting wrong image on retina screens

Question

I've been working hard on trying to get responsive images working on this website I'm building and just when I thought it's going well, I look at it on the iPad retina screen and it's selecting the wrong image. Not only is it the wrong size but it's also displaying as landscape, not portrait. I have no idea why it's doing this as I've created custom image sizes for all the different screen sizes and also have created the XL version to be used on retina screens.

Here is the HTML of the image with the srcset and sizes.

<img class="scene_element scene_element--fadeinup" src="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg" 
srcset="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017.jpg 3684w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-768x1151.jpg 768w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1010x1514.jpg 1010w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg 505w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-415x622.jpg 415w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-720x1080.jpg 720w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-360x540.jpg 360w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-293x440.jpg 293w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1110x800.jpg 1110w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-455x306.jpg 455w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-355x238.jpg 355w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-640x600.jpg 640w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-320x300.jpg 320w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-2340x1258.jpg 2340w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1170x629.jpg 1170w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-940x627.jpg 940w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-555x400.jpg 555w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1910x1274.jpg 1910w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-955x637.jpg 955w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1574x1250.jpg 1574w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-787x625.jpg 787w" 


sizes="(-webkit-min-device-pixel-ratio: 1.5) 1010px, 
(max-width: 767px) 767px, (min-width: 768px) and (max-width: 991px) 415px, 
(min-width: 992px) and (max-width: 1199px) 415px, 
(min-width:1200px) 505px, 505px" itemprop="thumbnail" alt="Image description" >

As retina screens are double pixels i first tried adding this to the sizes to target iPads but nothing happened:

(min-width: 2048px) 1010px 

The funny thing is i have an image with the dimensions of 1010px and have specified in the sizes that when it's double the pixels to use this image. Instead it's using this size: 940x627.jpg

Can anyone explain why this is happening please?

Answer 1

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.