Dynamic sizing of featured images?

[Bleary]

Hi all, 

I'm having some trouble with my site performance on mobile. Page Insights suggests that I could save 135 KiB by properly sizing the featured images on blog posts.

Is that possible in Hubspot? I'm using the Featured Image function in the blog editor, which seems to allow just one featured image. 

thanks in advance for any thoughts or input,

Ber

[PJanakiraman6]

Hey @Bleary I completely agree with resizing image suggested by  @dennisedson, It did help our website with speed optimization for mobile users but additionally for Optimization I take an extra step. I have installed an exclusive app to automate my image optimization – The HubSpot app is LitePics

First I opted for a free plan and then transitioned to personalized plan, it is productive and also helps me maintain that visual consistency of images that I am looking for. 

[webdew]

Hi @Bleary ,

For Hubspot Blog Optimization you can perform these things it's very helpful.

How to Size Images for Your Blog Content
Reference doc:- https://blog.hubspot.com/customers/size-images-blog-content
You can use a lazy load class for your blog's images optimization.
https://developers.hubspot.com/docs/cms/guides/speed/lazy-loading

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[jonchim · Accepted solution]

Hey @Bleary,

What @dennisedson suggested with resize_image_url should definitley help with site performance on mobile. If you have access to Photoshop it would definitley make life easier when saving optimized images for web, you can resize and adjust quality and then afterwards use tinyjpg.com to compress it even further.

If you don't have Photoshop and the image that was uploaded to HubSpot is too big, you can clone and edit the image and resize it that way. So I believe you can only have one featured image in the blog post but if you need to choose a different featured image you should be able to reupload and select the resized image.

You can try something like this example to size it down by giving it specific dimensions, depending on how big you want your images to go, but something like this will set it to 600px wide. But you can adjust by width, height, length.

<img src="{{ resize_image_url(content.featured_image, 600, 0, 0 ) }}">

Let me know if that works for you!  

[dennisedson]

@Bleary 

Most likely, the images that you are uploading are too big.  There is an resize_image_url function that you can use that will render the image to a desired size server side which could help

@jonchim 👋, any thoughts?