CODEWITHSUNDEEP
htmlcssemailoutlook
AlexHighHigh
AlexHighHigh

Reputation: 350

Outlook 2010 is resizing HTML email but not image

I'm currently creating an email template but one of the images is not correctly displaying in outlook, no matter how many tutorials I consult to fix the scaling issue.

Previews shown below;

Email in all other clients;

enter image description here

Email in Outlook 2010;

enter image description here

This is driving me absolutely crazy, I've handcoded the below because everything self generated doesnt seem to work. The image width's I've tried manually as 600px, in the inline style as width:600; and now 100% - no fix at all..

ANY ASSISTANCE IS GREATLY APPRECIATED! <3

HTML email;

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->



<style type="text/css">

table {border-collapse:separate;}

a:hover {text-decoration: underline;}

.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}

.ExternalClass {width: 100%;
}

a {
    text-decoration: none;
color: #606060 !important;
word-wrap: break-word;
}

a:hover {text-decoration: underline;}


h1{
        color:#202020;
        font-family:Helvetica;
        font-size:26px;
        font-style:normal;
        font-weight:bold;
        line-height:125%;
        letter-spacing:normal;
    }
 h2{
        color:#202020;
        font-family:Helvetica;
        font-size:22px;
        font-style:normal;
        font-weight:bold;
        line-height:125%;
        letter-spacing:normal;
    }
 h3{
        color:#202020;
        font-family:Helvetica;
        font-size:20px;
        font-style:normal;
        font-weight:bold;
        line-height:125%;
        letter-spacing:normal;
    }
 h4{
        color:#202020;
        font-family:Helvetica;
        font-size:18px;
        font-style:normal;
        font-weight:bold;
        line-height:125%;
        letter-spacing:normal;
    }


 </style>

 </head>


 <body width="600" style="background-color:#fafafa;">


 <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="text-align: center; background-color: white; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px;width: 600px;" >
 <tbody>
 <tr>
 <td style="padding-left: 18px;padding-bottom: 9px;color: #656565;font-family: Helvetica;font-size: 12px;text-align: left; width: 400px; background-color:#fafafa;" valign="top" width="400">

                        Podcast updates from Liberty Entrepreneurs.
 </td>
 <td style="padding-right: 18px;padding-bottom: 9px;color: #656565;font-family: Helvetica;font-size: 12px;text-align: right;width: 200px; background-color:#fafafa;" valign="top" width="200">
 <a href="*|ARCHIVE|*">View this email in your browser</a>
 </td>
 </tr>
                        <!-- BEGIN HEADER IMAGE // -->
 <tr>
 <td colspan="2" width="600"  style="width: 600px;  margin: auto;">
 <img alt="Liberty Entrepreneurs" style="width:100%; min-width:100% !important; margin: auto;" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/9b764c71-111e-4ef2-8792-d9a223a7da3b.jpg" width="100%">
 </td>
 </tr>


                        <!-- BEGIN COLUMNS // -->
 <tr>
 <td colspan="2" valign="top"  style="width: 600px;" width="600">

 <table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="text-align: center; background-color: white; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px; width: 600px;" >
 <tbody>
                        <!-- BEGIN LEFT COLUMN // -->
 <tr>
 <td width="200" valign="top" style="width: 200px; ">
                            <!-- BEGIN LEFT MENU NAV // -->
                       <a href="http://libertyentrepreneurs.com/">             <img alt="home" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/8836768d-61cf-4687-9598-37bc518b2cd9.jpg" style="width: 200px;" width="200"></a><br>

                         <a href="http://libertyentrepreneurs.com/podcasts/">  <img alt="podasts" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/ee8755e0-000d-48bd-adb8-851c1a7497fa.jpg" style="width: 200px;" width="200"></a><br>

                          <a href="http://libertyentrepreneurs.com/about/">        <img alt="about-us" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/3078d9ff-01ec-431d-a9eb-e9024f371498.jpg" style="width: 200px;" width="200"></a><br>

                           <a href="http://libertyentrepreneurs.com/affiliates/">        <img alt="affiliates" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/49888d30-b006-4d1b-8e85-18286f16252e.jpg" style="width: 200px;" width="200"></a><br>
                <!-- // END LEFT MENU NAV -->

             <br>
    <!-- BEGIN LEFT MENU SOCIAL ICONS // -->
 <table align="center" style="mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px;">
 <tbody>
 <tr>

 <td ><a href="https://www.facebook.com/LibertyEntrepreneurs"><img alt="facebook" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/c390cefe-929f-49cc-aa83-8906f2541988.jpg"></a></td>

    <td ><a href="http://feeds.soundcloud.com/users/soundcloud:users:179898940/sounds.rss"><img alt="rss" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/bb275fe4-7220-4814-bf68-c644a973f7ce.jpg"></a></td>

 <td >
 <a href="https://twitter.com/libertyepodcast">
 <img alt="twitter" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/38a2439b-b92b-47be-952c-69d3acab18fd.jpg"></a></td>

 </tr>
 <tr>

 <td >
 <a href="https://www.youtube.com/channel/UCwVUvM9zHMtfFebUpRMn2iA">
 <img alt="youtube" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/94a00983-d179-4d53-8ed6-2cfdb7b043ba.jpg"></a></td>

 <td >
 <a href="https://plus.google.com/113882469509229437540">
 <img alt="google" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/debb5fb8-f62f-488a-b19a-425e11b54b39.jpg"></a></td>

<td >
<a href="mailto:[email protected]">
<img alt="email" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/2e84304b-9dce-47a6-b10b-7b8831f0f5e6.jpg"></a></td>

</tr>
</tbody>
</table>
 <!-- // END LEFT MENU SOCIAL ICONS -->

 <!-- BEGIN LEFT MENU DONATION BUTTONS // -->

 <h3 style="text-align: center;font-family: Open Sans;color: #f7931d;"><span style="color: #f7931d;"><strong>Donate $1 with Altcoins</strong></span></h3>

 <a href="https://shapeshift.io/shifty.html?destination=18S1ggqLUdVFzUNbmYcthnG3S8WSYP1ShA&output=BTC&apiKey=e6c44e9af4ec65d0bdce028b4b984f43a0bf519f9c984a3005190068354285606cea430cb7d81c21e1aca85b8e8e93115db1d65d4c057dd84318f0f6529a6009&amount=$1" target="_blank" >
 <img width="144px" align="middle" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/3a605f6d-c526-4c68-93dd-791f8296ee88.png" style="width: 144px;" >
 </a>
 <br>
 <br>

 <a href="https://itunes.apple.com/us/podcast/liberty-entrepreneurs-podcast/id1057809945?mt=2" target="_blank">
 <img width="144px" align="middle" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/dcb329f4-124a-47ba-aeb6-63fa995d93d3.png" style="width: 144px;" >
 </a>
 <br>

  <!-- // END LEFT MENU DONATION BUTTONS -->

 <br>

  <!-- BEGIN LEFT MENU RECENT ARTCLES // -->

  <h3 style="font-family: Helvetica;font-style: normal;font-weight: bold;letter-spacing: -1px;text-align: center;color: #606060 !important;">
 <center>Recent Articles:</center>
 </h3>
 <p style="text-align: left;">*|RSS:RECENT|*</p>

 <!-- // END LEFT MENU RECENT ARTCLES -->
    </td>

                            <!-- BEGIN RIGHT COLUMN // -->
 <td width="400" valign="top" style="width: 400px;">
 <br>

                        *|RSSITEMS:|*
 <h3 class="mc-toc-title" style="margin: 0;padding: 0;display: block;font-family: Helvetica;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: -1px;color: #606060 !important;">&gt;<a href="*|RSSITEM:URL|*" target="_blank">*|RSSITEM:TITLE|*</a></h3>
 <em>By *|RSSITEM:AUTHOR|* on *|RSSITEM:DATE|*</em><br>
 *|RSSITEM:CONTENT_FULL|*<br>
  <a href="*|RSSITEM:URL|*" target="_blank">Read in browser &raquo;    </a><br>
    *|RSSITEM:TWITTER|* *|RSSITEM:LIKE|*<br>
   <br>
  *|END:RSSITEMS|*

 </td>
 <!-- // END RIGHT COLUMN -->
 </tr>
 </tbody>
 </table>

 </td>
 </tr>

 <tr>
    <!-- BEGIN FOOTER SOCIAL ICONS // -->
 <td colspan="2" style="padding-top: 10px; padding-bottom: 10px; margin: auto; border-top: 2px solid #eaeaea; width: 600px; background-color:#fafafa;" width="600">
                                                                              <a target="_blank" href="https://www.facebook.com/LibertyEntrepreneurs"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-facebook-48.png"></a>

 <a target="_blank" href="http://feeds.soundcloud.com/users/soundcloud:users:179898940/sounds.rss"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-rss-48.png"></a>

 <a target="_blank" href="https://www.twitter.com/libertyepodcast/"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-twitter-48.png"></a>

 <a target="_blank" href="https://www.youtube.com/channel/UCwVUvM9zHMtfFebUpRMn2iA"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-youtube-48.png"></a>

 <a target="_blank" href="https://plus.google.com/113882469509229437540"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-googleplus-48.png"></a>

 <a target="_blank" href="mailto:[email protected]"><img width="24" height="24" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-forwardtofriend-48.png"></a>

 </td>
                                <!-- // END FOOTER SOCIAL ICONS -->
 </tr>


 </tbody>
 </table>

 </body>
 </html>

Upvotes: 0

Views: 1330

Answers (2)

Mayura Vivekananda
Mayura Vivekananda

Reputation: 674

I have two potential solutions (based off the assumption outlook is breaking the image on embed):

  1. Outlook by default re-embeds images, no matter how you seem to put them in. So you can change the following registry setting.

    Key: HKEY_CURRENT_USER\Software\Microsoft\Office\ version\Outlook\Options\Mail

    Value name: Send Pictures with Document

    Value: 0

    This should force outlook to respect your hyperlinked image, and potentially fix the issue.

  2. Render the image in 96dpi. As I mentioned above, outlook seems to re-embed images. It seems to want them to be 96dpi, so will convert it (often causing issues). If you embed the image as the correct dpi, there is a chance outlook won't break it on conversion.

Upvotes: 1

Cale W. Vernon
Cale W. Vernon

Reputation: 139

I see where you have tried to assign min-width to the image itself, but have you tried assigning it to the parent <tr> or <td>?

<tr>
    <td colspan="2" width="600"  style="width: 600px;  margin: auto; min-width: 600px;">
        <img alt="Liberty Entrepreneurs" style="width:100%; min-width:100% !important; margin: auto;" src="https://gallery.mailchimp.com/419f286c8164643c78599a0cd/images/9b764c71-111e-4ef2-8792-d9a223a7da3b.jpg" width="100%">
    </td>
</tr>

It is also worth trying to specify the height (along with the width) of the <image> itself as Outlook's engine is known to adjust the image as it sees fit if you don't specify both. These dimensions must be the same as the image's actual dimensions (which you properly used in regards to the width).

Upvotes: 0

Related Questions