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

Question

I am creating an email template where my container has a maximum width: 600 pixels. I want to be able to upload images larger than 800 pixels, and the images are shrinking to maintain their estimated aspect ratio. Therefore, even if I uploaded an image with a width of 800 pixels, it will scale to 600 pixels.

In Outlook, I do not think that it supports the maximum width for images, which is why it is stretched.

Are there any solutions for this?

Answer 1

Yes and no. Outlook tends to make the image fit its actual size, regardless of your CSS and HTML values. Thus, using images that are larger than what you want to display on your desktop is likely to violate Outlook.

The best choice for responsive images is that the images will have a width of 100% inside the table with the maximum width. Then, around this table, create the conditional code for the MSO that contains the maximum width set table.

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 using max-width, as not all clients support it. I would consider CSS compatibility and work a bit on this to make sure it works. Then check the test and check a few more.

Answer 2

During the day, I smashed my head across the width of the image in emails. Finally, he got the job in a "responsive" way ... somewhat. I found that although some email clients will ignore CSS for <img> tags (at least CSS for width and max-width ) and set the image to full width, most of them will really respect the width attribute set directly to <img> . So here 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 who respect CSS will use CSS for the image, while clients who ignore it will have a width of 250 pixels so that the image does not break the layout for different screens.

Answer 3

I used a conditional expression for mobile devices, included the div tag and set the URL of the background image with specific percentages of height and width, and the div tag defined the borders. Works a lot better than the img tag. The following condition applies to displaying images in an email client other than Outlook, such as mobile browsers, webmail, etc. Also works for image data.

 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]->