购物。如何缩小 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 见解:
它说的第一件事是我应该优化缩略图,因为它们的尺寸非常大。当我打开页面代码时,我注意到所有缩略图都有 "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 页面图像大小感到满意。此外,它可能会使这些页面加载速度更快,虽然我没有注意到其中的区别。
我正努力在 google pagespeed insights 中获得更高的分数。
这是一个 collection 页面的示例:
https://ezpet.net/collections/cat-toys
这是 link 其 google pagespeed 见解:
它说的第一件事是我应该优化缩略图,因为它们的尺寸非常大。当我打开页面代码时,我注意到所有缩略图都有 "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 页面图像大小感到满意。此外,它可能会使这些页面加载速度更快,虽然我没有注意到其中的区别。