[Solved] How to make collection page thumbnails smaller in size (kB). Classic theme

Tourist
8 0 1

Hello!

I am trying to achieve a higher score in google pagespeed insights.

Here's an example of a collection page:

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

Here's a link to its google pagespeed insights:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fezpet.net%2Fcollections%2F...

First thing it says is that I should optimize thumbnails as they are significantly large in size. When I open page code I notice that all the thumbnails has "large" parameter, like this:

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

So maybe somewhere there's an option to make these images smaller by changing this parameter "large" to like "medium" or something like that. Haven't found anything related to it in collection.liquid template (I guess this is the template that is responsible for collection page looks)

Any help appreciated!

,,,,,^..^,,,,, ~
0 Likes
Tourist
8 0 1

bump :)

,,,,,^..^,,,,, ~
0 Likes
Tourist
8 0 1

Did I pick the correct discussion forum for this question? I feel like this should be a common problem for a lot of shopify users but it is strange that I've got no suggestions as of yet

,,,,,^..^,,,,, ~
0 Likes
Tourist
8 0 1

Ok, for those who might be looking for the answer for this question is you need to go to your Shopify account > Online Store > Themes > Edit HTML/CSS > Snippets > product-grid-item.liquid
and there you will need to find this line:

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

and change

img_url : 'large'

 to

img_url : 'medium'

This will make Google PlageSpeed Insights happy about collection pages images sizes. Also it will probably make these pages load faster, altho I didn't notice the difference.

,,,,,^..^,,,,, ~
0 Likes
Highlighted
New Member
1 0 0
I found that when I use HD pictures from www.stocksnap.io
(uncopy write pictures)
That they are the correct size for my collection page items.
I did not see a resize button on that shopify page anywhere.
Hope this helps
0 Likes