topic Re: Image quality on retina displays in CMS Development

Image quality on retina displays

PeterM1 — Thu, 28 Mar 2019 03:44:57 GMT

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?

Re: Image quality on retina displays

Stephanie-OG — Thu, 28 Mar 2019 12:41:34 GMT

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!

Re: Image quality on retina displays

Kevin-C — Thu, 28 Mar 2019 12:52:11 GMT

Hey @PeterM1

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

Re: Image quality on retina displays

PeterM1 — Thu, 28 Mar 2019 20:47:14 GMT

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?

Re: Image quality on retina displays

theAndreyK — Thu, 28 Mar 2019 21:59:23 GMT

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