Image Optimization for Core Web Vitals: Best Practices That Actually Move the Needle

Images account for more than half of page weight on the average website and are directly responsible for two of the three Core Web Vitals: LCP (Largest Contentful Paint) and CLS (Cumulative Layout Shift). Poor image handling is also one of the easiest performance categories to improve without touching your application architecture. This guide covers what actually moves the needle — not every theoretical option, but the decisions that have the largest measurable impact.

Why Image Optimization for Core Web Vitals Matters

LCP is almost always an image. On most marketing pages, product pages, and blogs, the largest visible element in the viewport is a hero photograph, a product shot, or a featured image. Every millisecond saved on that image's download and render directly improves your LCP score.

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

Format selection is the single highest-leverage image decision.

• 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 the most appropriate source based on the current viewport width and device pixel ratio. This alone can reduce image payload by 60–80% for mobile visitors.

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 are the most common source of CLS on image-heavy pages.

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"? Is loading="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.

Most teams can cut page image weight by 50% or more on their first pass through this list. That translates directly to measurable LCP improvement and CLS elimination.

If you want expert eyes on your image delivery pipeline — or you are building a Next.js or edge-delivered product where image optimisation is architectural — talk to the Clixo team.