CMS Development

PeterM1
Membro

Image quality on retina displays

resolver

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 Solução aceita
theAndreyK
Solução
Colaborador(a) | Parceiro
Colaborador(a) | Parceiro

Image quality on retina displays

resolver

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

Exibir solução no post original

0 Avaliação positiva
4 Respostas 4
PeterM1
Membro

Image quality on retina displays

resolver

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 Avaliação positiva
theAndreyK
Solução
Colaborador(a) | Parceiro
Colaborador(a) | Parceiro

Image quality on retina displays

resolver

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 Avaliação positiva
Kevin-C
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

Image quality on retina displays

resolver

Hey @PeterM1 

 

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

 

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
0 Avaliação positiva
Stephanie-OG
Conselheiro(a) de destaque

Image quality on retina displays

resolver

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!