CODEWITHSUNDEEP
htmlcsshtml-email
Radislav
Radislav

Reputation: 2983

Image width is too wide in Outlook

I am trying to send html emails with images. Images look good in all email clients but in outlook they are too wide. How to fix max-width of image?

    <table id="cg-cmgxsgg" class="widget widget-image " width="580" data-widget-code="email-image">
   <tbody>
      <tr>
         <td align="center">
            <div><img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" alt="" style="float: none; margin-left: auto; margin-right: auto;"></div>
         </td>
      </tr>
   </tbody>
</table>

Upvotes: 4

Views: 18942

Answers (6)

David.P
David.P

Reputation: 235

I am using this with perfect success in Outlook 365 (2022):

<img src="https://picsum.photos/1000/1000" width="100%" style="width: 100%;">

Upvotes: 0

Tom
Tom

Reputation: 71

I'm a bit late to the party (got here via Google). What works for me, and what I didn't see in the answers, is conditional comments for Outlook.

They work like this:

<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;">
  <tbody>
    <tr>
      <td>
        <img align="center" alt="" src="[image source here]" width="[desired width here]">
      </td>
    </tr>
  </tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->

What your're doing here is essentially wrapping your image table in another table with fixed width, but only for Outlook.

MailChimp has a nice reference you should check out if you run into problems with Outlook: https://templates.mailchimp.com/development/css/outlook-conditional-css/

Hope this helps some fellow Googlers!

Upvotes: 0

Paul
Paul

Reputation: 669

For setting a max-width on images for Outlook I add a Width="600" attribute to the img tag. Note the lack of px on that size, with px it doesn't work and it must be on the img tag, not any parent element.

E.g. 

<img width="600" src="http://www.myimage.co.nz/myimage.jpg" alt="My Image" />

On a side but related note I use a width of 280 for side by side images in a 600 width table. This is because Outlook adds padding (or maybe margin) and they would stack if you made them both 300.

Upvotes: 6

Gortonington
Gortonington

Reputation: 3587

Regardless of CSS support or HTML attributes, the main factor that is causing the issue in Outlook is the actual size of the image. Outlook usually ignores whatever HTML sizing (width= or height=) or CSS styling (width:, height:) and goes off of the embedded information in teh image. This is all based off DPI setting as well as the renderings of the Word HTML engine.

Mailchimp solutions

Below is snippet explaining the issue in more detail from here

"This issue usually happens when you are using a picture other than 96dpi.

When inserting a picture, Outlook will rescale the image as if it was a 96dpi image. This means that if you have a picture of 150dpi with a height of 88px, it will be displayed as an image of 56px high; 88px/150dpi * 96dpi = 56px

It even gets worse; upon sending, Outlook will convert and compress (re-render) the images to 96dpi with the new dimensions permanently! This means that all the "detailed" picture information is lost and you'll be sending an image of 96dpi which is 56px high. This is of course a severe and very visible quality loss.

If your picture is less than 96dpi, then the opposite happens. A picture of 88px high with a dpi of 32 would then result in a 96dpi image of 264px high. So the result will be a very large image (but this time you can resize it back without the image becoming blurry).

This is a long outstanding issue/function/design choice which goes back all the way to Word 6.0 from 1993."

Upvotes: 9

styler
styler

Reputation: 16491

Couple of things, I'd refrain from using floats etc in your emailer code and also would remove that wrapper div, with emailers you've really got to go with simple table markup. Also try to avoid things like p tags etc as they create additional space etc.

For your actual question I'd try something like this, I'd set a height on my image and ive it display:block

<table id="cg-cmgxsgg" class="widget widget-image" width="580" data-widget-code="email-image" cellpadding="0" cellspacing="0" border="0">
   <tbody>
      <tr>
         <td align="center">
            <img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" height="200" alt="" style="display:block;">
         </td>
      </tr>
   </tbody>
</table>

Upvotes: 1

Blazemonger
Blazemonger

Reputation: 92893

max-width is not a supported CSS style in Outlook 2007. (Neither is float, apparently.) Outlook is notorious for providing very limited CSS support.

Your best solution is to specify a smaller width (and height) in the HTML attributes:

 <td align="center">
    <div><img src="..." width="500" height="300" alt="" style="margin-left: auto; margin-right: auto;"></div>
 </td>

Upvotes: 0

Related Questions