Image Optimisation for Core Web Vitals: 9 Tips

Intro

Fast images make your site feel effortless. They also lift Core Web Vitals like LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) and INP (Interaction to Next Paint). Below are nine simple wins you can apply today. I’ve also included clean HTML you can drop into any project.

1) Use next-gen formats with safe fallbacks (WebP and AVIF)

Modern formats deliver the same quality at a much smaller size. AVIF is often the smallest, WebP is widely supported, and JPEG or PNG is your fallback.

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img
    src="/img/hero.jpg"
    alt="Product on a clean background"
    width="1600" height="900"
    decoding="async">
</picture>

WordPress tip: If using an image optimisation plugin, enable WebP and AVIF, and keep the original as a fallback.

2) Resize to the real display size

Do not ship a 4000 px image into a 1200 px slot. Export to the largest size the layout needs, then let srcset cover smaller breakpoints.

<img
  src="/img/card-1200.jpg"
  srcset="/img/card-480.jpg 480w,
          /img/card-768.jpg 768w,
          /img/card-1200.jpg 1200w"
  sizes="(max-width: 768px) 90vw, (max-width: 1200px) 50vw, 600px"
  alt="Project card preview"
  width="1200" height="800" loading="lazy" decoding="async">

Rule of thumb: target 1x CSS width for desktop, offer smaller variants for tablets and mobiles, and let the browser pick.

3) Compress smartly

Lossy at a sensible quality beats lossless in most cases.

JPEG or WebP: start around quality 70 to 80
AVIF: start around quality 45 to 55
PNG: use only for transparency or flat graphics, then run through a lossless optimiser

I find that some online tools e.g Tiny PNG have better compression algorithms than say exporting from illustrator or photoshop. Meaning you get a better result for the filesize.

4) Do not lazy-load your LCP image

Lazy load everything below the fold. The hero image that becomes LCP should load with priority.

<!-- Only for the primary hero image -->
<img
  src="/img/hero-1600.webp"
  alt="Hero visual"
  width="1600" height="900"
  fetchpriority="high"
  decoding="async">

Then lazy load the rest:

<img src="/img/gallery-1-800.webp" alt="Gallery" width="800" height="533" loading="lazy" decoding="async">

In WordPress, most image plugins lazy load by default. Exclude the first fold image in settings or in your theme.

5) Always set width and height to prevent CLS

Explicit dimensions let the browser reserve space before the image arrives.

<img src="/img/team-600.webp" alt="Team" width="600" height="600" loading="lazy" decoding="async">

If you work with responsive containers, keep the intrinsic ratio with CSS:

img { max-width: 100%; height: auto; }

6) Use the Picture element for versatility

srcset picks the right size of the same image.
<picture> lets you swap different images for different situations, like a tight crop on phones and a wide banner on desktop.

How it works

The browser reads the <source> elements from top to bottom.
It picks the first one where the media query matches and the type is supported.
If none match, it displays the <img> at the end as a fallback.

Example: tight crop on small screens, wide crop on larger screens, with AVIF and WebP where possible.

<picture>
  <!-- Mobile: tighter crop -->
  <source media="(max-width: 640px)" srcset="/img/hero-tight-768.avif" type="image/avif">
  <source media="(max-width: 640px)" srcset="/img/hero-tight-768.webp" type="image/webp">
  <!-- Desktop: wider crop -->
  <source srcset="/img/hero-wide-1600.avif" type="image/avif">
  <source srcset="/img/hero-wide-1600.webp" type="image/webp">
  <!-- Fallback -->
  <img src="/img/hero-wide-1600.jpg" alt="Hero showing product in context"
       width="1600" height="900" decoding="async">
</picture>

When to use:

You need different crops or aspect ratios by breakpoint.
You want to serve different formats (AVIF, WebP) with a JPEG fallback.

When not to use:

If the image is the same crop everywhere, use one <img> with srcset and sizes.

7) Serve SVG for icons and simple graphics (Vectors)

Where applicable (vector graphics), use .svg filetype.

SVG is very small file-wise, crisp at any size, and usually easy to recolour in CSS.

<img src="/icons/lock.svg" alt="" width="24" height="24" aria-hidden="true">

For complex illustrations, optimise the SVG and remove metadata.

8) Use a fast delivery path

Host images on a CDN close to users
Preconnect to the image CDN if it is on another domain
Long cache lifetimes for hashed filenames

<link rel="preconnect" href="https://cdn.example.com" crossorigin>

WordPress tip: If your host includes a CDN, enable it and rewrite image URLs to the CDN domain. Many optimisation plugins do this automatically.

9) Automate the workflow

The biggest wins come from consistency.

Generate AVIF and WebP at upload time
Auto resize to a set of breakpoints
Strip EXIF metadata on upload
Enforce lazy loading and dimension attributes

WordPress tip: set your plugin to convert on upload, and bulk-optimise existing images once. Keep originals in backups only.

The Checklist

I design and build WordPress sites that are fast, secure, and easy to manage. If you would like a quick platform fit check or a scoped plan for your project, get in touch and I will map your goals to the simplest WordPress solution.

Contact Me