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.

Mises à jour HubSpot
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 très heureux

72 Commentaires
Courtny
Membre

Upvote! The auto compression for retina images hosted in Hubspot is very annoying! Perhaps have an option to bypass this with an appropriate named resource (@2x prepend or something)

 

"Guys, huddle in and take a knee… Listen, it’s 2017. Mobile opens outweigh desktop opens by 2-1. Every mobile device has an HD display. Now … what the hell are you doing over there?"

Kanefire
Contributeur

agreed. macs make up a significant percentage of machines used. Retina and HD is here to stay. Having a native way to handle images without devs/js/coding is a must.

ojobson
Contributeur de premier rang

 It's not just macs but pretty much EVERY MOBILE DEVICE! Any half decent mobile device produced in the last couple of years has a high res screen and graphics containing text look rubbish if the image isn't made to suite.

 

The issue isn't the compression, it's due to not serving a large enough image. The image needs to be aprox' double height and width. If you have high compression and double size images, the images are still fairly small in filesize, but look great on screens with high pixel density, like retina.

ojobson
Contributeur de premier rang

Possible work around, foudn here: https://inbound.org/discuss/image-quality-loss-in-ctas

 

1. Make your CTA as you normally would, including uploading your 144 dpi image, and save the CTA.

2. Edit your CTA from the main list of CTAs, go to the Design tab, and click "Original" under Image Size. 

3. Save your CTA again, and voila! The quality is no longer crappy.

 

UPDATE: This doesn't work 😕

raleighleslie
Membre

Oh man I cannot beleive there is no way to display retina CTA images!

I have tried every which way to no avail... the possible work around above does not work.

 

Please make it so we can serve the original image but sized down! Thanks!

tabbs
Membre

The workaround above looks helpful, but this is certainly something that should not require a workaround. 

But..... not sure this is going to be helpful for the Header/Footers? 

raleighleslie
Membre

The workaround does not solve the problem here. 

 

It is currently not possible to have Retina CTA images. Cannot wait till it is possible!

 

Embarrassing pixelated CTA's misrepresenting our companies care about quality... 😞

ojobson
Contributeur de premier rang

Yep - not good. No idea if there is even a road map for this?

JDot14
Membre

Yup yup, same boat here - the combination of image compression and no retina support for the CTA is killing me. My emails look super sloppy because of that - it's just not good enough! 

 

 

 

Justin14
Participant

Was just about to post a question about this - it's really a major pain. On mobile the CTA's look terribly blurry and I can't seem to fix this. It absolutely needs to change - something like 56% of our opens are on mobile 😞

jakeb
Participant

+1

 

I'm surprised that it's been over 4 months since this issue was reported and HS has yet to respond to this. This is a valid bug and really is preventing us from wanting to use CTAs.

mike-ward
Conseiller clé

Another +1.

It's awful having low-resolution CTAs when the majority of users are opening emails on a high-res phone display.

And the only workaround would be to not use HubSpot CTA functionality but build-your-own - which kind of defeats the point!

jakeb
Participant

6 weeks later... no response from HubSpot! Still dealing with 1x graphics, and I'm still cringing every time I see one of our emails.

 

I wonder if HubSpot reads these threads...

Kanefire
Contributeur

yeah, there is a bunch of critical stuff just languishing. they seem to be only focused on the things that will make them more money. kind of ironic for a company that coined the term "inbound marketing" where it is all about the user experience.

mitchellkp
Contributeur de premier rang

We need to elevate this issue with votes. Share with your networks and others users to get it upvoted. It looks like so much HS dev is on sales products and new revenue, not helping with UX. CTA images, better WF controls (holidays/pause), email flexible templates, etc.

 
Kanefire
Contributeur

We are on sales side to and... well... that needs serious help too. They built their platform based on their ideology and not the needs of the companies that use it and it is biting them in the arse right now. Again, ironic for a company who captured the term "inbound" which is bottom up.

Sonnenberg
Membre

The only solution I found was to use the Rich Text Module instead of the build in Image Modile. Insert the retina image then use inline CSS to resize smaller.

 

Szed
Participant

Up.

I can't  believe this is still an issue.

CTA's look so ugly, i won't click on it event with a stick.

 

Please Hubspot, fix this!

 

 

mitchellkp
Contributeur de premier rang

I'd like to use Smart CTAs but I will not without retina support for HS CTAs

 
T_G
Membre | Partenaire solutions
Membre | Partenaire solutions

We are still having issues with this.  We're an agency and it's hard to sell a product you think has major flaws in essential areas. We didn't think to ask "will it take us 20 times longer to build emailers with CTAs than in any other available platform?"  (not exaggerating -- we track our time).