title: Wordpress responsive images - Selecting wrong image on retina screens
body: <p>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. </p>
  
  <p>Here is the HTML of the image with the srcset and sizes. </p>
  
  <pre><code>&lt;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" &gt;
  </code></pre>
  
  <p>As retina screens are double pixels i first tried adding this to the sizes to target iPads but nothing happened:</p>
  
  <pre><code>(min-width: 2048px) 1010px 
  </code></pre>
  
  <p>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</p>
  
  <p>Can anyone explain why this is happening please? </p>