HubSpot Ideas

mitchellkp

CTA retina display support

 

HubSpot automatically compresses images, CTAs - either custom image or the out of the box Hubspot stylings -- do not look crisp, clear and high-res on retina displays.

 

 

Add support for retina and otherwise address the image quality loss in CTAs.

HubSpot Updates
April 16, 2021 05:02 AM

Hi HubSpot Community,

 

My name is Dom and I’m a Product Manager at Hubspot. I’m really interested in finding out how folks are currently using CTAs, what’s working, what’s not working and what new functionality you’d like to see in the future. Please DM me if you’re interested in a quick 30 min chat with myself and the team. 

 

Best,

Dom

April 12, 2018 04:16 PM

Interesting, thanks for confirming @jhachquet. That sounds like a good plan, we'll be in touch with support on our side and get to the bottom of what you're seeing. Thanks again!

April 12, 2018 03:39 PM

Hi @jhachquet, @mitchellkp@AnastasiaSG@Annie_B, looping back on this, this is indeed a brand new feature, but I should have mentioned in the original post that it's part of the new CTA app specifically, not available in the legacy version. All  customers should have the ability to move to the new editor since Feb 20th via a message in the bottom-right of the old CTA app, but if you're seeing any issues with that definitely let me know. (Some more info on the new app can be found here). 

 

Some details on what actually changed here, previously even if you uploaded a 2x image into CTAs (let's say a 200x200px image for a 100x100px CTA) the moment that the CTA was sized to it's final dimensions (100x100px) the original image would then be resized down to 100x100px too. This is what made things so fuzzy. With this update to the CTA rendering engine, if an image is uploaded at 200x200px for a 100x100px CTA, we store the original size, and made a second copy of it at 100x100px and serve both versions with the CTA when it's rendered on your site and in email. We take advantage of a HTML attribute called srcset which allows us to provide two separate URLs for two different images, one at 100x100px and another at 200x200px and then the browser/device picks which one it's going to use to load the image depending on the pixel density of the screen it's loading on. This scrset attribute works for both websites and most major email clients so it should kick in across the board. 

 

This also works for button-based CTAs (the out of the box CTAs) when used inside emails too. When building a button-based CTA, it's turned into an image to be used in the email, and provided at a 1x, 2x, 3x and 4x resolution in the mail to be sure it shows up as crisp as possible. A note on buttons in emails though, right now button CTAs show up in emails as images, this is due to a limitation on the options to render standard HTML in email clients, a lot of HTML isn't supported so the only way we can be sure it'll look correct is by turning it into an image. We're actively looking into creating a way for customers to build proper HTML buttons for emails that are built using email-safe HTML and at that point buttons will always render as HTML and never require an email, but in the meantime these buttons are also rendering as retina-supported images, no work needed from you, that part's automatic. 

 

I hope this helps shine a little light on it, if there's anything I can clarify or if you have any follow up quesitons definitely let me know.

Re: CTA retina display support - changed to: Delivered
April 11, 2018 07:58 AM

Hi all, this update to CTAs is now available to everyone. To learn a little more about how it works and to try it out, check out the top section of our guide here: https://knowledge.hubspot.com/cta-user-guide-v2/how-to-create-a-call-to-action-cta-with-a-custom-image

 

Thanks!

Re: CTA retina display support - changed to: In Beta
March 09, 2018 07:22 AM

Hi all, some really good news here, after a substantial amount of research and work to rebuild CTAs we now have a beta of a re-implemented image rendering for CTAs that supports retina optimisation right out of the box. We'll be rolling this out to all customers over the course of the next few weeks. Stay tuned Smiley Very Happy

72 Replies
Kanefire
Contributor

@everyone in this thread, send a support ticket. I did again yesterday and got this response:

 

"Just want to let you know I've been looking deeply into this case and I see that there isn't a timeline on when this will be rolled up"

 

This is ridiculous and they need to be pushed hard. CTAs is the heart of conversion which an inbound marketing company should take ALL EFFORT to optimize, instead they are dragging their feet. They need to be pushed hard!

jhachquet
Member | Elite Partner

I agree 100%. This is absolutely necessary in this day and age. I have clients that are unhappy with the low quality display on retina screens. It's an issue for both web and email. We're having to use workarounds which clients aren't happy about since they're paying for HubSpot and expecting good quality. Please fix!

Annie_B
Member

Experiencing the same here. I get email envy every time I get an email from another email client that has clear CTA's. Why is this still a problem in 2018? HubSpot please get on this! 

FerdinandW
Member

Working on a Mailing Template for a customer and I cant believe that retina displays are not supported! This is really a must have. It makes hubspot mailings look absoultely unprofessional on mobile.

 

And the worst thing about this is: I can't even figure out how to upvote this idea (One would think that it could be done by clicking on the upvote count... but... ehm.. no... that just shows a list of all people who have upvoted and no further options. What an amazing user experience! Not...)

Shay
HubSpot Product Team

Hi all, some really good news here, after a substantial amount of research and work to rebuild CTAs we now have a beta of a re-implemented image rendering for CTAs that supports retina optimisation right out of the box. We'll be rolling this out to all customers over the course of the next few weeks. Stay tuned Smiley Very Happy

Szed
Participant

Wow!

Great news. 🙂

 

ojobson
Top Contributor

Whooooooooooooooooooooooooooooooooooo!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Kanefire
Contributor

@Shay Heart

T_G
Member | Partner
Member | Partner

This is really fantastic news!  Thanks for the update, Shay - and thanks to the dev team for tackling this.  

benvanlooy
Top Contributor | Platinum Partner

 Yes, fix this ASAP.

 

Our clients are extremely annoyed by this and I can only agree.

 

 

AnastasiaSG
Member

 

Great news !!

We are waiting for this update for very long. (we already got some complains from clients and leads)

Thanks for the update.

 

travwhite
Contributor | Diamond Partner

How can we create beautiful emails when they CTA's look the way they do... surely this is an easy fix.... Common Hubspot...

ojobson
Top Contributor

Read the thread - this is now in Beta, so we shall hopefully have it soon.

Shay
HubSpot Product Team

Hi all, this update to CTAs is now available to everyone. To learn a little more about how it works and to try it out, check out the top section of our guide here: https://knowledge.hubspot.com/cta-user-guide-v2/how-to-create-a-call-to-action-cta-with-a-custom-ima...

 

Thanks!

Annie_B
Member

Hi Shay - 

 

Is this just a workaround for the issue with the CTA editor? Haven't we always had the ability to upload a custom CTA that would look more clear? The issue seems to be with Hubpot's CTA editor itself, not the custom CTA feature. 

AnastasiaSG
Member

Hi Shay,

 

Like Annie B I am frustrated to see that the update is actualy a workaround already known.

I thought that Hubspot's CTA editor was going be improved in order to get unblurry CTAs.

Is an another CTA update being worked on ?

mitchellkp
Top Contributor

@Shay Am I missing something? This doesn't appear to involve development or a new feature. Have you stopped compressing images? What about the out of the box Hubspot buttons?

jhachquet
Member | Elite Partner

Hi Shay,

 

I don't see how this is an update. We've always been able to upload images 2x the size. This doesn't fix the issue of HubSpot CTA buttons displaying poorly.

 

Please let us know when that has been resolved as I think that's the issue we're all having and our clients are complaining about.

 

Thanks,

 

J'Neal

Shay
HubSpot Product Team

Hi @jhachquet, @mitchellkp@AnastasiaSG@Annie_B, looping back on this, this is indeed a brand new feature, but I should have mentioned in the original post that it's part of the new CTA app specifically, not available in the legacy version. All  customers should have the ability to move to the new editor since Feb 20th via a message in the bottom-right of the old CTA app, but if you're seeing any issues with that definitely let me know. (Some more info on the new app can be found here). 

 

Some details on what actually changed here, previously even if you uploaded a 2x image into CTAs (let's say a 200x200px image for a 100x100px CTA) the moment that the CTA was sized to it's final dimensions (100x100px) the original image would then be resized down to 100x100px too. This is what made things so fuzzy. With this update to the CTA rendering engine, if an image is uploaded at 200x200px for a 100x100px CTA, we store the original size, and made a second copy of it at 100x100px and serve both versions with the CTA when it's rendered on your site and in email. We take advantage of a HTML attribute called srcset which allows us to provide two separate URLs for two different images, one at 100x100px and another at 200x200px and then the browser/device picks which one it's going to use to load the image depending on the pixel density of the screen it's loading on. This scrset attribute works for both websites and most major email clients so it should kick in across the board. 

 

This also works for button-based CTAs (the out of the box CTAs) when used inside emails too. When building a button-based CTA, it's turned into an image to be used in the email, and provided at a 1x, 2x, 3x and 4x resolution in the mail to be sure it shows up as crisp as possible. A note on buttons in emails though, right now button CTAs show up in emails as images, this is due to a limitation on the options to render standard HTML in email clients, a lot of HTML isn't supported so the only way we can be sure it'll look correct is by turning it into an image. We're actively looking into creating a way for customers to build proper HTML buttons for emails that are built using email-safe HTML and at that point buttons will always render as HTML and never require an email, but in the meantime these buttons are also rendering as retina-supported images, no work needed from you, that part's automatic. 

 

I hope this helps shine a little light on it, if there's anything I can clarify or if you have any follow up quesitons definitely let me know.

jhachquet
Member | Elite Partner

@Shay Thanks for the follow-up message. That's good to know with image based CTAs. We did upgrade to the new CTA app, but are still having problems with button-based CTAs. Based on your last message, it sounds like this should have been resolved with the update, so I'll reach out to HS support to see why our client accounts still have retina resolution issues even after this app update.