Image Optimization for a Website: A Speed Guide (WebP, Lazy Load)

Image optimization for a website comes down to four moves: pick a lightweight format such as WebP or AVIF, compress and resize your files, deliver the right size per screen with responsive images, and let everything below the fold lazy load. Images are typically the heaviest thing a browser has to download, so this is where the biggest speed gains are. In this article we walk through those four layers in order of impact, along with the pitfalls that can actually ruin your load time. Want the bigger picture first? Read our guide to having a B2B website built.

This piece is about speed and technique. If you want to know how to make images more findable through file names, alt text and an image sitemap, that is in our article on image SEO.

Why do images weigh so heavily on your load time?

Because they are literally the heaviest file a browser pulls in. On most pages, images make up the largest share of total page weight, and every megabyte translates into waiting time for your visitor. A slow hero image at the top is also often precisely the element Google measures as Largest Contentful Paint, one of the Core Web Vitals that score your loading experience.

For B2B the stakes are subtler than for a webshop, but just as real. No shopping cart walks away, but a slow or sloppy first impression subconsciously says “amateurish”, and a prospect who drops off before your page has loaded fills in no contact form. The core of it: steer on the visitor, not on the number. A light page is not a goal in itself, it is the difference between someone who stays and someone who clicks away.

Which image format should you choose: WebP, AVIF, JPEG or PNG?

The choice is not about “what works”, but about “what is lightest without visible quality loss”. For most website images, WebP is the logical standard today, with AVIF as an even lighter alternative.

• WebP is your safe default. It gives better quality per kilobyte than JPEG or PNG and has been supported in every common browser for years.
• AVIF compresses even harder than WebP, usually a good deal smaller at comparable quality. Browser support is broad by now (well over ninety percent worldwide), so you can safely use it as long as you provide a fallback.
• JPEG remains perfectly fine as a fallback for photo-rich images.
• PNG is what you use where you need transparency or razor-sharp detail, a product diagram for example.
• SVG is ideal for icons and logos: vector-based, so sharp on every screen and often tiny.

In practice you preferably serve AVIF first, with WebP and then JPEG as fallbacks. You do that with a picture element that picks the lightest format each browser can handle. That way everyone benefits, without leaving older browsers out in the cold.

How do you compress and resize images without losing quality?

Compressing makes the file lighter, resizing adjusts the dimensions. You need both, and this is the step most people skip.

Resizing. Do not upload a photo that is 5,000 pixels wide if it is only shown at 800 pixels on your site. Your visitor downloads those extra pixels for nothing. For most website images a maximum of around 2,500 pixels is plenty, and thumbnails or backgrounds can be much smaller.

Compressing. Lossy compression (as with JPEG and standard WebP) throws away a bit of data the eye does not see anyway, and makes your file considerably lighter. Lossless keeps all the data, but you only use it where every detail counts. For a blog image, no visitor notices the difference between an untouched photo and a well-compressed version.

A good rule of thumb is to go as light as possible per image, often well under half a megabyte, and with hero images to check whether they really need to be that heavy. Free tools do the heavy lifting in a few clicks, and modern platforms and headless setups can often handle this automatically on upload. Want to check what your current site is doing? Run it through Google Lighthouse; it tells you page by page which images are too heavy.

What are responsive images and why do you need them?

Responsive images deliver the right size to every screen instead of the same large file everywhere. A phone gets a small version, a wide desktop screen a large one. That makes a huge difference, because the majority of B2B traffic comes in on mobile, and there a desktop-sized file is pure waste.

Technically you arrange this with the srcset and sizes attributes on your images. In them you specify multiple sizes and tell the browser how big the image appears on screen. The browser then picks the most suitable version for the device and screen resolution itself. Good website CMSes and frameworks generate these variants automatically, so you do not have to export five formats by hand.

A second gain is stability. Give every image a fixed width and height (or an aspect ratio) in your code. The browser then immediately reserves the right space and your layout no longer jumps while images load. That prevents a poor score on Cumulative Layout Shift, the part of Core Web Vitals that penalises shifting content.

How does lazy loading work and what is the pitfall?

Lazy loading only loads an image when the visitor is nearly at it, instead of loading everything at once when the page opens. Images at the bottom of your long services page do not have to come along right away, which shortens the initial load time considerably. In modern browsers you switch this on with the loading="lazy" attribute on your image.

The big pitfall: never lazy load your hero or the most important image at the top. That is usually exactly the element Google measures, and delaying it slows down precisely the score you are trying to improve. The reverse move does help. By giving your hero image a high loading priority (with the fetchpriority="high" attribute) it loads in faster. In practice: priority for the one image at the top, lazy loading for everything below it.

On top of that, a CDN (a network of servers that delivers images closer to your visitor) and browser caching (where a returning visitor does not download the images again) speed up your site further. Both belong more to your hosting and architecture than to the images themselves, but they count towards the overall picture.

In what order do you tackle this?

Not everything at once. This checklist runs from most to least impact:

1. Resize your source files to a sensible maximum width.
2. Compress every image and convert to WebP, with AVIF where your tooling can handle it.
3. Set up responsive images with srcset and sizes, so mobile gets a lighter version.
4. Specify width and height to prevent shifting layout.
5. Switch on lazy loading for everything below the fold, but never for your hero.
6. Give your hero high priority with fetchpriority="high".
7. Check on mobile and in Lighthouse, because that is where the experience weighs heaviest.

The short summary

Optimising images is not rocket science, but it is the detail work that wins you the most load time. Work in layers: light format, smart compression, responsive images and lazy loading, with your hero always the exception that gets priority instead. Do that well and your site loads fast, your layout stays stable, and you hold on to prospects long enough for them to get in touch.

At Customer Impact we are a small, senior team that advises honestly and steers on what counts: leads and revenue, not on vanity technical numbers. We build platform-agnostically (Webflow, WordPress or headless) and choose the approach that fits your case. Want your new or existing site to load genuinely fast and convert? Then take a look at how we handle website development.

Book your free intake call