Automatic Resizing of Feature Images

[ChrisoKlepke]

Hey all, 

I know that HubSpot is optimizing uploaded images and serves the right size accordingly when used on a page.  

My team and I are now wondering if that also counts for Featured Images (specifically Blog Featured Images in our current case). 

From my testing, I'm unable to tell that this form of resizing is taking place, when using the {{ post.featured_image }} variable.

Can I upload a large one as a Featured Image and HubSpot automatically resizes it for mobile?

Does someone of you have an insight on this? @Jnix284, is this something that came up before in your daily business or something you considered building POWER?

Cheers, 

Chriso

[mzweng · Accepted solution]

Hi @ChrisoKlepke,

Sure, you are welcome 😉 

It is true that HubSpot will look for the width or height attributes on the img tag. If the attributes are set, the src URL of the image will be adapted accordingly to serve the image with that dimension as soon as available. 
This is used for the standard image module as well as for images added via a rich-text field and this technique can be used anywhere of course. 

To my knowledge, HubSpot is not creating the srcset attribute automatically. At least for the image module and rich-text fields. Other standard modules might create the srcset attribute. 
I am not sure, because we always take care of that ourselves using the function resize_image_url.
This way you can define ideal sizes across devices because you have extra knowledge of how the responsiveness of your module works, which breakpoints you use, and in which context the module is likely used. We additionally serve retina variants and use a default factor of 1.5 to achieve a good trade-off between quality and file size. 

But I am happy to take a look at an example to see if the srcset was generated automatically by HubSpot. 
It would make sense if a few variations would be generated for the browser to choose from. 

[mzweng]

Hi @ChrisoKlepke,

HubSpot is optimizing uploaded images and provides options to serve those images with the right sizes needed for particular situations/devices. 

But it is the CMS developer's responsibility to tell HubSpot which sizes are needed. The function resize_image_url is used to do that. 

{{ resize_image_url(content.featured_image, the_size_needed) }}

This is ideally done in theme products. It is for the POWER theme and also applies to the featured image of blog posts. 

Hope this helps 😉 

[ChrisoKlepke]

Hey @mzweng, 

thank you for taking the time to respond to my Q. 

Good to know that this function exists.

I have to admit I'm still confused, though: I believed that HubSpot would automatically serve the right one depending on the device in general:

HubSpot-hosted images in CMS content are also automatically resized by appending height and/or width query parameters to the src URL for any images that have a height or width attribute. If a page is requested before an image is resized, the non-resized image will be served for that request. Browsers are given multiple options for the image resolution to load, ensuring that images look crisp on standard and high-resolution displays.

And I can see that process working in some instances on websites we developed and within themes. But in both cases, without the resize_image_url() function. But then other times the process doesn't work. 

Do you know, under which circumstances, HubSpot creates the srcset by itself? Because I can't tell, really. It seems a bit random. 

Thank you, 

Chriso

[mzweng · Accepted solution]

Hi @ChrisoKlepke,

Sure, you are welcome 😉 

It is true that HubSpot will look for the width or height attributes on the img tag. If the attributes are set, the src URL of the image will be adapted accordingly to serve the image with that dimension as soon as available. 
This is used for the standard image module as well as for images added via a rich-text field and this technique can be used anywhere of course. 

To my knowledge, HubSpot is not creating the srcset attribute automatically. At least for the image module and rich-text fields. Other standard modules might create the srcset attribute. 
I am not sure, because we always take care of that ourselves using the function resize_image_url.
This way you can define ideal sizes across devices because you have extra knowledge of how the responsiveness of your module works, which breakpoints you use, and in which context the module is likely used. We additionally serve retina variants and use a default factor of 1.5 to achieve a good trade-off between quality and file size. 

But I am happy to take a look at an example to see if the srcset was generated automatically by HubSpot. 
It would make sense if a few variations would be generated for the browser to choose from. 

[ChrisoKlepke]

Hey @mzweng, 

thank you again for the detailed response. This discussion really helps. I think to get reliable results, the method you're describing might be the best option. After all, this is probably the reason why opted for that approach as well. 

I just would love to understand what HubSpot is doing or not doing on its own. If you also have the urge to drill in deeper, here are two examples. 

First is a blog that is using the Hatch Theme. As far as I can tell, there is no use of the resize_image_function anywhere. But if you inspect the first image in the content, HubSpot clearly created the srcset like described in the docs. Not the feature image, though. But it doesn't have a width and/or height attribute to be fair. 

https://emobility-magazin.com/e-autos/e-auto-versicherung/

Other pages of the same project behave differently. Same with the second example, where I'm just messing around on a test instance just to figure things out. In this case, the srcset isn't created as well for either of the images. This time the feature image has a width/height attribute.

https://25785358.hs-sites-eu1.com/blog/testing-images

Idk man, seems all a bit random to me. Again, probably just best to care of it using the function. 

Cheers, 

Chriso

[mzweng · Accepted solution]

Hi @ChrisoKlepke,

you are very welcome! 
I also would like to understand in what situations the srcset attribute is generated by HubSpot.

I just had a look at your examples and noticed that the srcset is now created for both images on your second example. Did you change something in the meantime? At least for the featured image?

It might just take a bit of time until HubSpot serves images added via rich-text fields with a suitable srcset attribute 🤔

For other images not added via rich-text, such as the featured image of a blog post, I think the theme has to take care of it. 

UPDATE June, 3rd 2023 =======
HubSpot announced in their Developer Updates - May 2023 Rollup that srcset is now also supported for images on sandbox domains, such as hs-sites.com. 

=======

Cheers,
Markus

[ChrisoKlepke]

Hey @mzweng , 

sorry for the late reply. You know how it goes with releases, deadlines and the deserved occasionally vacation 😅.

I think you're onto something here, as I thought the same when reading the docs. 

If a page is requested before an image is resized, the non-resized image will be served for that request. 

That more or less implies that it takes some time. The wording is not very precise here, but I assume it takes a couple of hours or even days to get that sorted. 

But like you said, this doesn't hold true for the feature images. This is definitely something our developers need to take care of. 

Thank you, again, for checking this out with me. I think we mostly solved the case 🕵️

Cheers, 

Chriso

[mzweng]

Hi @ChrisoKlepke ,

no problem, that sounds exactly like our situation 😄 

Thank you for accepting my reply as a solution.

I edited it with some new information from the Developer Updates. 
srcset should now also works on Sandbox domains 🕵️

I think we connected the dots together 👍

Cheers,
Markus

[Jnix284]

@ChrisoKlepke happy to look into this, will see what I can find out 🙂

[ChrisoKlepke]

Very kind! Thank you 🫶