Image quality on retina displays

[PeterM1]

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.

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

[PeterM1]

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?

[theAndreyK · Accepted solution]

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

[Kevin-C]

Hey @PeterM1 

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

[Stephanie-OG]

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!