Legacy image formats: switch JPEG/PNG to WebP/AVIF

What it means

One or more <img> elements use a legacy raster format (.jpg, .jpeg, .png, .gif) and are not backed by a <picture> element that declares a typed next-gen (image/webp or image/avif) <source>. Detection is from the src extension and the surrounding markup only — no image is fetched.

Why it matters

WebP and AVIF are Google's recommended image formats: they encode the same visual quality at a fraction of the byte weight of JPEG/PNG, which directly reduces transfer time and improves LCP. A legacy-format image with no modern fallback ships more bytes than necessary on every load. Serving a next-gen format via a typed <picture> <source> lets modern browsers pick the lighter file while older browsers fall back to the legacy <img>.

How to fix it

1. Generate WebP or AVIF versions of your raster images at build/upload time.
2. Wrap the <img> in a <picture> with typed <source> elements (type="image/avif", type="image/webp") before the <img> fallback.
3. Keep the original JPEG/PNG as the <img> fallback so unsupported browsers still get an image.
4. For CDN-transformed images, enable automatic format negotiation (Accept-based WebP/AVIF).

Example

<img src="/img/product.jpg" width="800" height="800" alt="Ceramic mug">

<picture>
  <source type="image/avif" srcset="/img/product.avif">
  <source type="image/webp" srcset="/img/product.webp">
  <img src="/img/product.jpg" width="800" height="800" alt="Ceramic mug">
</picture>

Keep the JPEG as the <img> fallback and add typed <source> entries so modern browsers pick AVIF/WebP. Same markup, 30-60% fewer bytes on capable clients.

When it's not a problem

A legacy format is fine when the image is already inside a <picture> offering a webp/avif source (Crawlinx does not flag those), when the format is required for a specific feature (animated GIF where a video is not an option), or when the image is tiny enough that re-encoding saves nothing. Transparency needs are met by both PNG and WebP/AVIF, so PNG is rarely the only option.

How Crawlinx detects it

We look at each <img> and its file extension. A jpg/png/gif image that is NOT already wrapped in a <picture> with a typed next-gen <source> is flagged, since it ships extra bytes with no modern fallback.

How common is it?

11730 audited sites in our corpus currently show this issue. The breakdowns below show which platforms, gatekeepers, verticals and countries are most exposed.

FAQ

Do I have to stop using JPEG and PNG?

No — keep them as the <img> fallback inside <picture>. Just add AVIF/WebP <source> entries so modern browsers download the smaller format while old ones still get the JPEG/PNG.

Is a lone WebP <img> enough?

Yes if you don't need legacy support — a direct .webp/.avif <img> won't trip this check. The flag fires on jpg/png/gif with no next-gen alternative offered.

Does next-gen format matter for SEO?

Indirectly: smaller images cut LCP and total page weight, both of which feed Core Web Vitals. Format alone isn't a ranking factor, but the speed it buys is.