Image Resizing Parameter and Retina

[SaltyAlex]

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?

[SaltyAlex]

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.

[3PETE]

@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?

[SaltyAlex]

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.

[3PETE]

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

[SaltyAlex]

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

[boulter]

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.

[SaltyAlex]

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

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

[boulter]

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.

[JamiesonC]

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.)

[SaltyAlex]

[SaltyAlex]

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

[3PETE]

@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?