Image Optimization for Core Web Vitals
A practical guide to image optimization for Core Web Vitals. Covers format selection, sizing, lazy loading, fetchpriority, CDN delivery, and responsive images to improve LCP and CLS.
Image size, delivery priority, and layout dimensions can affect loading speed and visual stability. Measure which images contribute to slow loads or layout shifts before choosing optimizations.
Why Image Optimization for Core Web Vitals Matters
When an image is the Largest Contentful Paint element, its discovery, download, and render time contribute to LCP. Confirm the element in performance tools before prioritizing a hero or product image.
CLS is affected by images that do not have reserved dimensions. When the browser does not know an image's size before it downloads, it cannot hold space for it. Content above and below the image shifts when the image arrives.
Google uses both metrics as ranking signals. More importantly, users on slow connections feel the difference.
Image Optimization Best Practices
1. Choose the Right Format
Compare image formats using both file size and acceptable visual quality.
- WebP: 25–35% smaller than JPEG at equivalent quality. Supported by all modern browsers. Use it as your default for photographs and complex images.
- AVIF: 40–50% smaller than JPEG. Better compression than WebP, with excellent quality at low file sizes. Support is broad in modern browsers. Worth using where you can, with a WebP fallback.
- SVG: The only correct choice for logos, icons, and illustrations. Resolution-independent and typically tiny.
- PNG: Use only for images that require true transparency alongside detail. Avoid for photographs.
Do not serve JPEG or PNG as your primary format for new content. The file size penalty is too large.
2. Resize Images to Actual Display Dimensions
Serving a 4,000-pixel-wide original to a device that displays it at 800px wastes bandwidth proportional to the square of the ratio — roughly 25 times more data than necessary. Resize images server-side or at build time to match the largest display size they will appear at.
Use the srcset attribute to serve different sizes to different viewports:
srcset="/img/hero-400.webp 400w, /img/hero-800.webp 800w, /img/hero-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
The browser selects a source for the viewport and device pixel ratio. Providing appropriately sized variants can reduce unnecessary image downloads.
3. Set Explicit Width and Height on Every Image
This is the CLS fix for images. Always include both width and height attributes on img elements. The values define the aspect ratio the browser uses to reserve space before the image loads.
They do not need to match the exact rendered size. A 1600x900 image can have width="1600" height="900" and CSS can constrain it to any display size — the browser will still reserve the correct aspect ratio space.
Missing dimensions can cause layout shifts when an image loads.
4. Use fetchpriority="high" on the LCP Image Only
The fetchpriority attribute controls how the browser prioritises network requests. Setting it to "high" on the LCP image tells the browser to fetch it immediately, ahead of other resources discovered at the same time.
Use it on exactly one image per page — the one most likely to be the LCP element. Using it on multiple images dilutes the effect and can actually slow down the most important one.
Do not combine fetchpriority="high" with loading="lazy". These are contradictory instructions.
5. Lazy Load Below-the-Fold Images
Everything that is not the LCP image should load lazily. Native lazy loading with loading="lazy" is now supported in all modern browsers and defers the fetch until the image is near the viewport.
This reduces initial page weight significantly on pages with many images — galleries, blog feeds, product lists — without any JavaScript library.
The rule: loading="lazy" on all images except the LCP element. fetchpriority="high" on the LCP element only.
6. Serve Images from a CDN
Origin servers in a single geography add latency for every user not near that geography. A CDN caches images at edge nodes globally, reducing the physical distance between the user and the image bits.
For the LCP image specifically, CDN delivery can shave 100–300ms off load time for international visitors. For image-heavy pages like e-commerce catalogues, CDN offloading also reduces origin server load dramatically.
Most CDNs also offer on-the-fly image transformation: resizing, format conversion, quality adjustment at the edge. This simplifies your build pipeline because you do not need to pre-generate every size variant.
7. Compress at the Right Quality Level
Higher compression quality does not mean better perceived image quality past a certain point. For WebP:
- Photographs: quality 80–85 is visually indistinguishable from 100 for most viewers
- UI elements and product shots with hard edges: quality 85–90
Run a quick visual comparison between quality 80 and quality 95 on your own images. You will often find the quality 80 version is acceptable at roughly half the file size.
Avoid over-compressing images with text overlaid on them — text compression artifacts are immediately noticeable.
8. Preload the LCP Image
If your LCP image is in the HTML (not loaded via CSS background-image), add a preload link in the document head to start the fetch before the browser processes the image tag:
rel="preload" as="image"
For responsive images, use imagesrcset and imagesizes on the preload link so the browser fetches the correct size variant.
Preloading is particularly effective for images that appear deep in the HTML or inside a component that loads after the initial parse.
A Practical Image Audit Workflow
Start with WebPageTest or Chrome DevTools Network panel filtered to images.
- Sort by size: which images are largest? Are they in the right format?
- Check for images missing width/height in the Elements panel
- Identify the LCP image using the Performance panel. Does it have
fetchpriority="high"? Isloading="lazy"absent? - Check your PageSpeed Insights report for "Properly size images" and "Serve images in next-gen formats" — these flag specific offenders with estimated savings.
Measure image bytes, LCP, and CLS before and after the changes. The benefit depends on the images, layout, and network conditions.