Image SEO: The Golden Rules to Boost Your Core Web Vitals

When the image dictates your Google ranking

Since Google introduced Core Web Vitals, loading speed is no longer just a usability bonus: it’s a direct SEO ranking factor. And the main culprit behind a Core Web Vitals score in the red is almost always the same metric: LCP (Largest Contentful Paint).

LCP measures the time needed to render the largest element visible on screen (usually the “Hero” banner or the main product image). If it takes more than 2.5 seconds to appear, Google penalizes you — and competitors whose same page loads in 1.8 s overtake you in the SERPs.

The 3 Core Web Vitals to know

Metric	What it measures	Google “Good” threshold
LCP (Largest Contentful Paint)	Render time of the largest element	≤ 2.5 s
INP (Interaction to Next Paint)	Latency of user interactions	≤ 200 ms
CLS (Cumulative Layout Shift)	Visual stability (layout shifts)	≤ 0.1

Of the three, two are influenced by images:

• LCP (heavy hero image = high LCP);
• CLS (image with no dimensions = layout shift when it loads).

The new king: the AVIF format

You know JPG, you’ve mastered WebP. It’s time to step up.

AVIF (AV1 Image File Format) is the next-generation codec backed by Netflix, Google and Apple. Its efficiency is monstrous: an AVIF file is:

• on average 50% lighter than a JPG at equal visual quality;
• 20% lighter than a WebP;
• superior at handling compression artifacts (fewer color bands on gradients, fewer JPEG blocks on flat areas);
• compatible with 10-bit transparency (vs 8-bit in PNG/WebP).

If your LCP is a header image, switching it from JPG to AVIF is the most powerful SEO “quick win” you can ship today — without touching the rest of your code.

The <picture> tag: serving AVIF with a fallback

AVIF is supported by ~92% of browsers as of May 2026 — but not yet by every version of Safari. Best practice is to serve AVIF first, with a WebP then JPG fallback:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…"
       width="1920" height="1080"
       loading="eager" fetchpriority="high">
</picture>

Key points of this structure:

• explicit width and height → prevent CLS by reserving the space before the image loads;
• loading="eager" on the main image (above the fold) → it’s counterproductive to use lazy on the LCP image;
• fetchpriority="high" → tells the browser to prioritize this download over other resources.

For images below the fold (catalog, blog posts), do the opposite: loading="lazy" so you don’t block the LCP of the visible area.

Measure to manage: the tools

Before and after each optimization, measure:

• PageSpeed Insights (pagespeed.web.dev) → Lighthouse score + CrUX data (Chrome User Experience Report) under real conditions;
• GTmetrix → detailed request waterfall, pinpointing the exact file dragging down your LCP;
• WebPageTest.org → multi-location and multi-browser tests;
• Chrome DevTools → Performance → Web Vitals → local measurement in development conditions.

The minimum SEO goal: 75% of visits in the green zone on Core Web Vitals (Google’s passing threshold).

The “Zero-Upload” architecture for webmasters

Optimizing hundreds of images for a client poses a technical and ethical challenge. Using third-party APIs or classic online converters means uploading your clients’ intellectual property to unknown servers, with frustrating size limits — and a major privacy risk if the images contain identifiable people.

The future is client-side processing. Using WebAssembly technology, it’s now possible to compile complex codecs (such as libavif, libheif, mozjpeg) to run directly in the webmaster’s browser.

No image leaves the professional’s machine. No risk of a leak. No size limit other than the available RAM.

Image SEO optimization checklist

Before every publish:

1. Right format: AVIF (or WebP as a fallback) for web images, JPG only for backward compatibility;
2. Calibrated dimensions: no wider than the actual display (1200 px max for article content, 1920 px for heroes);
3. Quality 80–85 on compressed images;
4. explicit width and height in the HTML → anti-CLS;
5. loading="lazy" outside the visible area, eager for the LCP image;
6. descriptive alt text (SEO + accessibility);
7. descriptive file name (red-silk-dress-sale.avif > IMG_8421.jpg).

Bring your site up to Google’s standards (instant and free)

Test the power of local conversion. Take the heaviest image on your home page and convert it to AVIF with our WebAssembly engine. It runs on your own machine’s RAM: no upload, absolute security for your clients’ assets, and final files that are perfect for passing your Core Web Vitals audits.

Written by Nikola Markovic · published on May 19, 2026.