Woocommerce 产品图片模糊

Posted 2023-03-05

【中文标题】Woocommerce 产品图片模糊

【英文标题】：Woocommerce blurry product image

【发布时间】：2016-09-10 12:48:54

【问题描述】：

http://doubleknityarn.com.hk/

这是我的网页主页。一切都很好，除了网站中间的 4 张产品图片太模糊。

我已经做了“Regenerate Thumbnail”插件，在woocommerce产品下的显示设置中调整图片大小，但还是无法获得更清晰的照片。

有人可以帮忙吗？我已经尝试了很多方法。

【问题讨论】：

如果您遇到此类问题：最好联系您的主题店主作者团队并打开支持票证或查看他们的支持线程是否存在类似问题。现在在chrome上可以了。您必须在不同的平台和浏览器中进行测试……

【参考方案1】：

如果我显示其中一张图片的网址，我得到：

…/wp-content/uploads/2016/04/DSC09923.jpg?resize=116%2C145

在/DSC09923.jpg 之后的最后是?resize=116%2C145，这意味着resizing in 116px x 145px，因为这个定义的小图像以缩放版本显示，我的意思是放大了 250%。所以他们变得模糊。查看html生成的代码：

<img   src="http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=350%2C435" 
class="lazyOwl wp-post-image" 
 
data-src="http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=350%2C435" 
srcset="http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=350%2C435 350w, 
http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=570%2C708 570w, 
http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=116%2C145 116w, 
http://i0.wp.com/yarnhk.com//wp-content/uploads/2016/04/DSC09923.jpg?resize=190%2C236 190w" 
sizes="(max-width: 116px) 100vw, 116px" style="opacity: 1;">

我不知道你是如何在首页显示那4张图片的，所以我很难找出真正的问题。您需要为该图像指定尺寸：“中”或“大”……

您可能需要在 wooCommerce > 设置 > 产品 > 显示中重新配置尺寸和硬裁剪选项...

【讨论】：

我也看到了捕获的html代码，但是不知道接下来要做什么。在 Commerce > 设置 > 产品 > 显示中，我已将图像大小调整为：catelog 350x435pixels；单个 570 x 708 像素；缩略图 350 x 435 像素。我用“Visual Composer”来做我的主页。希望我能得到更多的建议。

我正在使用 Visual Composer，其中我使用“多个/特定产品”来展示 4 个产品（通过使用它们的 ID）。

那么你必须在视觉作曲家中更改设置。如果您获得许可证，您可能会在高级主题的支持线程或 VC 支持中被问到……这是最好的选择。

我可以分享我从 Visual Composer 找到的代码：[/vc_column_text][products ids="6975,6980,6977,86,11583,11587,88,11808,11807"][/ vc_column][/vc_row][vc_row columns_ background_style="normal" css=".vc_custom_1445415612639margin-bottom: 50px !important;"]

我尝试了很多方法，包括重新加载产品照片，添加具有相同产品照片的新产品项目并使用新名称等，现在照片似乎恢复正常：www。 doubleknityarn.com.hk。你可以看看，不知道是不是临时的。