retina display header image in emails

[Pete_Jones]

We increased the size of a header image in our email template to account for retina display's and it looks great on the initial test email. But, when that email is forwarded the image and the email enlarge to nearly twice the width of the email. Any idea how to fix the change in size of the forwarded email or a solution to the issue?

[Kevin_Weisenber]

Hi Pete,

Could you supply a few more details like the email client, if this happens to other images in the email, and a snapshot of the HTML itself would be most helpful?

We have experienced this in Outlook which has some versions that auto resize images upon forward so I'm curious to hear if this is a similar case.

[Pete_Jones]

We tested it in both Outlook 2016 and Gmail - got the same thing. Strangely we did the same for our company logo and did not have the same issue, only with the header image. The HTML from the WYSIWYG from Marketo is below:

<p><img src="https://go.guideone.com/rs/154-CUB-327/images/banner_here to help_largescale.png" alt="banner-here to help.png" height="332" width="1200" constrain="true" imagepreview="false" /></p>

We have the template coding set to center the header image and have it at 100% width so it is responsive. That code is below:

<tr>

                          <td align="center" width="100%">

                            <div class="mktEditable" id="headerbanner" mktoname="Header Banner">

                              <p><img src="https://go.guideone.com/rs/154-CUB-327/images/banner_here to help_largescale.png" alt="banner-here to help.png" height="332" width="1200" constrain="true" imagepreview="false"></p>

                            </div> </td> 

Obviously, the 1200 width is the driver for the larger experience when the email is forwarded, but oddly it does not drive a wider experience on the initial email.

[Casey_Grimes]

Outlook modifies the way it handles HTML once it gets forwarded--basically, it will strip certain code that an email comes in and then tries to re-render it using the Microsoft Word engine. The correct answer 99% of the time is to go "welp, we tried" and not worry about it too much.

In this case, though, I'm curious about the code you presented for a couple of reasons--one being wrapping the image in <p> tag (I'm guessing you have default p tags still on; you should probably turn them off) and the other being how retina/high-DPI images in general are used.

If you have a 1200px image, you're likely intending for the image to render in a 600px wide area. The trick is to still lock your image to 600px in terms of width (and let height calculate automatically, if possible) and then the 2x resolution underneath it will be accurately picked up by high-DPI devices while still scaling normally for everyone else. I talk about this a bit in this blog article: https://www.demandlab.com/insights/blog/images-in-email-the-best-practices-guide/