A single uncompressed hero image can weigh more than the entire rest of a page's code combined. On most websites, images are by far the biggest chunk of data — and therefore the single lever with the greatest impact on load time and ranking.
The good news: you don't need to be a pro to get a lot out of this. With the right image formats — above all WebP and AVIF — you can often cut the weight of your images in half, without anyone noticing a difference in quality.
This article shows you which formats are actually worth using today, how to compress images correctly, what srcset and lazy loading are about — and how all of it feeds into your Core Web Vitals.
The largest visible element on a page is almost always an image — a hero photo, a product shot, a banner. That exact element is what Google measures with Largest Contentful Paint (LCP), one of the three Core Web Vitals. Google's own documentation puts it plainly: a page's LCP element is, in most cases, either an image or a web font.
In plain terms: if your biggest image loads slowly, your LCP is bad — and a poor LCP score drags down your ranking, no matter how good your text is.
The lever is huge because images account for the lion's share of transferred bytes. Replace an 800 KB JPEG with a 250 KB AVIF and you save more than most other performance measures combined.
There is no single right format. But for every use case, there is a best one.
The key point: WebP and AVIF are not a quality compromise. The files are smaller because the compression methods are simply more modern — not because image information the eye can perceive is being thrown away.
The honest answer: ideally both, in a tiered setup.
WebP is the safe default today. It's supported by all modern browsers and reliably delivers 25 to 35 percent savings over JPEG. When Facebook switched to WebP, it saved 25 to 35 percent on JPEGs and around 80 percent on PNGs. YouTube reported 10 percent faster page loads from WebP thumbnails alone.
AVIF goes further and compresses considerably harder — browser support is now above 94 percent globally (per caniuse.com). The only practical downside: creating AVIF files takes longer, which can matter with very large volumes of images.
The clean solution is tiered delivery via the <picture> element: the browser is offered AVIF first, falls back to WebP if it isn't supported, and to JPEG as a last resort. That way every visitor gets the most modern format their browser understands — with no JavaScript at all.
Here's what that looks like in HTML:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Meaningful alt text" width="1600" height="900" />
</picture>
Format alone isn't enough. A full-quality AVIF is still needlessly large. Three levers matter most:
Most modern image pipelines — from build tools to CDNs to CMS plugins — handle this automatically. What matters is that it happens at all.
A smartphone doesn't need a desktop-resolution image. With srcset and sizes, you serve each device exactly the variant it actually displays — the browser picks the right one automatically.
<img
src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Meaningful alt text"
width="1600" height="900" />
The srcset attribute lists the available image sizes with their respective pixel widths. The sizes attribute tells the browser how wide the image is displayed in the layout. From that, the browser works out which file is most economical — and loads only that one.
For a mobile device, that can mean the difference between a 1.6 MB and a 90 KB download. Exactly those savings noticeably improve LCP on mobile — and mobile is what Google primarily evaluates Core Web Vitals on.
Images that only appear far down the page don't need to load immediately. The native loading="lazy" attribute makes the browser load them only when the user scrolls close to them.
<img src="further-down.webp" alt="..." loading="lazy" width="800" height="600" />
But beware — and this is the most common mistake: never set loading="lazy" on your LCP image. The hero image at the very top should load as early as possible, not be deferred. For that one image the opposite applies: fetchpriority="high" and no lazy loading. Google explicitly recommends a high loading priority for the LCP element.
A simple rule of thumb: everything immediately visible on page load (above the fold) is loaded eager. Everything below gets loading="lazy". And always set width and height — otherwise the layout jumps when images load in, and you ruin your CLS score.
Despite excellent tooling, the web is nowhere near using its potential. The HTTP Archive Web Almanac 2024 shows that on mobile, around 32 percent of all images are still JPEGs and 28 percent PNGs — modern formats like WebP (12 percent) and AVIF (1 percent) are the exception, not the rule.
The Almanac puts it bluntly: almost all JPEGs, PNGs and GIFs on the web would be better served using a modern format. AVIF is growing fast — the number of AVIF images served has nearly quadrupled since 2022 — but most websites are still giving away load time.
That's exactly where your opportunity lies: image optimization is one of the few technical SEO measures with an immediate, measurable effect — and most competitors haven't implemented it yet.
<picture>srcset and sizes for responsive deliverywidth and height in the HTML (protects the CLS score)loading="lazy" for everything below the visible areafetchpriority="high" insteadNo — at least not visibly. The smaller file sizes come from more efficient compression methods, not from discarding perceptible image information. At a comparable setting, a WebP looks identical to a JPEG to the human eye — at significantly lower weight.
In practice, it's the safest solution. Via the <picture> element you offer AVIF first, then WebP, and JPEG as the final fallback. That way every browser gets the best format it understands — and no one sees a broken image.
Both together. The single biggest mistake is usually a huge image displayed in a small slot. First scale to the display size, then convert to the modern format — the combination delivers the largest savings.
Partly, yes. Common CMS platforms like WordPress offer plugins that automatically convert images to WebP and compress them. For clean <picture> delivery with an AVIF fallback, correct srcset and a prioritized LCP image, however, technical support is worthwhile.
On many sites, heavy images are the biggest invisible drag on load time — and the fastest lever for better Core Web Vitals. In a free 30-minute consultation we'll take a look at your site and show you where the biggest performance gain lies.
