Ad

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:

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%2Fcat-toys&tab=desktop 

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!

Ad

Answer

The image itself may not be inside collection.liquid

Different themes have different places but usually you'll find

-includes/product-grid-item.liquid

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 https://help.shopify.com/themes/liquid/filters/url-filters#img_url

Ad
source: stackoverflow.com
Ad