Demo · measured with Lighthouse

A full-width hero photo, the right way.

The photo above is the Largest Contentful Paint element of this page. It is in the initial HTML with fetchpriority="high", has width and height, offers AVIF then WebP then JPEG, and carries a srcset so a phone downloads the 640-px file instead of the 1920-px one. This is the markup the converter and the API emit for an image flagged as LCP:

<picture>
  <source type="image/avif" srcset="/research/hero/hero-640-72c3e9bfb7.avif 640w, /research/hero/hero-1024-4d63a411e5.avif 1024w, /research/hero/hero-1600-f367104a4b.avif 1600w, /research/hero/hero-1920-8f84bfd9f8.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="/research/hero/hero-640-7f49a21972.webp 640w, /research/hero/hero-1024-c91e9c8c61.webp 1024w, /research/hero/hero-1600-e5c9a6e731.webp 1600w, /research/hero/hero-1920-8e7b791ac1.webp 1920w" sizes="100vw">
  <img src="/research/hero/hero-893c68f5a6.jpg" srcset="/research/hero/hero-640-98bdf8f4af.jpg 640w, /research/hero/hero-1024-65112cafb1.jpg 1024w, /research/hero/hero-1600-e2d72b6376.jpg 1600w, /research/hero/hero-1920-893c68f5a6.jpg 1920w" sizes="100vw" width="1920" height="1280" alt="Hairdresser's shop front on a UK high street" fetchpriority="high" decoding="async">
</picture>

The measurement

Lighthouse on this page and on the same page with the JPEG export in a bare <img> — mobile and desktop, light and dark scheme. The summary is on the landing page; the table is filled by scripts/build-scoreboard.mjs after each run.

All eight Lighthouse runs
Page	Run	Performance	LCP	CLS	TBT
before	mobile · light	66	5.6 s	0.258	71 ms
before	mobile · dark	80	5.6 s	0.000	0 ms
before	desktop · light	99	1.0 s	0.000	0 ms
before	desktop · dark	99	1.0 s	0.000	0 ms
after	mobile · light	100	1.2 s	0.000	0 ms
after	mobile · dark	100	1.2 s	0.000	0 ms
after	desktop · light	100	404 ms	0.000	0 ms
after	desktop · dark	100	404 ms	0.000	0 ms

Check it yourself on Google PageSpeed Insights: before · after.