Email Banner Preview Image stretched

[sniyengar]

This has happened a couple of times now - I will send a preview email to my test list. 

Depending on the mail client they use, they will either see the images stretched or fine. 

IE Gmail client - the banner looks stretched

Outlook, Apple Mail - they are fine. 

doesn't matter if you are looking on the phone or not.  Has anyone else had any issues with this.  I don't want to send an email drip hoping it will look good for everyone.  

[SanfordWhiteman]

You’ll need to provide the relevant part of your HTML (please don’t post the whole email as that won’t be necessary, just an HTML fragment that’s sufficient to reproduce the problem).

It’s not possible to troubleshoot email design without seeing HTML, just as it would be impossible to troubleshoot a full-fledged web page without HTML & CSS.

[sniyengar]

thanks for this - That's the thing - I'm not sure if you can reproduce it based on the html as it looks fine. 

Here are the images that we are seeing in the gmail client - and then the other email clients (yahoo, outlook, apple mail) 

I put in the original banner graphic as well for reference. 

This is the banner html. if that helps

<table class="mktoModule" id="ImageModule" cellpadding="0" align="center" cellspacing="0" style="margin:0 auto;width:100%;border-collapse: collapse;border-spacing: 0;" border="0" width="100%">
<tbody>
<tr>
<td bgcolor="#ffffff" valign="top" style="background-color:#ffffff;vertical-align: top;">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0px;border-collapse: collapse;margin: 0 auto;">
<tbody>
<tr>
<td height="0" style="line-height:0px;font-size:0px;">&nbsp;</td>
</tr>
<tr>
<td class="fullWid center" align="center" style="text-align: center; font-size: 1px; line-height: 1px;">
<div class="mktoImg" id="Image1" mktolockimgsize="false">
<a href="https://f.hubspotusercontent10.net/hubfs/2154116/February%202022%20Grokker%20Workforce%20Wellbeing%20Engagement%20Playbook%20(1).pdf" target="_blank"><img src="https://info.grokker.com/rs/743-AWQ-437/images/FEB - Workforce Wellbeing - Email Header.jpg" width="2875" height="1126" alt="FEB - Workforce Wellbeing - Email Header.jpg" style="-ms-interpolation-mode:bicubic; border-collapse:collapse; width:100%; padding:0px; margin:0px auto; border-spacing:0;max-width:100%;" /></a>
</div> </td>
</tr>
<tr>
<td height="0" style="line-height:0px;font-size:0px;">&nbsp;</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>

[Jo_Pitts1]

At a very quick glance, you've probably got contention between the height and width HTML attributes, and the width=100% in the style.

Some other issues I've picked up on:

• Your image is MASSIVE.. way bigger than you need for your email header.  That's not good practise from a performance  and UX perspective. 
• You're also still pulling it from your old platform.  That'll work for now, but if you shut down your account with them, it may not continue to do so.

Also, when pasting code, please use the code highlighter

It makes it much more readable... like this.

<table class="mktoModule" id="ImageModule" cellpadding="0" align="center" cellspacing="0" style="margin:0 auto;width:100%;border-collapse: collapse;border-spacing: 0;" border="0" width="100%">
<tbody>
<tr>
<td bgcolor="#ffffff" valign="top" style="background-color:#ffffff;vertical-align: top;">
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing: 0px;border-collapse: collapse;margin: 0 auto;">
<tbody>
<tr>
<td height="0" style="line-height:0px;font-size:0px;">&nbsp;</td>
</tr>
<tr>
<td class="fullWid center" align="center" style="text-align: center; font-size: 1px; line-height: 1px;">
<div class="mktoImg" id="Image1" mktolockimgsize="false">
<a href="https://f.hubspotusercontent10.net/hubfs/2154116/February%202022%20Grokker%20Workforce%20Wellbeing%2..." target="_blank"><img src="https://info.grokker.com/rs/743-AWQ-437/images/FEB - Workforce Wellbeing - Email Header.jpg" width="2875" height="1126" alt="FEB - Workforce Wellbeing - Email Header.jpg" style="-ms-interpolation-mode:bicubic; border-collapse:collapse; width:100%; padding:0px; margin:0px auto; border-spacing:0;max-width:100%;" /></a>
</div> </td>
</tr>
<tr>
<td height="0" style="line-height:0px;font-size:0px;">&nbsp;</td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>

[sniyengar]

thanks for all this.  I really appreciate it.  So, to be clear - I'm a part of a marketing team that has 3 people (none of us are in ops).  we had someone else build our templates - the images are high res.  The other thing is that the images and content are all in Marketo - the link is to an external site.  The content is all from Marketo. 

Now, I don't know what happened - as it was fine before and now the last couple have stretched out the image. 

If there is anything that I can change in the code or the size I need the image to be to work, that would be helpful. 

[SanfordWhiteman]

You shouldn’t be specifying the HTML height attribute because you expect the height to be set automatically (also, the intrinsic height of that image is 1125px, not 1126px).

It seems strange to include the intrinsic height or width of something so giant that it won’t fit in the vast majority of modern viewports. Why aren‘t you setting it to 100% everywhere, or to the supported pixel width of the design?

i.e. like

<img style="MAX-WIDTH: 600px; WIDTH: 100%; BORDER-COLLAPSE: collapse; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; PADDING-LEFT: 0px; MARGIN: 0px auto; BORDER-SPACING: 0; PADDING-RIGHT: 0px; -MS-INTERPOLATION-MODE: bicubic" alt  ="FEB - Workforce Wellbeing - Email Header.jpg" src="https://info.grokker.com/rs/743-AWQ-437/images/FEB - Workforce Wellbeing - Email Header.jpg" width="600">

[SanfordWhiteman]

---

thanks for this - That's the thing - I'm not sure if you can reproduce it based on the html as it looks fine. 

---

If the HTML as received by the end user doesn’t look fine, then the HTML isn’t fine!

[Jo_Pitts1]

Without wanting to bash the OP, there is a bit of 'junior developer' in that statement isn't there.  It is a version of the classic 'it compiles so it has no bugs' line I've heard juniors trot out over the years.

[sniyengar]

Based on my understanding - this community is supposed to help and not offend.  I'm disappointed with this response as this is not helpful.  

[Jo_Pitts1]

@sniyengar ,

sorry if @SanfordWhiteman and my sidebar chat upset you.  We've certainly posted nothing offensive, and additionally we've posted several helpful responses about the oddities of your HTML.

You must be able to see the logical inconsistency in these two statements.

1. Depending on the mail client they use, they will either see the images stretched or fine.

2. thanks for this - That's the thing - I'm not sure if you can reproduce it based on the html as it looks fine.

At it's simplest, use images that are appropriately sized and remove the width= and height= attributes from your HTML and see what happens.