Shopify. How To Make Collection Page Thumbnails Smaller In Size (kB). Classic Theme

- 1 answer

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

Here's an example of a collection page:

Here's a link to its google pagespeed insights: 

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:


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!



The image itself may not be inside collection.liquid

Different themes have different places but usually you'll find


or it might be called product-loop.liquid anyhow have a look in your includes folder for something names like that

in that file you'll want to look for this

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

you need to chage 'large' to 'medium' or whatever.

The awesome developers at Shopify have actually gave us a new img size tag now, if your feeling brave you can use that to narrow down the image size to be absolutly perfect!

Read about it here