WooCommerce 视网膜图像支持 - 不包含在 srcset 中

Posted 2023-02-24

【中文标题】WooCommerce 视网膜图像支持 - 不包含在 srcset 中

【英文标题】：WooCommerce Retina Image Support - Not included in srcset

【发布时间】：2017-05-04 22:13:10

【问题描述】：

我最近安装了WP Retina 2x，它会在我的服务器上生成@2x 图像。但是，当使用 PictureFill 或 WordPress 响应式方法时，srcset 不包含任何 @2x 图像或 2x 声明：

我还应该提到，我的媒体使用 S3 Offload Lite 插件存储在 Amazon S3 上。当生成的@2x 图像上传到 S3 时，retina 插件无法检测到它们，即使使用专业版的“Over HTTP Check”功能也是如此。

有谁知道这是为什么，或者如何解决？

【问题讨论】：

请检查并粘贴仪表板下的“显示错误日志”，以便我们清楚了解发生了什么

我不完全确定 WP Retina 2x 是如何工作的，但我认为它注册了一些与视网膜显示器兼容的新图像尺寸。当在 WordPress 中注册新的图像大小时，它不会立即生成图像，它只会在图像上传时生成图像。为了强制你的图像重新生成（包括视网膜大小的图像），我通常安装并运行 [这个插件][1]。 [1]：wordpress.org/plugins/regenerate-thumbnails

这个话题还活跃吗？您是否尝试过更新您的 wordpress 并再次重新生成缩略图？也许它不会调用，因为图像在生成的数据库中还不存在

【参考方案1】：

@2x srcset 中的代码 在 WordPress 中不再需要。

现在 srcset 属性在 WordPress 中的工作原理：浏览器使用sizes 属性和屏幕 ppi（屏幕密度）从数组（srcset 属性）决定要加载的图像分辨率。

所以，您需要的一切都是 设置正确的尺寸属性。而且您不需要任何使@2...wordpress 和woocommerce 支持srcset 和sizes 属性的插件。

来自 woocommerce 真实网站的示例： iphone 7/8 具有 2x 设备像素比率，但 iphone X 具有 3x 设备像素比率 - 每个设备加载不同分辨率的图像