关于woocommerce中的产品图片尺寸的问题
最近在做的一个站，客户要求的产品主图是一张gif，我在上传后发现在详情页的时候，页面渲染时拿到的图片并不是我的原图，所以gif不动，但是woocommerce和我用的主题又没有提供一个设置来让我将产品详情页的图片设为原图，查找资料后发现：
WooCommerce 基本不会“自动拿原图”（full）来做列表/详情展示，它通常会按你在 Woo 设置里定义的尺寸去取 缩略图/单品图，再配合 srcset 让浏览器选合适的分辨率
这段话的意思就是woocommerce的设定就是出于性能考虑就是不会去拿你的原图，它会声明一些尺寸来告诉wordpress我的哪些地方会拿哪些尺寸的图片，如果你用elementor你可以通过上传一张图片来看到当前woocommerce声明的这些尺寸，如下图
其中woocommerce single对应的就是产品详情页的主图部分，声明尺寸后，woocommerce就会去问wordpress要对应尺寸的图片。
回到wordpress，当我们上传一张图片后，wordpress其实会为这张图片去生成不同尺寸的版本。也可以通过上面的方式去看到它的版本，如下图
要注意的是，这里的尺寸版本并不会强行拉伸图片，他会尊重图片的比例，比如说我图片的原图宽度是1920px,那么在生成的大于这个尺寸的版本中（比如说2048px*2048px）他也不会强行拉伸图片，而是保持比例，那么其实这个版本就是这张图片的原图。如下图
在小尺寸版本中他依然会保持图片比例，因此会产生裁剪。如下图
所以当我们设置woocommerce产品图片时，woocommerce会根据woocommerce single定义的尺寸，去wordpress生成的不同尺寸的版本里去找符合这个定义的图片版本返回给前端展示。并且是向上取得，比如woocommerce定义的是1920，而wordpress有1024和2048的版本，那么他就会取2048的版本。
知道这些之后我们就知道要想让详情页显示原图只需要修改woocommerce定义的woocommerce single，将它的尺寸定义的和原图尺寸一致，即可在详情页显示原图，如下图，在后台→外观→自定义→Woocommerce→Product Images下即可调整，同时在这里还可以调整产品目录中使用的图片尺寸，并且可以自定义它的显示比例，但这会造成裁剪。
最后需要注意，wordpress有一个大图自动缩放阈值：大图自动缩放阈值：2560px。一旦图片的任意边 > 2560px ，WordPress 会自动生成一个 -scaled 版本，并且很多情况下把这个 -scaled 当作“full”来用，不会保留你真正的原图。
