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.

Actualizaciones de 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 Emoticono muy feliz

72 Comentarios
robinsonjn22
Participante | Partner

Couldn't agree more. Hubspot, please reopen this. 

blinkertoon
Colaborador

Just to add my voice to this idea / issue. We've managed to resolve our resolution issues, but is not ideal - and now face the same with CTA buttons. Makes no sense for these to look nice and crisp when you're creating them, only to appear fizzy on delivery to customers/prospects?! 😕

alt36
Colaborador

Ya.... Been working on this for far too long. Ridiculous... My work around: Created own image button, inserted it in a rich text module, and linked it... 

 

Looks clear and achieves desired reults, but essentially renders CTAs pointless. 

MDeane
Miembro

How about Hubspot disable automatic resizing and provide an option to enable when necessary? This should apply to Blogs, Pages, and Emails where needed.

 

Signed up to Hubspot Community to specifically comment on this issue.

 

When creating Emails, the image quailty is horrendous. There is currently no work around.

MDeane
Miembro

I managed to find a workaround.

 

- Use an HTML module and add `?noresize` to image path.

 

Issue should still be addressed. Ideally there should be no technical know how to bypass Hubspot image resizing. Our marketing team should be able to handle this without complication once template has been built.

nehafullharvest
Miembro

Upvote! This has been an extremely frustrating issue for our team both for images and CTAs. There definitely needs to be a fix!

HLopchan
Miembro | Partner

I was checking with Email CTAs using 2x size of images but found it works with Desktop but still fuzzy with Mobile.

DomRychlik
Equipo de producto de HubSpot

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

KTapiero
HubSpot Employee

Hi Team! 

This issue is still very present in our customers' email creation process, as we all know CTA's help to have better control of the data and have more insights on the behaviors of the contacts, I do see how this can affect our customers day today. I know that we are also working on improving, however, wanted to share my experience. Thanks 🙂

PJanakiraman6
Colaborador | Partner nivel Diamond

Just followed the article shared by Shay from HubSpot product team in the below page and it has helped me a great deal. Although I take one extra measure for optimization of images I have recently switched to an Image compression app in HubSpot called LitePics – It automates the image compression without affecting the quality of images. Just switched to the app as its productive.

MusicMarketer78
Participante

HubSpot - we still need resolution on this. Having blurry text on an out-of-the-box CTA is very concerning given that CTAs are key elements to email marketing. 

squigglebit
Colaborador

5 Years later and thsus us still an issue?
Blurry header images and low res CTA's are not acceptable.