Web image optimisation: verifiable protocol, formats, LCP and perceptual quality

Weight alone is not a verdict. A 5 KB thumbnail may be excellent and a 5 KB hero may be visibly damaged. Conversely, a larger file may be the correct choice when it is the Largest Contentful Paint element, appears in a large box and carries important detail. The decision connects six variables: role, rendered dimensions, pixel density, format, perceptual quality and loading time.

The 2025 Web Almanac reports that images are the LCP element on 85.3% of desktop pages and 76% of mobile pages in its dataset. It also reports roughly 1,059 KB of images on the median desktop page and 911 KB on mobile. These are context figures, not budgets to copy.

On 22 August 2026, the public hero selected a 600×400 AVIF weighing 4,794 bytes. Its HTML offered neither srcset nor sizes, while the image occupied up to roughly 445 CSS pixels on desktop. On a 2× screen, the useful intrinsic width approached 890 pixels. Discovery and priority were correct — loading="eager", fetchpriority="high" — but the selected resource could lack definition.

We compared that file with its own 1000×667 JPEG master, resized to 600×400 with Lanczos to isolate encoding. It scored 62.4404 with SSIMULACRA2. The new edition uses a new 1536×1024 PNG master, so every derivative is measured only against a reference produced from that same master. The figures establish encoding fidelity; they are not an artistic A/B test.

The public French page was replayed with Playwright from 390 to 1440 pixels and DPR 1 to DPR 2. Each scenario records final URL, HTTP status, CSS box, currentSrc, natural dimensions, encoded bytes, visible control count and browser-console issues. The observed candidates are the 600×400 and 900×600 AVIFs: the browser does not automatically download the largest available resource.

Lighthouse measured the same public state. The mobile lab profile scores 99/100 performance, 100/100 accessibility and 1.9 s LCP; desktop scores 100/100 performance and 0.4 s LCP. These values describe a dated cold-lab run, not an entire user population.

Every control has a stable IMGxx identifier, method, expected evidence, required access, severity and automation level. Status is restricted to Not tested, Compliant, Non-compliant and Not applicable. A decorative image with an empty alt is not worse than an informative image: it answers a different decision.

The protocol never adds rows into a grade. Missing text on a functional image, a lazy-loaded LCP image or a third-party tracker fired before consent can block release even when every other check succeeds.

A useful first estimate is required file width ≈ rendered width × DPR. A 445-pixel image on a 2× display calls for roughly 890 pixels. Texture, zoom, format and quality still affect perception, but the calculation prevents two opposite errors: sending 2000 pixels to a 240-pixel thumbnail or 600 pixels to a 445-pixel Retina hero.

In a width-descriptor srcset, every descriptor must match the file’s real width. sizes then describes the image’s layout slot. The browser combines viewport, DPR and candidates, and may reuse a cached candidate.

PSNR, SSIM, SSIMULACRA2 and Butteraugli can compare variants, but none judges crop, meaning or accessibility. A publishable protocol records the master, scaling method, encoder and version, settings, score, bytes and interpretation limits.

This page compares files at identical dimensions. Comparing a derivative directly with a differently sized master would mix resizing and encoding effects. Every variant is measured against a PNG reference generated from its own master with Lanczos.

Google and web.dev converge on three levers: expose the resource in initial HTML, avoid lazy loading for the LCP element and increase priority with care. Preload may help when discovery is late, but a mismatched responsive preload can consume bandwidth or download twice.

A first-screen image is not necessarily the LCP for every user. Viewport, consent, content and cache can change the candidate. Field data observes the distribution; the laboratory diagnoses discovery and selection.

Important images should be available through an img element with a usable src, optionally inside picture. Stable URLs, accessible pages, coherent adjacent text and image sitemaps help discovery. CSS backgrounds remain appropriate for decoration, not for essential indexed content.

When a CDN uses a separate domain, verify ownership in Search Console. Ensure sitemap, primaryImageOfPage, Open Graph and the public page refer to accessible assets that do not disappear behind transient signatures.

Hashed immutable derivatives can receive long cache lifetimes; stable names require an explicit invalidation strategy. Inspect Cache-Control, ETag, Age and CDN behaviour. Remove sensitive EXIF, XMP and coordinates from public derivatives while preserving colour information that the rendering policy needs.

CI can check dimensions, formats, MIME types, metadata, bytes, candidate coverage and broken URLs. It cannot approve crop, visual meaning or brand quality. A blocking regression should fail with a timestamped report and a named owner, not a private warning.

The report follows a public JSON Schema. Its initial status remains Not tested: collecting a value is not a decision. The auditor maps observations to IMGxx identities, supplies required non-public access and signs the outcome.

Recommended citation: Morel, Bertrand (2026). “Web image optimisation: verifiable protocol, 36-control grid and evidence collector.” Edikka, version 1.1, 23 August 2026, CC BY 4.0. The CITATION.cff file provides structured fields. This edition has no assigned DOI; the canonical URL, version and date are its published citation keys.