CODEWITHSUNDEEP
htmlcssimageoutlookmailchimp
David Lamm
David Lamm

Reputation: 529

Mailchimp - constrain image dimensions in outlook

Im coding a mailchimp template for a client and I am running into problems with images dimensions

The problem is that images with widths greater then the template width (normally 600px) is shown at original size in outlook. I can trust my users to be able to handle such a weakness.

There is one way that works, and thats if the image dimensions are hard coded into the img-tag, although when changing image in mailchimp, the hard coded attributes are overrun. -So its not all Microsofts fault.

The closest I've come to a solution is found here: How to retain image dimensions in Mailchimp templates - But the OPs own accepted answer is incomplete.

Any smart suggestions? Spent days on this now and is starting to mistrust.

I tried this, was supposed to be foolproof, but when testing it with litmus it broke in Outlook 2010 and below:

 <!-- content1 -->
    <table mc:repeatable mc:variant="Section: item with image top and CTA" width="300" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:300px;">
        <tr>
            <td bgcolor="#FFFFFF" width="100%">
                <table width="100%">
                    <tr>
                        <td width="100%">
                            <img mc:edit="article_image" src="https://gallery.mailchimp.com/3517b92e77c79cf5a2a6072a3/images/c37645eb-f76b-44e9-88ab-f01b1929dda2.jpg" id="contact-photo" alt="" style="width:100%; max-width:100%;" width="300">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table> 
<!-- end content1 -->

Upvotes: 1

Views: 2234

Answers (1)

Kevincore
Kevincore

Reputation: 504

I think your question might be kinda similar to this one Mailchimp affects my Outlook-specific conditional comments in HTML

I've had the same problem as you. Unfortunately after many many hours debugging en searching the web, I read the following on a MailChimp post:

Outlook doesn’t recognize the HTML that constrains images. This means that if you use HTML to resize an image uploaded to a campaign or template, it may display at the original size in Outlook. Be sure to resize your images before you upload them to MailChimp, or use our built-in image editor.

source: MailChimp Knowledge Base

I didn't really believe that this could actually be true so I kept trying to constrain the images. I've put fixed width on the img, td, tr, table.. nothing helped.

Sadly I can't really explain what happens, hopefully the link to the MC article gives you a better view on it. But my best answer is to set a max-width & width to your img and td anyway. And tell your client to resize the images to the allowed size. Setting a max-width and width will also display the #px when hovering over the editable image in your MailChimp editor. I also found out that when you do upload a bigger size, MailChimp throws a lil' warning.

If it may help in any way; see my code below that I used in my templates to make it fluid. 

<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
  <td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td style="padding-bottom:15px;max-width:610px;">
          <img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
        </td>
      </tr>
    </tr>
  </table>
</td>

Upvotes: 1

Related Questions