Images are often the biggest culprit when a website is slow. In HubSpot, it's easy to upload a 5 MB image and let the platform handle it, but that penalizes your speed. Here is the exact technical process we used to ensure images load lightning fast, without compromising the design.
Image optimization in HubSpot means serving images in the right size, format, and at the right time. It involves using responsive attributes (srcset and sizes), enabling "lazy loading" for off-screen images, and ensuring images don't cause layout shifts (CLS).
It makes no sense to download a desktop image on a mobile phone. We implemented srcset and sizes across all modules in the HubSpot theme.
This tells the browser which versions of the image are available, allowing the browser itself to choose the smallest file that fits the screen size. The result? Mobile users save massive amounts of data, and the page loads faster.
Have you noticed that text sometimes jumps down the page while you're reading? That happens because the browser doesn't know how big an image is until it's finished downloading.
We solved this by adding explicit width and height attributes to all images, including those inserted via HubSpot's rich-text editor. Then the browser reserves the correct space immediately. Goodbye, layout shifts.
Not all images are equally important. The hero image at the top of the page must be displayed immediately. Images further down can wait.
We set fetchpriority="high" and loading="eager" on the most important images (to improve LCP). For all other images, we enabled "lazy loading" and asynchronous decoding. This means the images are only downloaded when the user scrolls down towards them, freeing up capacity to load the actual text first.
You can compress images until they become blurry, but that doesn't solve the underlying problem. Proper image handling requires the underlying code to be set up correctly. When your theme automatically serves responsive images and prevents layout shifts, your content creators don't have to think about technique – they can just upload their images knowing the site will remain fast.
→ read more about HubSpot performance.
→ HubSpot implementation when the platform should support sales and marketing.
→ Third-Party Scripts Are Killing Your Landing Page Speed
→ Performance Without Boring Design: Fast Animations and Glass UI
Yes, HubSpot compresses and resizes images automatically, but it works best if your theme is coded with the correct attributes (like srcset) to fully utilize this feature.
Lazy loading is a technique where the browser waits to download an image until the user scrolls down to that part of the page. This makes the website load much faster at first glance.
The website jumps (CLS) because the images are missing width and height attributes in the code. Without these dimensions, the browser doesn't know how much space to set aside for the image before it's downloaded.