Solved

Products not using thumb_src but full size images

  • 13 January 2023
  • 4 replies
  • 107 views

Userlevel 1
Badge +2

Hi team @ Klaviyo,

My templates are over the clipping size for Gmail due to the Product Block using full size image src from Shopify. I can see in event properties when looking at the data that there is a thumb_src for line_items. Is there a possibility to use that instead?

Cheers

Chris

icon

Best answer by Omar 15 January 2023, 10:57

View original

4 replies

Userlevel 4
Badge +7

@ChrisTough I have been using this took to resize images before adding to klaviyo;https://squoosh.app/

It has helped a lot with image size/ loading speed etc, quite amazing how much smaller it can make your images without losing definition.

Sean

Userlevel 7
Badge +44

Hi @ChrisTough,

Clipping only takes place when the html code of the email exceeds 102kb. Image size has nothing to do with this.

The good thing is that Klaviyo has started adding an email clipping warning to the preview section of emails so that should help.

Check out this link for more info: https://help.klaviyo.com/hc/en-us/articles/115000591251-Why-is-my-email-being-clipped-

 

As for actions to take:

  • make sure you're not using to many blocks in the email. 3 things that can help
    • i.e. having different mobile and desktop blocks
    • overusing the sections (we noticed this adds additional weight to the email)
    • make emails shorter with less elements so the html size goes down.

Let me know if that helped?

 

Omar Lovert // Polaris Growth // Klaviyo Master Platinum Partner

Klaviyo - CRO - Customer Value Optimization Specialist

Userlevel 1
Badge +2

Hi Omar, Thanks for the response. Given your answer, I think the problem may have multiple parts now.

  1. Email clipping
  2. Image file size too large

Point one is solved thanks to your answer of reducing sections which we’ll do.

Unfortunately for point 2, I think the product images coming from our catalogue are the original size (2000px x 3000px) and not the thumbnail source forcing the templates to resize the large images which breaks in certain clients.

I found a similar thread with an answer which will be useful to part solve some sections with using a dynamic table block.

However it doesn’t solve the issue when we need to use the product block. Will investigate more. Thanks again.

Userlevel 1
Badge +2

Hi Sean. Thanks for your response. Yeah we’ve used squoosh in the past. On our storefront, we’re able to transform the images by appending `_WIDTHxHEIGHT` to the end of the filename. e.g

https://cdn.shopify.com/s/files/1/0649/2317/3098/products/a590645_hr6_200x300.jpg 

This allows us to use Shopify’s image transform feature to handle images responsively for different parts of the site so we don’t worry what marketing uploads.

My issue with the Product Block, is it uses the full size image source when I can see in event data that there’s also a thumbnail source which is provided. I’m not sure if it’s Klaviyo’s or Shopify’s API that is doing this, and if it’s available for the Product Block as it is when using a Dynamic Table block.

 

Reply