Shopify Question posted in
The Shopify help center can be found here.

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

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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search