APIs & Integrations

SaltyAlex
Mitwirkender/Mitwirkende | Elite Partner
Mitwirkender/Mitwirkende | Elite Partner

Image Resizing Parameter and Retina

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 Antworten
SaltyAlex
Mitwirkender/Mitwirkende | Elite Partner
Mitwirkender/Mitwirkende | Elite Partner

Image Resizing Parameter and Retina

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.

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Image Resizing Parameter and Retina

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

0 Upvotes
SaltyAlex
Mitwirkender/Mitwirkende | Elite Partner
Mitwirkender/Mitwirkende | Elite Partner

Image Resizing Parameter and Retina

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.

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Image Resizing Parameter and Retina

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

0 Upvotes
SaltyAlex
Mitwirkender/Mitwirkende | Elite Partner
Mitwirkender/Mitwirkende | Elite Partner

Image Resizing Parameter and Retina

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

0 Upvotes
boulter
HubSpot-Produktteam
HubSpot-Produktteam

Image Resizing Parameter and Retina

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.

0 Upvotes
SaltyAlex
Mitwirkender/Mitwirkende | Elite Partner
Mitwirkender/Mitwirkende | Elite Partner

Image Resizing Parameter and Retina

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

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

0 Upvotes
boulter
HubSpot-Produktteam
HubSpot-Produktteam

Image Resizing Parameter and Retina

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.

0 Upvotes
JamiesonC
Teilnehmer/-in

Image Resizing Parameter and Retina

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
Mitwirkender/Mitwirkende | Elite Partner
Mitwirkender/Mitwirkende | Elite Partner

Image Resizing Parameter and Retina

:point_up::ok_hand::100:

0 Upvotes
SaltyAlex
Mitwirkender/Mitwirkende | Elite Partner
Mitwirkender/Mitwirkende | Elite Partner

Image Resizing Parameter and Retina

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

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Image Resizing Parameter and Retina

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

0 Upvotes