Serve Images in Next-Gen Formats

The Lighthouse warning means convert your JPEG and PNG files to WebP or AVIF, then serve them through a picture element with the original as a fallback. The audit is one of the easier ones to clear, because the fix is mechanical rather than architectural.

Lighthouse raises the warning when it finds images it believes would be materially smaller in a modern format. The estimate is based on the file it downloaded, so the saving it reports is usually achievable and occasionally conservative.

What Lighthouse is measuring

Lighthouse re-encodes each image as WebP internally and reports the difference when the saving exceeds a threshold. The number in the report is a genuine estimate rather than a generic recommendation.

Images below the threshold are ignored, which is why a page with 30 images may show only 4 in the audit. The listed files are the ones worth fixing first. Clearing them usually removes the warning entirely, even though other images on the page remain in older formats.

The markup that satisfies the audit

Use a picture element with AVIF first, WebP second and the original JPEG in the img tag. The browser picks the first source it understands, so newer browsers get the small file and older ones still get an image.

The img tag must remain, because it carries the alt text, the dimensions and the fallback. Omitting the width and height attributes causes layout shift as images load, which damages a different Core Web Vitals measurement while fixing this one. Set both attributes to the intrinsic pixel size of the fallback image.

How to clear the audit

To resolve the warning properly, follow these 6 steps.

1. Open the Lighthouse report and list the images it names, which are the ones with measurable savings.
2. Check the display size of each image, since many are oversized as well as in the wrong format.
3. Resize each image to its real display width, doubled for high density screens.
4. Convert to WebP at quality 80, and to AVIF at quality 65 for the largest images on the page.
5. Serve the results through a picture element with the original as the img fallback.
6. Re-run Lighthouse to confirm the warning has cleared and no layout shift has appeared.

Step 3 matters more than step 4. Dimensions control the majority of file size, and an oversized WebP is still an oversized image. Converting in bulk takes a couple of minutes, while writing the markup usually takes longer.

Which format for which image

Does your platform already do this

Many content systems and hosts convert images automatically, so check before building anything by hand. Doing the work twice is common and wasteful.

Test in 2 minutes. Open the published page, right click an image and open it in a new tab, then read the file extension in the address bar. A .webp extension on a file you uploaded as JPEG means the platform is already converting. Shopify, most managed WordPress hosts and several site builders do this by default.

Why the warning sometimes returns

New uploads reintroduce the problem when the conversion step is manual rather than automatic. A site cleared in January will show the warning again by June if editors upload straight from a camera.

Fix the process rather than only the files. Either enable automatic conversion at the platform level, or agree a simple rule that images are resized and converted before upload. Writing the rule down matters on any site where more than one person publishes, since the audit measures the worst image rather than the average one.

Should you use AVIF, WebP, or both

Use WebP alone on most sites, and add AVIF only for the largest images on the page. Supporting both doubles the number of files to generate, store and keep in sync for a saving that is small on ordinary images.

The calculation changes on photography heavy sites, where AVIF saves a further 20 to 30 percent on files already measured in hundreds of kilobytes. On a page carrying a 600 KB hero image, that is a real reduction. On a page of 40 KB thumbnails, the extra pipeline costs more effort than it returns, and WebP alone clears the audit.

Checking the result properly

Re-run Lighthouse in a private window with extensions disabled, because browser extensions distort the measurement. Scores also vary between runs, so compare 3 runs rather than trusting a single number.

Verify the browser is receiving the new format rather than assuming it. Open developer tools, switch to the Network tab, filter by images and reload the page. The Type column shows what was actually served. A page still serving JPEG after a conversion usually means the picture element markup is wrong, or a caching layer is holding the previous version.

Related audits that appear alongside it

• Properly size images. The image is larger than the space it displays in. Resize rather than compress.
• Efficiently encode images. The compression is too light. Lower the quality setting.
• Defer offscreen images. Add lazy loading to images below the fold.
• Largest Contentful Paint element. Usually your hero image, which deserves attention first.
• Image elements do not have explicit width and height. Add both attributes to prevent layout shift.

Those 5 audits usually appear together, and resizing plus converting the images named in the report clears most of them in a single pass.

How much this actually improves a page

Converting to modern formats typically removes 25 to 35 percent of image weight, and resizing first frequently removes far more. On an image heavy page the combined effect is often 70 to 80 percent.

The improvement shows up in Largest Contentful Paint, which measures how quickly the main content appears. That measurement is usually decided by one image, so reducing the hero file has an effect out of proportion to its share of the page. Reducing 20 small images matters less than reducing 1 large one.

What not to do

Do not remove the JPEG fallback, and do not convert images that visitors will download. Both mistakes trade a real capability for a small score improvement.

Press kits, printable guides, downloadable templates and supplier files should stay JPEG or PNG, since WebP handles poorly outside browsers. Serving those as modern formats produces support requests from people who cannot open them, which costs more than the bandwidth saved.

Converting the images the report named

Convert from the original files rather than from the versions already published, because a compressed JPEG carries damage into the new file. The encoder cannot distinguish existing artefacts from real detail and spends bits preserving them.

Drop up to 500 files in at once, or drag a ZIP archive straight in, and the whole set converts in a single pass. Everything runs inside your browser on your own processor, so client sites, staging assets and unpublished pages never reach a server. A full site conversion finishes in a few minutes without a single file crossing the network.

Keep the converted files alongside the originals using matching names, so the picture element markup can be generated with a predictable pattern rather than edited by hand for each image. A folder holding hero.jpg, hero.webp and hero.avif is straightforward to template, and it makes the next format migration a batch conversion rather than a rewrite of every page.