Signature distortion

[AMartak]

Hi, 

We have a signature made from the HubSpot template and experience some issues, namely:

1. Sometimes the images and icons in the signature do not get displayed unless the recipient manually displays them 

2. In e-mail chains, the signature features get completely distorted

Here is the html: 
<table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: top;"><h2 style="margin: 0px; font-size: 18px; font-family: Arial; color: rgb(0, 0, 0); font-weight: 600;"><span>Adam</span><span>&nbsp;</span><span>Marťák</span></h2><p style="margin: 0px; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>Founder</span></p><div style="margin: 0px; font-weight: 500; color: rgb(0, 0, 0); font-size: 14px; line-height: 22px;"><span>ambiom s.r.o.</span></div><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; width: 100%;"><tbody><tr><td height="30" aria-label="Horizontal Spacer"></td></tr><tr><td width="auto" aria-label="Divider" style="width: 100%; height: 1px; border-bottom: 1px solid rgb(234, 140, 5); border-left: none; display: block;"></td></tr><tr><td height="30" aria-label="Horizontal Spacer"></td></tr></tbody></table><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr style="vertical-align: middle; height: 25px;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(234, 140, 5);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png" alt="mobilePhone" width="13" style="display: block; background-color: rgb(234, 140, 5);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="tel:+421 948 652 276" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>+421 948 652 276</span></a> | <a href="tel:+421 948 652 276" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>+421 948 652 276</span></a></td></tr><tr style="vertical-align: middle; height: 25px;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(234, 140, 5);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png" alt="emailAddress" width="13" style="display: block; background-color: rgb(234, 140, 5);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="mailto:adam.martak@ambiom.com" style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>adam.martak@ambiom.com</span></a></td></tr><tr style="vertical-align: middle; height: 25px;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(234, 140, 5);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/link-icon-2x.png" alt="website" width="13" style="display: block; background-color: rgb(234, 140, 5);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><a href="//www.ambiom.com " style="text-decoration: none; color: rgb(0, 0, 0); font-size: 14px;"><span>www.ambiom.com </span></a></td></tr><tr style="vertical-align: middle; height: 25px;"><td width="30" style="vertical-align: middle;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td style="vertical-align: bottom;"><span style="display: inline-block; background-color: rgb(234, 140, 5);"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png" alt="address" width="13" style="display: block; background-color: rgb(234, 140, 5);"></span></td></tr></tbody></table></td><td style="padding: 0px; color: rgb(0, 0, 0);"><span style="font-size: 14px; color: rgb(0, 0, 0);"><span>Karpatské námestie 7770/10A, 831 06, Bratislava, Slovakia</span></span></td></tr></tbody></table></td><td width="45" aria-label="Vertical Spacer"><div style="width: 45px;"></div></td><td style="vertical-align: top;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial;"><tbody><tr><td><img src="https://i.imgur.com/tNiDSfh.png" role="presentation" width="130" style="max-width: 130px; display: block;"></td></tr><tr><td height="30" aria-label="Horizontal Spacer"></td></tr><tr><td style="text-align: center;"><table cellpadding="0" cellspacing="0" border="0" style="vertical-align: -webkit-baseline-middle; font-size: medium; font-family: Arial; margin: 0px; padding: 0px; text-align: center; display: inline-block;"><tbody><tr style="text-align: center;"><td><a href="https://www.linkedin.com/in/adammartak/" style="display: inline-block; padding: 0px; background-color: rgb(112, 117, 219); border-radius: 50%;"><img src="https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-dark-2x.png" alt="linkedin" width="24" loading="lazy" style="background-color: rgb(112, 117, 219); max-width: 135px; display: block; border-radius: inherit;"></a></td><td width="5" aria-label="Vertical Spacer"><div style="width: 5px;"></div></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td height="30" aria-label="Horizontal Spacer"></td></tr><tr><td colspan="3" style="max-width: 300px; font-size: 12px; padding-top: 1rem; text-align: left;"><div class="legal-content"><p style="font-size: inherit; margin: 0px;">This message is confidential and may be privileged. If you are not the intended recipient, we kindly ask you to please inform the sender. Any unauthorised dissemination or copying hereof is prohibited. This message serves for information purposes only and shall not have any legally binding effect. Given that e-mails can easily be subject to manipulation, we can not accept any liability for the content provided.</p></div></td></tr></tbody></table>

[Josh · Accepted solution]

Hi @AMartak,

Regarding the first issue: this is based on the recipient's email client settings in most cases. It is common for the settings to not automatically load images in emails for security purposes. This isn't an issue specific to the HTML email signature.

The second issue: I would suggest adding a smaller version of your logo. I see that the one you have hosted on imgur is fairly large, and in an email signature would never display at that size; uploading one closer to the size that it will actually appear in the signature may reduce that issue, which sounds like a compression issue.

Josh

[AMartak]

Resizing the pic seems to work! Thanks Josh