6

I'm creating a template in Mailchimp to send out newsletters. The template contains a repeatable section with an image of a prefixed size. For some reason it strips the width="" and height="" values from the img element and only includes them if you manually set these within the image settings for each image. This means if a user uploads an image of a different size and doesn't manually enter the correct dimensions then in Outlook the image displays as full size.

To make it even less user friendly on the design editor it uses the width/height css styles to show what the image size is, so it says (for example) 350px wide by 234px tall and you can upload a much larger image and it shows it at 350px width (which would make a user think it was correct). However it does not include the html img width/height values unless you manually specify them which means the image size is wrong in Outlook.

Does anyone know of anyway to force at least the html width variable to be automatically included in the img element? Otherwise users have to manually set the same width/height for each image manually and if they forget then it will not display correctly in Outlook?

Thanks,

Dave

Eugene Astafiev
  • 47,483
  • 3
  • 24
  • 45
deshg
  • 1,233
  • 4
  • 27
  • 45

2 Answers2

3

To get around this issue you must have a max-width specified on the actual image itself, and make sure it's inlined onto the tag like this:

<img mc:edit="image" src="image.jpg" width="200" style="max-width: 200px;">

It doesn't count if it's included in the CSS in the head.

I have found that the max-width needs to be the VERY LAST thing you specify in the styles. So if you also specified a background, for example, you would put that first, i.e. background-color: #fcfcfc; max-width: 200px;.

Last time I tried this, the MailChimp editor would only add the width="200" AFTER the image has been edited, so if you left the placeholder image alone, it would have no width applied and thus remain at native size. Unfortunately I'm no longer sure if this is the case, and am not paying for Mailchimp right now so I can't check.

Nicole Merlin
  • 196
  • 1
  • 5
2

For others reference I have now spoken to mailchimp and using a combination of the code at https://www.snip2code.com/Snippet/25348/HTML-Email-Template--max-width-hack-for- (below) and max-width/max-height css values for the img fixes the problem in outlook:

<!--[if (gte mso 9)|(IE)]>
<center>
  <table>
    <tr>
      <td width="600">
        <![endif]-->
        <div style="max-width: 600px; margin: 0 auto;">
          <p>This text will be centered and constrained to 600 pixels even on Outlook which does not support max-width CSS</p>
        </div>
        <!--[if mso]>
      </td>
    </tr>
  </table>
</center>
<![endif]-->
deshg
  • 1,233
  • 4
  • 27
  • 45
  • There is no reference to any IMG in your code, could you please provide how you handled this? The code you posted is straight from the snippet you linked! – David Lamm Feb 13 '17 at 13:44
  • Adding an image inside the `div` above would not limit the size of the image – Outlook doesn't care if the containing cell is 600px wide, if you insert a 900px wide (native) image into that cell, without a `width="600"` on the image, it will display at its full native 900px width. Even if you put `width: 100%` on an image inside, it would still blow out to its native dimensions. – Nicole Merlin Oct 06 '20 at 04:56