How to make an image responsive in HTML email regardless of image size

Question

I am creating an email template where my container has a max-width: 600px. I want to be able to upload images that are in excess of 800px wide, and the images to scale down to maintain their intended aspect ratio. So even if I uploaded an 800px wide image, it would scale to 600px.

In Outlook, I don't think it supports max-width for images which therefore caused it to stretch.

Are there any solutions for this?

Solution 1

Yes and no. Outlook tends to force the image to its actual size, regardless of your CSS and HTML sizings. So using images that are bigger than what you want to be displayed on your desktop version is likely to break on Outlook.

Your best bet for responsive images would be to have the images as 100% width inside a table that has max-width set. Then around this table, make conditional code for MSO that contains a set width table at the max-width size.

Example below:

<!--[if gte MSO 9]>
  <table width="640">
     <tr>
        <td>
<![endif]-->
  <table width="100%" style="max-width:640px;">
    <tr>
      <td>
        <img src="image.jpg" width="100%" />
      </td>
    </tr>
  </table>
<!--[if gte MSO 9]>
      </td>
    </tr>
  </table>
<![endif]-->

There will still be some quirks with using max-width as not all clients support it. I would view CSS compatability and make little tweaks as needed on top of the above to ensure it fits. Then test and test some more.

Solution 2

Been breaking my head over image width in emails for a day now. Finally got it to work in a "responsive" manner...somewhat. What I found is that, while some email clients will ignore CSS for <img> tags (at least CSS for width and max-width) and set the image to its full width, most of them will actually respect the width attribute set directly on the <img>. So this is what I did:

<img class="logo" width="250" src="http://myweb.com/img/myimg.png" />

And then:

.logo {
    display: block;
    width: 310px !important;
    max-width: 100% !important;
}

Clients that respect the CSS, will use CSS for the image, while clients that ignore it will just have width set to 250px, so that image doesn't break the layout for different screensizes.

Solution 3

I used a conditional for mobile, included a div tag and had set the background image url, with defined height and width percentages and the div tag has defined boundaries. Works so much better than img tag. The condition below handles displaying images in email client other than Outlook such as Mobile Browsers, WebMail, etc. Works for image data too.

Example:
   <!--[if !mso]> <!-->
    <div    
style="
    background-image:url(http://www.example.org/image.png); 
    background-repeat:no-repeat;
    background-size:100% 100%; 
    width:auto; height: 300px;
"> 
    </div>
   <!-<![endif]->