Whether you’re creating a website, publishing a blog post, or running a social media account for your business, users expect eye catching, properly-sized and high-quality images.
Based on the studies, it takes 0.05 - 0.5 seconds for users to form an opinion about your website which determines whether they’ll stay or leave. This first impression depends on a variety of factors: page structure, images, colours, spacing, vertical rhythm, symmetry, amount of text, fonts etc. From the business point of view, one of the key factors is the website's position in the search engine results page and performance has a huge impact on it.
In this article we will focus on the images and why we should consider a compromise between the image quality and performance, especially in regards to the page loading time and how to prepare the HubSpot theme to solve this issue for us automatically.
For CMS admins, the easiest way is to directly upload a high resolution image from an SLR camera or stock. But many people use low bandwidth internet connections and may experience very long webpage loading time with e.g. layout shifts which can have a negative impact on their opinion about a company or a product.
Generally, HubSpot is prepared for this scenario. Automatic image resizing is enabled by default for HubSpot-hosted content. It optimizses images to fit the screen they're viewed on which can decrease browser load-time and improve Google PageSpeed score. But to use this feature the image placeholder must have height and width attributes defined in the <img> tag to be resized.
Resize image url function
Sometimes this is impossible, because we would like to use a different size on mobiles and desktop. In this case we can use responsive images with HubSpot resize_image_url function.
{{ resize_image_url("https://your.hubspot.site/hubfs/img.jpg", 0, 0, 300) }}
As a result, the code would look like this:
<img
class="blog-index__post-image"
src="{{ resize_image_url( content.featured_image, 365, 216) }}"
srcset="{{ resize_image_url(content.featured_image, 365, 216) }} 365w, {{ resize_image_url(content.featured_image, 300, 178) }} 300w"
sizes="(max-width: 600px) 300px, 365px"
width="365"
loading="lazy"
alt="{{ content.featured_image_alt_text }}">
But there is one restriction:
Images that are larger than 4096 pixels in height or width will not be automatically resized.
So the CMS admin should always double check if images are well-prepared, before using them on the website.
Google Lighthouse performance test
Here is the comparison between the website which uses resize_image_url function and the same one without it:
|
With the resize_image_url function |
Without resize_image_url |
|
|
|
Speed index is 1.344x faster. Total Blocking Time 7.75x shorter. Also Time to Interactive improved by the factor of 1.21.
Best practices
- Always double check what resolution has the image you are uploading to the HubSpot CMS files library.
- If you have a lot of images with very high resolution, the easiest way to optimize them is to use tools like TinyPng or similar to quickly reduce the size.
- For blog posts featured images always use the resolution of 1200 x 644 pixels and try to avoid webp format. (Many clients want to share their articles on Linkedin but it does not support this extension, so webp is not recommended).
- Use Google Lighthouse to check the performance of your website and take a closer look at the
Conclusions
If a few lines of code can improve your Google Lighthouse score by tens of percent and boost your SEO score and website accessibility, there is no question it is worth adding it. Yet, this code will not solve all the issues one may come upon. HubSpot CMS admins should always remember that it is good practice to double-check the resolution, extension, and size of a file before using it. Images that are larger than 4096 pixels in height or width will not be automatically resized and CMS admins have to decrease them on their own via an external app or use the HubSpot tool to do that manually.
Links:
https://developers.hubspot.com/docs/cms/hubl/functions#resize-image-url
https://knowledge.hubspot.com/files/automatic-image-resizing-on-hubspot-content
