Understanding CSS optimization
You will learn
Learn how CSS optimization helps reduce email size and the risk of clipping, and when to turn it off for inbox compatibility.
Why CSS optimization matters
When an email is clipped, part of the message is hidden until the recipient opens the full message. CSS optimization helps reduce repeated styling code and keep the email smaller, but it does not guarantee that the email will avoid clipping. Learn how to reduce an email’s size.
About CSS optimization in Klaviyo
With CSS optimization enabled, Klaviyo uses embedded styles to apply the design settings you choose for your email template and its blocks. Embedded styles let multiple elements share CSS rules, which helps reduce repeated styling code.
Do inbox providers allow for embedded styles?
The largest inbox providers (Gmail, Yahoo, Apple, Outlook, AOL) all accept and render embedded styles.
If you find a large number of your customers are using the inbox providers below or another provider that does not render embedded styles, consider unchecking the Enable embedded styles box so your emails look as you designed them.
Country/Region | Common Inbox Providers that Do Not Support Embedded Styles |
Australia | telstra.com.au, telstra.com, bigpond.net.au, bigpond.com |
Russia | mail.ru |
Germany/EU | gmx.com, t-online.de |
Brazil | bol.com |
Turn off CSS optimization
Turning off CSS optimization switches to inline CSS, which applies styles directly to individual elements. This account-wide setting affects email sends, exports, and previews for existing and future messages. You need permission to edit account settings to change it.
Inline CSS can increase email size and the risk of clipping, so test your emails before you send them. After saving this setting, check both formatting and clipping in the inbox providers your customers use.
- Select your organization name in the bottom left corner.
- Click Settings.
- Select the Email tab.
- Navigate to Sender preferences.
- In the CSS optimization section, uncheck Enable embedded styles.
- Click Save.
Additional resources
- Why is my email being clipped?
Learn how clipping works and what you can do to avoid it.
- How to add a background image to an email template or section
Learn how to layer text, images, and other email content over background images. You can add a background image to a full email, or to a single section. By using these feature, you can layer one image on top of another, or add a button or text on top of an image.