Image style height and width not taken in outlook mails

Resolving Image Sizing Issues in Outlook Emails

Discover why CSS height and width styles often fail in Outlook and learn robust HTML and CSS techniques for consistent image rendering across email clients.

Email development is notoriously challenging due to the wide array of email clients, each with its own rendering engine and quirks. A common frustration for developers is when images, styled perfectly in a web browser, appear incorrectly sized or distorted in Microsoft Outlook. This article delves into the root causes of this problem and provides practical, reliable solutions to ensure your images display as intended in Outlook and other demanding email clients.

Understanding Outlook's Rendering Engine

Unlike modern web browsers that use engines like WebKit, Gecko, or Blink, Microsoft Outlook (especially versions 2007, 2010, 2013, 2016, and 2019) relies on Microsoft Word's rendering engine. This engine has limited support for modern CSS properties, particularly when it comes to layout and sizing. While <img> tags support width and height attributes, CSS width and height properties applied directly to images or their parent elements are often ignored or misinterpreted.

flowchart TD
    A[Email Client] --> B{Rendering Engine}
    B --> C{Modern Browsers (WebKit, Gecko, Blink)}
    B --> D{Outlook (Microsoft Word Engine)}
    C --> E[Full CSS Support]
    D --> F[Limited CSS Support]
    F --> G{"Ignores CSS `width`/`height` on `<img>`"}
    F --> H{"Relies on HTML `width`/`height` attributes"}
    G --> I[Image Sizing Issues]
    H --> J[Consistent Sizing]

Comparison of Email Client Rendering Engines and CSS Support

The Problem with CSS width and height

When you apply width and height using CSS directly to an <img> tag, or even to a parent <div> or <td> that contains the image, Outlook's Word-based engine frequently disregards these styles. This can lead to images displaying at their intrinsic size, overflowing their containers, or appearing disproportionately. This behavior is a significant hurdle for responsive email design, where flexible sizing is crucial.

<!-- This might not work in Outlook -->
<img src="image.jpg" style="width: 200px; height: 150px; display: block;" alt="My Image">

Common CSS styling that often fails in Outlook

Robust Solutions for Image Sizing

To ensure consistent image sizing in Outlook, a combination of HTML attributes and inline CSS is the most reliable approach. The key is to provide explicit width and height attributes directly on the <img> tag, and then optionally use inline CSS for other clients or for responsive adjustments.

1. Use HTML width and height attributes

Always include width and height attributes directly on your <img> tags. These are honored by Outlook's rendering engine.

2. Apply inline CSS width and height

For broader compatibility and to override HTML attributes in more capable clients (or for responsive behavior), also apply width and height as inline CSS styles. This creates a fallback for clients that prefer CSS.

3. Add display: block;

Images are inline elements by default. Adding display: block; to your inline CSS helps prevent extra spacing below images, especially in Gmail and Outlook.

4. Consider max-width for responsiveness

For responsive emails, use max-width: 100%; height: auto; in your inline CSS. While Outlook might ignore max-width on the image itself, it's crucial for other clients. For Outlook-specific responsiveness, you might need VML or conditional comments, which are advanced techniques.

<!-- Recommended approach for maximum compatibility -->
<img src="image.jpg" width="200" height="150" style="width: 200px; height: 150px; display: block;" alt="My Image">

<!-- For responsive images, combine with max-width -->
<img src="responsive-image.jpg" width="600" height="400" style="width: 100%; max-width: 600px; height: auto; display: block;" alt="Responsive Image">

Using HTML attributes and inline CSS for robust image sizing

Outlook-Specific Conditional Comments

For highly specific Outlook fixes, you can use conditional comments. These allow you to serve Outlook-only code. While less common for basic image sizing, they can be useful for complex layout issues or responsive image solutions that Outlook struggles with.

<!--[if mso]>
  <table role="presentation" width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>
<![endif]-->

<img src="outlook-specific-image.jpg" width="600" height="300" style="width: 600px; height: 300px; display: block;" alt="Outlook Specific Image">

<!--[if mso]>
      </td>
    </tr>
  </table>
<![endif]-->

Using Outlook conditional comments for specific styling or layout

By adhering to these best practices, particularly the dual approach of HTML width/height attributes and inline CSS, you can significantly improve the consistency and reliability of image rendering in your email campaigns across all major email clients, including the notoriously challenging Microsoft Outlook.