Back to Articles

Web Image Optimization & Core Web Vitals: The LCP Guide

How to optimize images for Google Core Web Vitals, eliminate layout shifts (CLS), accelerate Largest Contentful Paint (LCP), and master responsive srcset.

Images account for over 60% of the payload on the average webpage. They are the most common cause of slow Largest Contentful Paint (LCP) scores and failed Core Web Vitals audits. Search engines penalize sluggish pages, and mobile users bounce off them. Optimizing image delivery is part of building the page correctly.

A real optimization strategy covers formats, sizing, layout stability, and loading behavior. Increasingly, where the processing happens matters too. Cloud optimizers require uploading unreleased product shots or personal photos to a server, which is a liability for anyone handling sensitive assets. WebAssembly-based tools like ImageUp do the same work in the browser, so files never leave the device. Here is the engineering checklist.

Measure First

Optimization starts with a baseline, not a guess. Run PageSpeed Insights or Lighthouse on the page and look at the LCP and CLS scores, then check the network waterfall to see which images cost the most. The culprit is almost always the hero or a full-width content image shipped at far larger dimensions than it renders at. Fix that one asset and the score moves more than any other single change.

1. Eliminate Layout Shift (CLS)

Cumulative Layout Shift measures visual stability. How much the page jumps around while loading. When a browser encounters an <img> without dimensions, it does not know the aspect ratio until the file downloads, so it collapses the space and shoves the content down when the image finally arrives. That is a CLS penalty and a bad experience.

The fix is declaring dimensions. Explicit width and height attributes let the browser compute the aspect ratio and reserve the space before a single byte of the image downloads:

<img
  src="/hero-photo.webp"
  width="1200"
  height="675"
  alt="Modern workspace"
  class="w-full h-auto"
/>

With both attributes present, the browser reserves the vertical space using the ratio, and the page stays stable regardless of network speed. Generating assets at the right ratio is where a local tool helps. You can crop and resize originals in the browser without sending the masters anywhere.

2. Accelerate Largest Contentful Paint (LCP)

LCP marks when the largest visible element renders. On most landing pages, that element is the top image, and its download should start as early as possible.

Do not wait for the parser to reach the <img> tag. Preload the hero in the document head:

<link rel="preload" as="image" href="/hero-photo.webp" type="image/webp" fetchpriority="high" />

Two common mistakes hurt LCP. The first is applying loading="lazy" to every image, including the hero. Lazy loading delays the fetch until scroll position is calculated, injecting 200-500ms into your LCP. The second is failing to prioritize. fetchpriority="high" tells the browser’s network scheduler to fetch the hero ahead of scripts and analytics.

3. Serve Responsive Sizes with srcset and sizes

Sending a 2000px image to a 375px phone screen wastes bandwidth, memory, and battery. The srcset and sizes attributes give the browser a menu of files and let it pick the right one for the viewport and pixel density:

<img
  srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1200.webp 1200w, /photo-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 1200px"
  src="/photo-1200.webp"
  width="1200"
  height="800"
  alt="Product photography"
  loading="lazy"
  decoding="async"
/>

srcset lists the variants with their widths. sizes tells the browser how wide the image renders at each breakpoint. Generating five or six variants per image used to mean server infrastructure or trusting a cloud service with proprietary assets. A local WASM tool batch-generates the whole hierarchy on your hardware. No uploads.

4. Use Modern Formats with a Fallback Chain

JPEG and PNG still work. WebP and AVIF compress far better. WebP typically 25-35% smaller than JPEG, AVIF often half the size of WebP at similar quality. The <picture> element serves the best format while keeping a fallback for older browsers:

<picture>
  <source srcset="/photo.avif" type="image/avif" />
  <source srcset="/photo.webp" type="image/webp" />
  <img src="/photo.jpg" width="800" height="600" alt="Product representation" loading="lazy" decoding="async" />
</picture>

AVIF and WebP encoding is compute-heavy, which is why it historically happened on servers. Local tools compile the encoders to WebAssembly and run them in the browser’s sandbox. Internal diagrams, medical imagery, and pre-launch marketing material stay off third-party hardware.

WebP is the right choice for broadest modern compatibility with solid savings. AVIF when file size matters more than encode time. JPEG only for the legacy fallback slot. If your audience is guaranteed current browsers, serve AVIF directly and skip the intermediate step.

5. Keep the Processing Private

The assets in a web project often carry more than pixels. EXIF metadata includes geolocation. The images themselves can be confidential product shots or client deliverables. A cloud optimizer means uploading those files and hoping the terms of service do not claim training rights over them.

Local processing removes the exposure. With ImageUp, images are handled entirely in the browser. No uploads, no server caches, no third-party storage. Compliance with NDAs, GDPR, and HIPAA becomes straightforward because nothing sensitive ever leaves the device.

It is also faster to work with. Generating the srcset variants, format conversions, and resized crops for a page takes a couple of minutes locally, with instant previews, instead of round-tripping every file through an upload queue. The optimization loop, adjust, preview, export, repeats in seconds.

The Checklist Before You Deploy

  • Convert photographic content to WebP and AVIF.
  • Preload the hero image with fetchpriority="high".
  • Lazy-load and async-decode everything below the fold.
  • Declare width and height on every image.
  • Generate srcset variants for each breakpoint.
  • Process and compress locally with the Compress Image and Resize Image tools so originals never leave your machine.

Run the list top to bottom once, then re-test. The scores from the first audit give you the before numbers. The same audit after the pass shows the after. Most pages see LCP move into the green with just the hero fix and the format conversion. The rest of the list is the difference between passing and staying passing as the page grows.

Performance work compounds with privacy work. The same local pipeline that generates your optimized assets is the one that keeps your masters off third-party servers. Work through the list once and the page ships fast, stable, and private.

PreviousAdvanced Image Optimization Techniques