Skip to main content
Solved

Text looks blurry on images which include text uploaded to email

  • January 19, 2023
  • 3 replies
  • 1370 views

Forum|alt.badge.img+2
  • Contributor I
  • 1 reply

When I upload pictures that include text the text appears slightly blurry and not sharp. 

my emails are 600px wide 

Any idea how to fix this?

 

 

Best answer by stephen.trumble

Hey @LaraS 

One of the prevailing standards for improving the crispness of a rendered image in an email is to insert an image 2x the desired size and then reduce the image size in your template. There are two ways to approach this:

  1. Insert a large, crisp version of your image into your template, then click Edit Image and resize to your preferred dimensions
  2. Insert a natively larger image (i.e. 600px wide) and display at a smaller size (i.e. 300px width) using CSS; to take this approach, you'll need to insert your image into a text block and adjust the CSS source code


I would first suggest trying to upload a larger image into the image library, and then cropping it within the template. 

Hope this helps!

View original
Did this topic or the replies in the thread help you find an answer to your question?

3 replies

Forum|alt.badge.img+8
  • Problem Solver III
  • 79 replies
  • January 19, 2023

@LaraS which graphics package are you using? What is the resolution? Are you using png or jpeg.

I find that Canva works well.. then compressing the image (containing your text) within squoosh.app editor. Key is to make sure the original image is as sharp as possible ( and if using squoosh then can be a large file to start with )

 

Sean


Forum|alt.badge.img+2
  • Author
  • Contributor I
  • 1 reply
  • January 19, 2023

Thank you for your response. I use Canva. I have tried both as png and jpegs and upload these files directly to Klaviyo at the moment.  I am not familiar with Squoosh. I will look into that thank you


stephen.trumble
Community Manager
Forum|alt.badge.img+60
  • Community Manager
  • 1518 replies
  • Answer
  • January 23, 2023

Hey @LaraS 

One of the prevailing standards for improving the crispness of a rendered image in an email is to insert an image 2x the desired size and then reduce the image size in your template. There are two ways to approach this:

  1. Insert a large, crisp version of your image into your template, then click Edit Image and resize to your preferred dimensions
  2. Insert a natively larger image (i.e. 600px wide) and display at a smaller size (i.e. 300px width) using CSS; to take this approach, you'll need to insert your image into a text block and adjust the CSS source code


I would first suggest trying to upload a larger image into the image library, and then cropping it within the template. 

Hope this helps!