CMS Development

Courtny
Member

Retina images being auto crunched when hosted from Hubspot

Hello,

 

I noticed when I reference any image hosted in Hubspot, and apply an inline height and width to it, the asset is automatically crunched when served as an email. I am using similar execution mentioned here to try and serve retina images.

 

Hosting these images on an external URL works fine to display the image in retina, but these external URLs mean the email reputation is degraded. Any images hosted outside of the domain that the email is purported to be from will cause issues.

 

Please provide a way for us to host retina graphics and turn off the auto crunching of the image asset!

0 Upvotes
1 Reply 1
MayPascaud
HubSpot Alumni
HubSpot Alumni

Retina images being auto crunched when hosted from Hubspot

Hi @Courtny, thanks for reaching out!

We actually implemented the ability to use retina images in email relatively recently. This article provides some very good context on what to expect when leveraging this feature: https://knowledge.hubspot.com/articles/KCS_Article/COS-General/What-is-automatic-image-resizing

 

From said article: 

 

What does this mean for retina support?

Images displayed on devices with high-dpi displays (generally over 200 pixels per inch, depending on typical viewing distance) would look very small if they were shown at their native resolution. Safari and other browsers that support retina displays will "blow up" images to make them proportional and that can make them appear blurry. One way to solve this problem would be to upload images at 2x the resolution that non-retina displays would show them at and resize the image in the browser. This is a poor solution because it forces most users to download images that are way bigger (2x the size, so 4x the bytes). 

While adding noresize is a solution for images intentionally sized at 2x for retina, there are other solutions. Retina.js is a bit of JavaScript that replaces images with their retina counterparts only on retina displays. You can find instructions for using this here. It's important to note that this may require custom coding and a strong understanding of JavaScript to work with HubSpot images (you can't use '@' in your file names and would need to change the code from the default recommendation). It is strongly recommended that you work with a developer to implement this. 

You can also use CSS to accomplish this. Apple has a pretty thorough developer article on the subject here. Please keep in mind that this method will also likely require the assistance of a developer.

 

As it mentions, you can disable the automatic resizing by adding a ?noresize query parameter to the image's HTML. More on this here: https://knowledge.hubspot.com/articles/KCS_Article/COS-General/Can-I-disable-automatic-image-resizin...

 

Best,

May

0 Upvotes