Outlook has trouble displaying images in tables correctly, often "blowing them up" - i.e., displaying them much wider than the HTML has defined. There is an HTML-based workaround for this that we would suggest for our clients creating emails for an outbound campaign.
What this involves is essentially creating two duplicate sets of content in the HTML and using an "if" statement to hide the primary content and show a customized, Outlook-tailored content for Outlook clients only.
In the code below, notice the italicized code with [if mso] - i.e., if the client is Microsoft Outlook. An additional div with:
display:none
is included within these tags to ensure that the Outlook-optimized content is only shown if the client is Outlook, while also not displaying the other content.
<table style="width: 100%;" width="100%">
<tr>
<td style="text-align: left; width: 50%;" width="50%">
<h1>Header</h1>
</td>
<td style="position: relative; text-align: right; width: 50%;" width="50%">
// Below is the Outlook-optimized content:
<!--[if mso]>
<table width="50%"><tr><td><img width="200" src="www.google.com/image.png" alt="photo" style="text-align: right; width: 207px; border: 0; text-decoration:none; vertical-align: baseline;"></td></tr></table>
<div style="display:none">
<![endif]-->
// This is the normal content, nested inside a div which shows unless the client is Outlook per the if statement above:
<img id="photo" src="www.google.com/photo.png" alt="photo" style="text-align: right; min-width: 50px; max-width: 207px; border: 0; text-decoration:none; vertical-align: baseline;">
//This closes the Outlook-optimized content div, if it is shown:
<!--[if mso]>
</div>
<![endif]-->
</td>
</tr>
</table>
Credit to:
See also: