CMS Development

PeterM1
Mitglied

Image quality on retina displays

lösung

Hi there,

We've been having an issue where any image uploaded to Hubspot (whether it be a cta image, logo, photo etc)  always displays un-crisply on retina displays. 

We have tried using @2x pngs, and a bunch of others, but that doesn't change the quality. Inspecting the code, it looks like Hubpsot makes a lower-res copy of the image on their server.  The filename is different in the screenshot below than what the image is actually called.

 

Screen Shot 2019-03-26 at 8.32.28 AM.png

 

 

Does anyone have an idea of how to ensure images are super crisp on all types of screens?

1 Akzeptierte Lösung
theAndreyK
Lösung
Mitwirkender/Mitwirkende | Partner
Mitwirkender/Mitwirkende | Partner

Image quality on retina displays

lösung

You could lazy load the images. That would essentially let you use Hubspot's automatic resizing for your own benefit. 

 

This is the solution I ended up using: https://www.bluleadz.com/blog/lazy-loading-images-on-hubspot

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
4 Antworten
PeterM1
Mitglied

Image quality on retina displays

lösung

Thanks for the info guys. We've explored the ?noresize option, but it gets messy with mobile optimisation. Is there an easy way to disable ?noresize for mobile and keep it on larger displays?

0 Upvotes
theAndreyK
Lösung
Mitwirkender/Mitwirkende | Partner
Mitwirkender/Mitwirkende | Partner

Image quality on retina displays

lösung

You could lazy load the images. That would essentially let you use Hubspot's automatic resizing for your own benefit. 

 

This is the solution I ended up using: https://www.bluleadz.com/blog/lazy-loading-images-on-hubspot

0 Upvotes
Kevin-C
Trendsetter/-in | Partner
Trendsetter/-in | Partner

Image quality on retina displays

lösung

Hey @PeterM1 

 

Checkout this article, it may shed some light on the subject.

 

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Upvotes
Stephanie-OG
Autorität

Image quality on retina displays

lösung

Hello Peter,

 

HubSpot automatically resizes images to improve page speed but, if the quality of a particular image needs to be higher, you can use ?noresize at the end of the image src to override it. Details here.

 

I typically find it's not needed for photos, but is useful for logos, images with text... etc. 

 

I hope that helps!

 

Stephanie


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!