Image Resizing Parameter and Retina

Highlighted
Regular Contributor | Elite Partner

It appears that Hubspot now utilizes a url parameter that reduces the size of an image to whatever is needed to increase page load speed. Normally, this is awesome, but in some cases Hubspot doesn’t seem to add a source set, but simply adds a single image that ends up getting stretched and blurry on retina displays. This seems to mainly be an issue with emails, but I’ve seen it elsewhere

Is there something we can do to override this on a case by case basis?

12 Replies 12
Highlighted
HubSpot Employee

@s2.alexsivro The image compression sounds like something Akamai(our CDN we use) would be handling/doing. Can you send me some examples of what you are seeing?

Reply
0 Upvotes
Highlighted
Regular Contributor | Elite Partner

Does this help? The actual logo is like 375px. It could be limited by the width attribute or via styles and still work well for retina.

Reply
0 Upvotes
Highlighted
HubSpot Employee

@s2.alexsivro That confirms that is is being sent through Akamai given the subdomain of the src URL. Do you have a screen shot of the image result?

Reply
0 Upvotes
Highlighted
Regular Contributor | Elite Partner

This a screenshot from a retina device. It’s pretty obvious the 125px image is being stretched because it’s not capable of being served at full res. For context, this is in an email template as referenced from the OP.

Reply
0 Upvotes
Highlighted
HubSpot Employee

@s2.alexsivro Are you just experiencing this with emails or with images on other types of content as well? Blogs/LP/pages/etc…

Reply
0 Upvotes
Highlighted
HubSpot Product Team

Hi folks,

The feature you’ve discovered is called Automatic Image Resizing. It’s described here: https://knowledge.hubspot.com/articles/KCS_Article/COS-General/What-is-automatic-image-resizing

It should eliminate the need to upload images at different resolutions for different devices by adding srcsets with sizes for each display resolution.

There’s instructions on how to disable it for individual images here: https://knowledge.hubspot.com/articles/KCS_Article/COS-General/Can-I-disable-automatic-image-resizin...

Before you disable it, it would be helpful to see to the original template so we can investigate the issue further.

Reply
0 Upvotes
Highlighted
Regular Contributor | Elite Partner

It’s a module. I can’t put that at the end of the URL:

https://app.hubspot.com/design-manager/532045/templates/4988672619

Reply
0 Upvotes
Highlighted
HubSpot Product Team

That’s helpful. Do you have a URL of an example email or page? I’d like to pinpoint the image in question. Generally you can add ?noresize by using a custom URL in the file picker.

Reply
0 Upvotes
Highlighted
Regular Contributor | Elite Partner

Hm… I forgot about that. Usually file picker selections are on autopilot for me. I’ll give that a try.

Reply
0 Upvotes
Highlighted
Regular Contributor

Adding ?noresize to a custom URL works, but there need to be more robust options in the Image module as well. Either a “no resize” boolean parameter, or an option to specify a scale factor, e.g. “Scale image to X times the target size in the email or landing page.” (The latter idea, if incorporated into the template rather than the editor UI, would actually be quite nice, because it puts the control in the hands of the designer rather than the content author. For those of us who wear both hats, it would give us the additional control we need, without forcing us to derive custom URLs for every single image.)

Highlighted
Regular Contributor | Elite Partner

:point_up::ok_hand::100:

Reply
0 Upvotes
Highlighted
Regular Contributor | Elite Partner

This is an email. I’ve seen it happen on page templates as well, especially with the logo module.

Reply
0 Upvotes