Tutorial

Back to Basics: Fixing Blurry Logos

Back to Basics: Fixing Blurry Logos
Userlevel 4
Badge +3

 

Logos are how customers remember your brand. Therefore, it’s important to use one that is clear and crisp in your emails.

We recommend for your logo image to have at least 72dpi. This dpi rate is different than actual pixel size. For logo pixels, we recommend around 170 x 40 pixels.

xhz1q87C_sDj-KXaM91U1Sxq8s_FfWKkk-ub5UPnluTAAq1fTOm3B2ExnmdaKdhq2yZKEkaWmcOnQhf5dzuH9jT2VCgUTfPTGuUSo3dtlyRym9UPWMHiDUJBTQ9f2z9npbwYGWUy

You can also use a logo larger than this size, and then use the 'image width' field to make the logo show smaller, but the actual image size is larger. 

Please take a look here for more information on logos.

I can also suggest using an image block for the logo, and then a 'links only' header bar below. So, the logo image is not within the header block.

 

PBKqJmpHKelZRTYmEvUjYYonmK3D-U0SmuCS5I9XhOAVInMte0kOB42HO9umtkN7DHaulQkrWMESA6warqIAnj6SlKIW_SFmdJYKfp77DhG77EXAfarkaq10u23ixgAX0rwo9P0l

U1PHKRuyi6IGgBP1fCY5dGrdT_0GLUyCJXaKhqCOnw7-KfrqX9Fk-s-SNW1hNNg7afIBQJoUQX1g0HMCnoKOzMg41UFJQ7Unu7Y6K-ZH8krD0QvW66TdKKTdD2CvVvfx1o8Ll6Cq

Additional Resources:


3 replies

Badge +1

Just wondering why the logo is then a different size in the mobile version?

Userlevel 3
Badge +5

@Moni you can set two different versions, one for desktop and one for mobile. I don’t do this though as some older inboxes (like our hated enemy Outlook) don’t link mobile vs desktop blocks. I usually set the max width of the logo as just under the width of a mobile (350-400px) and then update the padding on the logo to be what you need it to be for mobile (as this won’t affect the desktop version).

Tried resizing a large, high res logo in Klaviyo and it renders blurry. Upon numerous attempts this has happened. It’s simply not professional 

Reply