Images do not display as expected in Microsoft Outlook desktop client

Microsoft Outlook does not always respect CSS formatting used in modern emails. One example is that image width and height CSS rules and even styles coded in a specific HTML tag will be ignored, and the images will be displayed in their native size rather than the expected forced size if the image is physically larger than the section in which it is to be displayed.

Ideally, the image should have its size physically adapted to fit the expected location in an email rather than relying on "on the fly" size forcing, but you may be able to force the image to a given width and height by using the width and height attributes of the HTML <img> tag rather than using CSS & inline styles.

For example, this code will resize the image to be displayed as 300 pixels wide.

<img src="https://www.example.com/image.jpg" width="300" />

This section where the width is specified as an inline style (or if a CSS defines dimensions via a class or ID) will not display at 300 pixels - unless the raw image is already 300 pixels wide.

<img src="https://www.example.com/image.jpg" style="width:300px;" />

To ensure maximum compatibility, even if you have specified a height and/or a width via CSS, remember to add the height and/or width attributes to the <img> tag for Outlook if you are not sure that your source images are not at the correct size, for example, forcing width:

<img src="https://www.example.com/image.jpg" width="300" style="width:300px;" />

And forcing height:

<img src="https://www.example.com/image.jpg" height="200" style="height:200px;" />

Or both:

<img src="https://www.example.com/image.jpg" width="300" height="200" style="width:300px; height:200px;" />

Knowledge Base Reference ID: 201909241152