Hi Community
I have recently used the signature builder to compose an email signature. When I have gone to input an image as a CTA, the image looks fine but then when I have sent a test email the image looks huge. I have tried resizing it using the raw HTML and CSS which looks fine in a preview but again, when a test is sent it looks huge.
Does anyone have any ideas how to resize? The image itself is only 50kb.
Hi Dan - Can you reply and paste in the HTML of the signature? I’ve had this problem before, maybe if I take a look I can help..
Jon
Hi Jon
Thanks a lot. Source code below…
<table cellpadding=“0” cellspacing=“0” class=“sc-gPEVay eQYmiW” style=“vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;”><tbody><tr><td><table cellpadding=“0” cellspacing=“0” class=“sc-gPEVay eQYmiW” style=“vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;”><tbody><tr><td style=“vertical-align: middle;”><h3 color=“#2D2E83” class=“sc-fBuWsC eeihxG” style=“margin: 0px; font-size: 20px; color: rgb(45, 46, 131);”><span>DANIEL</span><span>\ </span><span>LUCAS</span></h3><p color=“#2D2E83” font-size=“large” class=“sc-fMiknA bxZCMx” style=“margin: 0px; color: rgb(45, 46, 131); font-size: 16px; line-height: 24px;”><span>CHIEF TECHNOLOGY OFFICER</span></p><p color=“#2D2E83” font-size=“large” class=“sc-dVhcbM fghLuF” style=“margin: 0px; font-weight: 500; color: rgb(45, 46, 131); font-size: 16px; line-height: 24px;”><span>The Insights People</span></p></td><td width=“30”><div style=“width: 30px;”></div></td><td color=“#27aae1” direction=“vertical” width=“1” class=“sc-jhAzac hmXDXQ” style=“width: 1px; border-bottom: none; border-left: 1px solid rgb(39, 170, 225);”></td><td width=“30”><div style=“width: 30px;”></div></td><td style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” class=“sc-gPEVay eQYmiW” style=“vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;”><tbody><tr height=“25” style=“vertical-align: middle;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” class=“sc-gPEVay eQYmiW” style=“vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;”><tbody><tr><td style=“vertical-align: bottom;”><span color=“#27aae1” width=“11” class=“sc-jlyJG bbyJzT” style=“display: block; background-color: rgb(39, 170, 225);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/phone-icon-2x.png " color=”#27aae1" width=“13” class=“sc-iRbamj blSEcj” style=“display: block; background-color: rgb(39, 170, 225);”></span></td></tr></tbody></table></td><td style=“padding: 0px; color: rgb(45, 46, 131);”><a href=“tel:07376773126” color=“#2D2E83” class=“sc-gipzik iyhjGb” style=“text-decoration: none; color: rgb(45, 46, 131); font-size: 12px;”><span>07376773126</span></a> | <a href=“tel:07376773126” color=“#2D2E83” class=“sc-gipzik iyhjGb” style=“text-decoration: none; color: rgb(45, 46, 131); font-size: 12px;”><span>07376773126</span></a></td></tr><tr height=“25” style=“vertical-align: middle;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” class=“sc-gPEVay eQYmiW” style=“vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;”><tbody><tr><td style=“vertical-align: bottom;”><span color=“#27aae1” width=“11” class=“sc-jlyJG bbyJzT” style=“display: block; background-color: rgb(39, 170, 225);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/email-icon-2x.png " color=”#27aae1" width=“13” class=“sc-iRbamj blSEcj” style=“display: block; background-color: rgb(39, 170, 225);”></span></td></tr></tbody></table></td><td style=“padding: 0px;”><a href="mailto:daniel@theinsightspeople.com" color=“#2D2E83” class=“sc-gipzik iyhjGb” style=“text-decoration: none; color: rgb(45, 46, 131); font-size: 12px;”><span>daniel@theinsightspeople.com</span></a></td></tr><tr height=“25” style=“vertical-align: middle;”><td width=“30” style=“vertical-align: middle;”><table cellpadding=“0” cellspacing=“0” class=“sc-gPEVay eQYmiW” style=“vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana;”><tbody><tr><td style=“vertical-align: bottom;”><span color=“#27aae1” width=“11” class=“sc-jlyJG bbyJzT” style=“display: block; background-color: rgb(39, 170, 225);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/address-icon-2x.png " color=”#27aae1" width=“13” class=“sc-iRbamj blSEcj” style=“display: block; background-color: rgb(39, 170, 225);”></span></td></tr></tbody></table></td><td style=“padding: 0px;”><span color=“#2D2E83” class=“sc-csuQGl CQhxV” style=“font-size: 12px; color: rgb(45, 46, 131);”><span>113-115 Portland Street, Manchester, M1 6DW</span></span></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td><table cellpadding=“0” cellspacing=“0” class=“sc-gPEVay eQYmiW” style=“vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana; width: 100%;”><tbody><tr><td height=“30”></td></tr><tr><td color=“#27aae1” direction=“horizontal” height=“1” class=“sc-jhAzac hmXDXQ” style=“width: 100%; border-bottom: 1px solid rgb(39, 170, 225); border-left: none; display: block;”></td></tr><tr><td height=“30”></td></tr></tbody></table></td></tr><tr><td><table cellpadding=“0” cellspacing=“0” class=“sc-gPEVay eQYmiW” style=“vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana; width: 100%;”><tbody><tr><td style=“vertical-align: top;”><img src=“https://f.hubspotusercontent40.net/hubfs/4351596/TIP_Colour.png " role=“presentation” width=“130” class=“sc-cHGsZl bHiaRe” style=“max-width: 130px; display: inline-block;”></td><td style=“text-align: right; vertical-align: top;”><table cellpadding=“0” cellspacing=“0” class=“sc-gPEVay eQYmiW” style=“vertical-align: -webkit-baseline-middle; font-size: large; font-family: Verdana; display: inline-block;”><tbody><tr style=“text-align: right;”><td><a href=“kidsinsights (@kidsinsights) / X " color=”#27AAE1” class=“sc-hzDkRC kpsoyz” style=“display: inline-block; padding: 0px; background-color: rgb(39, 170, 225);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/twitter-icon-2x.png " alt=“twitter” color=”#27AAE1" height=“24” class=“sc-bRBYWo ccSRck” style=“background-color: rgb(39, 170, 225); max-width: 135px; display: block;”></a></td><td width=“5”><div></div></td><td><a href=“Kids Insights | LinkedIn " color=”#27AAE1" class=“sc-hzDkRC kpsoyz” style=“display: inline-block; padding: 0px; background-color: rgb(39, 170, 225);”><img src=“https://cdn2.hubspot.net/hubfs/53/tools/email-signature-generator/icons/linkedin-icon-2x.png " alt=“linkedin” color=”#27AAE1" height=“24” class=“sc-bRBYWo ccSRck” style=“background-color: rgb(39, 170, 225); max-width: 135px; display: block;”></a></td><td width=“5”><div></div></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td height=“30”></td></tr><tr><td style=“text-align: center;”><span style=“display: block; text-align: center;”><a target=“_blank” rel=“noopener noreferrer” href=“https://kidsinsights.com/2020/07/28/the-insights-people-continues-global-expansion-into-australia-and-canada-2/ " color=”#27AAE1" class=“sc-fAjcbJ byigni” style=“border-width: initial; border-style: none; border-color: initial; display: inline-block; background-color: transparent; color: rgb(255, 255, 255); font-weight: 700; text-decoration: none; text-align: center; line-height: 1; font-size: 12px; border-radius: 3px;”><img src="https://f.hubspotusercontent40.net/hubfs/4351596/test.png " role=“presentation” class=“sc-caSCKo jjNSwx” style=“text-decoration: none; max-width: 728px;”></a></span></td></tr></tbody></table>
Is it this image you’re having problems with?
https://f.hubspotusercontent40.net/hubfs/4351596/TIP_Colour.png
If so - it looks like you’re trying to constrain it to 130px wide, is that right?
Again, if I’m right on that, the easiest way is to resize the image itself and not rely on the HTML / CSS to do it. Different email clients will render it in loads of different ways. I’d resize it on your machine to the right size, give it a new name and try using the new image. Should do the trick unless something gets stuck in the cache. Let me know how you get on, or if my assumptions are wrong! 
Hi Jon
No, that’s the logo and is sized fine. Its the blue image at the bottom that’s being used as an image CTA (https://f.hubspotusercontent40.net/hubfs/4351596/test.png)
The image itself has already been resized and fits perfectly on Outlook when we use it in signatures there. HubSpot seems to blow it up to a larger size when on the preview it looks fine.
Ah. OK!
This:
The image itself is 1584px wide x 396px high. If you follow the link in Chrome / Firefox, and set your zoom to 100% you’ll get the idea.
Which is, i imagine, why there’s a problem in HubSpot’s preview. Given the number of different email clients that people are using, it’s safest to make all the images the acutal size that will work for most people (at Noisy Little Monkey we tend to aim for a footer banner CTA which is 650px wide by 150 high. Then upload that size image to HubSpot and don’t fuss with the image attributes in the HTML, just let each email client work it out for itself. Typically, that works.
My advice is to get your graphic designer (or you, if it’s you for the purposes of email sigs) to resize the images to more appropriate sizes, upload the assets with new names (otherwise you might have problems with caching) and recreate the signature using the new images.
It might look occasionally look wonky on the preview but you can be confident in 95% of cases, it’s gonna look OK when it arrives.
One final thing - You might be all over this, but just in case you’ve missed it: Add some UTM tracking so you can see just how many people actually click the banner. Here’s how: UTM Codes: How to Create UTM Tracking URLs on Google Analytics
Let me know how you get on!
Oh, @DanTIP - Can’t see HubSpot tracking on your site, might be hidden in GTM? Anyway, I’d add it and even if you choose not to, the UTM tracking will show up in Google Analytics anyway
Hi @JonPayne I am also having the same issue…I get this error:
Something went wrong Your email signature is too long and can’t be saved. It must be less than 65,535 characters. Try making it smaller.
I have tried everything to make the logo smaller, and even then it still appears.
James | Market Jar
Hello @JNathan5, could you please provide us more details such as how many characters does your signature contains?
The more information, screenshots, and details you can provide, the better I can advise on the next steps.
Thank you,
Pam
