How to display smaller image files for collections and thumbnails outside the product page

Store Design
1

My Shop: https://lilrosmidwestbazaar.myshopify.com

I’m using the Trade theme (for now) and the product images used for the collection cards, search results, etc. outside the product page make use of the same image file the product page does, though shrunk down and sized by page code. Obviously the product page has a fairly large hi-res photo. Using that large image for small thumbnails and collection cards is inefficient and slows page load times - especially on mobile devices, which is the source of 70-80% of our web traffic.

How can I make use of smaller versions of the large photo used on the product page?

I’m in the process of converting my hundreds of product photos from jpg to webp and I know this will help, but I tested the first two products I converted and the improvement was fairly minimal. I continue to get suggested fixes about using properly sized images. I realize the code for collection cards, search results, etc is likely making used of the product photo that is tagged as index 1, so is using a small photo as index 1 for each product and using code on the product page to “hide” the photo at index 1 maybe the easiest and most efficient way to go?

I used to be a developer so I am familiar with coding, but I’ve been out of that game for 12 years and this is the first I’ve ever heard of Liquid. And I was just getting familiar with CSS when I dropped out of the development field.

Thanks

1 Like
2

You can use shopify built-in image size parameters to serve smaller versions of your product images. This can be achieved by using the Image yrl filter with a size parameter, such as “small”, to reduce the image size and improve page load times. Alternatively, consider using a third-party app or custom coding solution to create and serve smaller image versions. To hide the small photo at index 1 on the product page, you can use CSS or Liquid to conditionally render the image only on certain pages.

3

I found this thread but wasn’t sure if it was what I needed:

https://community.shopify.com/c/shopify-design/show-different-images-in-collection-then-product-page/m-p/2107234

4

https://community.shopify.com/c/shopify-design/show-different-images-in-collection-then-product-page/m-p/2107234

I tried the code found at this thread, but it did nothing. It served up the small image I had in position 1, but it still showed this smaller image on the product page along with the bigger image in position 2…