Hi there @Ieva ,
Thanks for sharing in the Community.
Question, how are these images built in your template? Are these supposed to be static images that come in and how did you add them to your email? This could be some email design formatting issue but I am also curious what email provider you sent this test to as well. You can also try disable the CSS Optimization setting in the Settings > Email section (https://www.klaviyo.com/account#email-tab) and then send the preview.
I would suggest you have a look at Understanding CSS Optimization you will find some reasons why you would have this option enabled.
Here is one community post that might be related:
Hope to hear from you,
Alex
Hi @alex.hong,
The images are added based on this guide, https://help.klaviyo.com/hc/en-us/articles/4408802285083-How-to-Set-a-Background-Image-for-a-Call-to-Action-new-editor-
My email provider is outlook - I just did a test on sending to my personal email - Gmail and now the email looks fine, so it must be something for outlook that disrupts it.
Also did a test with the CSS setting, and it didn't change anything in my outlook email.
Any, ideas? :)
Update: I checked my online outlook inbox and the emails come out perfect, it is only in my desktop outlook inbox where the images are not showing
/Ieva
Hey @Ieva,
Really appreciate those additional tests you’ve performed!
Sounds to me like your Outlook desktop inbox version is using Microsoft Word as its rendering engine. Whereas your online Outlook inbox is using Webkit, which explains why it’s rendering without issues.
It’s actually not uncommon for emails to look a bit off in Outlook sometimes. This is actually an industry-wide roadblock stemming from how Outlook renders emails. This is further explained in our My email looks different when viewed in Microsoft Outlook Help Center article in case you didn’t get a chance to take a look at it.
Ever since 2007, Microsoft/Outlooked switched from using Internet Explorer to render HTML to Microsoft Word which causes some known issues such as the following:
- No support for background images in divs and table cells
- No support for CSS float or position
- No support for text shadow
- Poor support for padding and margin
- Poor support for CSS width and height
- Problems with nested elements background colors
Litmus, an email preview software we highly recommend has a great blog article they written providing some tricks in combatting these difference: Outlook Email Rendering Issues and How to Solve Them.
David