Image in signature builder shows too large

New Contributor

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. 

 

file.jpg

Reply
0 Upvotes
6 Replies 6
Top Contributor | Diamond Partner

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

◝⊡_⊡◜ Jon Payne
Founder and Technical Director of Noisy Little Monkey, the UK's favourite Diamond HubSpot Partner Agency that has a monkey in the logo.
New Contributor

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>&nbsp;</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="https://twitter.com/kidsinsights?lang=en " 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="https://www.linkedin.com/company/kids-insights " 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>

 

 

Reply
0 Upvotes
Top Contributor | Diamond Partner

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! 🙂

◝⊡_⊡◜ Jon Payne
Founder and Technical Director of Noisy Little Monkey, the UK's favourite Diamond HubSpot Partner Agency that has a monkey in the logo.
New Contributor

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. 

 

Reply
0 Upvotes
Top Contributor | Diamond Partner

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: https://blog.hubspot.com/marketing/what-are-utm-tracking-codes-ht 

 

Let me know how you get on!

◝⊡_⊡◜ Jon Payne
Founder and Technical Director of Noisy Little Monkey, the UK's favourite Diamond HubSpot Partner Agency that has a monkey in the logo.
Reply
0 Upvotes
Top Contributor | Diamond Partner

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 🙂

◝⊡_⊡◜ Jon Payne
Founder and Technical Director of Noisy Little Monkey, the UK's favourite Diamond HubSpot Partner Agency that has a monkey in the logo.