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?

Answer 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.