Microsoft Outlook renders and formats email content differently than other popular email clients. Outlook 2007-2019 and desktop versions of Outlook Office 365 render using Word, while various web-based versions of Outlook render using Webkit(HTML). These variations can introduce discrepancies in the way messages are viewed between email clients. The tips below may help resolve these issues.
Images and Tables
Issue: Images or tables are stretched beyond the message width or their proper container.
If you are using an Image Block, use "Fit in Block" as the image alignment. This will force images that are oversized to align to their container size.
If using a table (as described below), image or table width may not be defined or is set to a pixel width larger than the message width. Set the image/table width to percentages instead of specific pixels.
Issue: Images do not align with the content section where they are placed or are too small.
Outlook does not render images and tables according to TEXT alignment, which displays correctly in our Rich Text Editor and web email clients. First, insert a 1x1 table in the Rich Text Block where you want the image to appear. Then, insert/drag the image into the table. Finally, drag the corners of the image to resize to the specific desired height/width.
Issue: Background images not appearing in table background.
As a rule, Outlook does not render table background images. Use a message background color as a backup, or insert the content of the table as an image instead.
Pro Tip! Add alt text to your images. This provides users with Outlook's default settings, which do not load images automatically, a better view of your image content through Outlook's security message.
Content Size and Spacing
Issue: Various sizing and spacing differences between HTML and Outlook versions.
The Outlook program (along with the rest of Microsoft Office Suite) is subject to DPI scaling through your Windows Visibility Settings. Under these settings, text size may not increase proportionally to table and image sizes.
Windows 10: Settings > System > Display
Previous Windows Versions: Windows > Control Panel > Appearance and Personalization > Display.
Ranges will vary by version, but will appear similar to below:
- Smaller - 100% (Actual Rendering – This is how other/web-based email clients render the email)
- Medium - 125% (Default – Text size is increased not proportionally to table and image sizes)
- Larger - 150% (Text size is further increased not proportionally to table and image sizes)
Issue: Other solutions do not resolve issues with margin gaps.
Outlook rendering converts pixels to points and inches. This conversion can cause tables or images to convert to unsuitable widths. Images and tables with pixels that have converted incorrectly will snap to the closest 100th of an inch. This may cause some discrepancies with all other elements in your email. When possible, use percentages as opposed to defined pixel widths. Adjust the message pixel width to a larger or smaller value in situations where the entire message width is in question.
Message Styling
Issue: A white bar is breaking up the content of the message.
Because Outlook renders images in Word format, email messages are subject to a 1728px vertical limit. Any content over and around this limit (page break) is subject to odd gaps and clipping. The best practice may be to reduce the height of your message to under 1728px to avoid image clipping. Or, consider adding a line spacer or otherwise adjusting content to eliminate gaps.
Issue: A different-colored bar is breaking up the content of the message.
This is related to the way that Outlook scales and spaces content cells. When there is a height mismatch, the content will "rip" and expose the background of the document, which looks like a thin horizontal line that matches the background color of your message.
The best solution to this is to ensure the "Inner" and "Outer" background colors are the same (found under "Stationary" in the right-hand sidebar):
Issue: When replying to or forwarding an email in Outlook, the background color from the table is sometimes applied to the entire content of the email.
Create a custom Stationery that uses table background colors instead of the typical background or bgcolor tag. End users can turn off reply/forward formatting for Text, Background, and Stationery in their Outlook Settings. Remove or change backgrounds and stationery on replies and forwards.
Issue: Various other inconsistencies in styles, fonts, and spacing occurring in Outlook.
As a result of Outlook rendering and version differences, some HTML/CSS styling may not be supported. This can include such features as hover effects and borders with rounded corners. Various line spacing and font size/spacing discrepancies may appear due to Outlook's converting pixels to points and scaling up. In some cases, there may be no solution beyond working toward the best average between the various clients.
MSO Properties
MSO properties provide advanced users with Outlook-specific CSS and conditional control over their content. Check out this Litmus article for detailed use. This may help provide fallbacks for various dynamic content, such as animated GIFs, which Outlook may not support.
Test Your Emails
Utilize our built-in Litmus integration to review the formatting of your emails across a variety of versions of Outlook.
Next Steps
You may also want to review Tips for Customizing Email Messages.