Dynamic sizing of featured images?

SOLVE
Bleary
Member

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

0 Upvotes
1 Accepted solution

Accepted Solutions
jonchim
Solution
Guide | Diamond Partner

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!  






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

3 Replies 3
dennisedson
Community Manager

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

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
jonchim
Solution
Guide | Diamond Partner

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!  






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

webdew
Top Contributor | Diamond Partner

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. 

0 Upvotes