购物。如何缩小 collection 页面缩略图 (kB)。经典主题

Shopify. How to make collection page thumbnails smaller in size (kB). Classic theme

我正努力在 google pagespeed insights 中获得更高的分数。

这是一个 collection 页面的示例:

https://ezpet.net/collections/cat-toys

这是 link 其 google pagespeed 见解:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fezpet.net%2Fcollections%2Fcat-toys&tab=desktop

它说的第一件事是我应该优化缩略图,因为它们的尺寸非常大。当我打开页面代码时,我注意到所有缩略图都有 "large" 参数,如下所示:

//cdn.shopify.com/s/files/1/1520/1022/products/cat-toys-catit-style-scratcher-with-catnip-1_.jpg?v=1478120415

所以也许某个地方有一个选项可以通过将此参数 "large" 更改为喜欢 "medium" 或类似的东西来缩小这些图像。尚未在 collection.liquid 模板中找到任何与之相关的内容(我猜这是负责 collection 页面外观的模板)

感谢任何帮助!

图像本身可能不在里面 collection.liquid

不同的主题有不同的地方,但通常你会发现

-includes/product-grid-item.液体

或者它可能被称为 product-loop.liquid 无论如何请在您的 includes 文件夹中查看类似名称的东西

在那个文件中你会想要寻找这个

<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">

您需要将 'large' 更改为 'medium' 或其他任何内容。

Shopify 的优秀开发人员现在实际上给了我们一个新的 img 尺寸标签,如果您够勇敢,您可以使用它来缩小图像尺寸以达到绝对完美!

在这里阅读 https://help.shopify.com/themes/liquid/filters/url-filters#img_url

好的,对于那些可能正在寻找此问题答案的人,您需要转到您的 Shopify 帐户 > 在线商店 > 主题 > 编辑 HTML/CSS > 片段 > product-grid-item.liquid 在那里你需要找到这一行:

<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">

并将img_url : 'large'更改为img_url : 'medium'

这将使 Google PlageSpeed Insights 对 collection 页面图像大小感到满意。此外,它可能会使这些页面加载速度更快,虽然我没有注意到其中的区别。