Wordpress 响应图像 - 在视网膜屏幕上选择错误的图像
Wordpress responsive images - Selecting wrong image on retina screens
我一直在努力尝试让响应式图像在我正在构建的网站上运行，就在我认为它进展顺利的时候，我在 iPad 视网膜屏幕上查看它，它正在选择错误的图像。它不仅尺寸错误，而且还显示为风景，而不是肖像。我不知道为什么要这样做，因为我已经为所有不同的屏幕尺寸创建了自定义图像尺寸，并且还创建了用于视网膜屏幕的 XL 版本。
这是带有 srcset 和大小的图像 HTML。
<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" >
由于视网膜屏幕是双像素，我首先尝试将其添加到目标尺寸 iPads 但没有任何反应：
(min-width: 2048px) 1010px
有趣的是我有一张尺寸为 1010 像素的图像，并在尺寸中指定了当它是像素的两倍时使用该图像。相反，它使用这个尺寸：940x627.jpg
谁能解释一下为什么会这样？
对的人，我设法找出页面未加载正确图像的原因。正如我在问题中提到的，默认情况下，Wordpress 只会以相同的宽高比加载 srcset 中的图像。如果您想包含具有不同比例的自定义图像尺寸，您需要通过 wp_calculate_image_srcset 函数添加它们。
这样做的问题是，所有自定义尺寸都将加载到每个图像 srcset 中，并且浏览器将 select 基于最接近的宽度和比例的图像。
其次，我意识到 Wordpress 基于宽高比的图像是原始图像尺寸，而不是您加载到页面中的自定义尺寸。因此，在我拥有自定义尺寸为 add_image_size('portrait-case-study-lg', 505, 757, true); 的肖像图像的地方，Wordpress 实际上是从原始文件中获取宽高比，即 2000px x 1500px。由于比例不同，我为纵向尺寸创建的图像尺寸被忽略，而是选择具有最接近纵横比的图像。
我解决这个问题的方法是删除将尺寸添加到 srcset 中的功能 wp_calculate_image_srcset，而是在 Photoshop 中重新调整原始图像的大小，使其具有与较小图像相同的纵横比。
因此，例如，而不是使用自定义图像大小 portrait-case-study-xl 来裁剪原始图像文件。我删除了它，而是上传了这个尺寸的原始图片。
add_image_size('portrait-case-study-xl', 1010, 1514, true);
add_image_size('portrait-case-study-lg', 505, 757, true);
这意味着 Wordpress 现在 select 在不同的屏幕尺寸上是 'portrait-case-study-lg'，因为纵横比与原始屏幕相同。
如果 Wordpress 允许您从 srcset 中删除原始图像就好了，因为它现在意味着我无法在客户端将图像上传到页面时自动创建正确的尺寸。
我一直在努力尝试让响应式图像在我正在构建的网站上运行，就在我认为它进展顺利的时候，我在 iPad 视网膜屏幕上查看它，它正在选择错误的图像。它不仅尺寸错误，而且还显示为风景，而不是肖像。我不知道为什么要这样做，因为我已经为所有不同的屏幕尺寸创建了自定义图像尺寸，并且还创建了用于视网膜屏幕的 XL 版本。
这是带有 srcset 和大小的图像 HTML。
<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" >
由于视网膜屏幕是双像素，我首先尝试将其添加到目标尺寸 iPads 但没有任何反应：
(min-width: 2048px) 1010px
有趣的是我有一张尺寸为 1010 像素的图像，并在尺寸中指定了当它是像素的两倍时使用该图像。相反，它使用这个尺寸：940x627.jpg
谁能解释一下为什么会这样？
对的人，我设法找出页面未加载正确图像的原因。正如我在问题中提到的，默认情况下，Wordpress 只会以相同的宽高比加载 srcset 中的图像。如果您想包含具有不同比例的自定义图像尺寸，您需要通过 wp_calculate_image_srcset 函数添加它们。
这样做的问题是，所有自定义尺寸都将加载到每个图像 srcset 中，并且浏览器将 select 基于最接近的宽度和比例的图像。
其次，我意识到 Wordpress 基于宽高比的图像是原始图像尺寸，而不是您加载到页面中的自定义尺寸。因此，在我拥有自定义尺寸为 add_image_size('portrait-case-study-lg', 505, 757, true); 的肖像图像的地方，Wordpress 实际上是从原始文件中获取宽高比，即 2000px x 1500px。由于比例不同，我为纵向尺寸创建的图像尺寸被忽略，而是选择具有最接近纵横比的图像。
我解决这个问题的方法是删除将尺寸添加到 srcset 中的功能 wp_calculate_image_srcset，而是在 Photoshop 中重新调整原始图像的大小，使其具有与较小图像相同的纵横比。
因此，例如，而不是使用自定义图像大小 portrait-case-study-xl 来裁剪原始图像文件。我删除了它，而是上传了这个尺寸的原始图片。
add_image_size('portrait-case-study-xl', 1010, 1514, true);
add_image_size('portrait-case-study-lg', 505, 757, true);
这意味着 Wordpress 现在 select 在不同的屏幕尺寸上是 'portrait-case-study-lg'，因为纵横比与原始屏幕相同。
如果 Wordpress 允许您从 srcset 中删除原始图像就好了，因为它现在意味着我无法在客户端将图像上传到页面时自动创建正确的尺寸。