Images not served in WebP or AVIF

What Is This Issue

This issue checks whether images on a webpage are delivered in modern compressed formats like WebP or AVIF instead of legacy formats like JPEG, PNG, or GIF.

What passes

A passing implementation means that the majority of images on the page (and across the site) are served in modern formats. This is considered passing when:

At least one WebP or AVIF image is detected on the page
80% or more of page images are in modern formats (when 5+ images exist)
85% or more of site-wide images are in modern formats (when 20+ images exist)

Example

A product page with 10 images where 9 are served as WebP and 1 as JPEG would pass. However, if 8 images are JPEG and only 2 are WebP, the page would fail because modern format coverage is only 20%.

Why Is This Important

Images are often the largest assets transferred on a webpage. Using modern compressed formats directly impacts:

Page Experience & Rankings

Smaller image files improve page loading speed, which is a ranking factor and improves Core Web Vitals scores (especially Largest Contentful Paint).

Crawl Efficiency

Reduced payload sizes allow search engine crawlers to fetch more pages with the same crawl budget, improving indexation.

User Experience

Faster-loading images improve perceived performance, especially on mobile devices and slower network connections.

SEO Health Score Impact

Resolving this issue improves the overall SEO health score by optimizing one of the most impactful page weight factors. Sites that adopt modern image formats typically see 25-50% reduction in image payload size.

How XeoPix Detects This

XeoPix identifies this issue through the following logical steps:

1. Image Discovery

The crawler collects all image URLs from the page, including <img src>, <img srcset>, <picture> element sources, and CSS background images when available.

2. Format Detection

For each image, XeoPix determines the format by checking:

The Content-Type header from the server response
The file extension in the URL path
The file’s magic byte signatures (the first few bytes of the file that identify its format)

3. Classification

Images are classified as:

Modern formats: AVIF or WebP
Legacy formats: JPEG, PNG, GIF, BMP, or TIFF

4. Coverage Calculation

XeoPix calculates the percentage of images in modern formats at both page-level and site-level.

5. Issue Triggering

The issue is flagged when:

No modern format images are detected on a page with images
Less than 80% of images on a page are modern formats (for pages with 5+ images)
Less than 85% of images across the site are modern formats (for sites with 20+ images)
Some image formats cannot be verified due to blocked requests or missing headers

How To Fix

1. Generate modern format derivatives

Create WebP and AVIF versions of all images at upload time or during your build process.

2. Implement `<picture>` element

Use the HTML <picture> element with AVIF and WebP sources listed first, followed by JPEG/PNG as fallbacks for older browsers.

3. Configure server/CDN headers

Ensure your web server or CDN correctly serves image/avif and image/webp MIME types for these file formats.

4. Update templates and CMS

Replace hardcoded references to .jpg or .png files with references to the modern format versions.

5. Validate deployment

After making changes, re-crawl the site to confirm modern format coverage meets the recommended thresholds.

What We Store

Storage Level

Page Level

Database Table / Prisma Model

PageImageAnalysis

Stored Fields

Field	Type	Description
imageUrl	String	URL of the image
imageFormat	String	Format of the image (jpg, png, etc.)

Detection Dependencies

HTML Document

Examples

Example 1: Passing Implementation

Scenario: Product page with modern image formats

Passing state:


<picture>
  <source srcset="product-photo.avif" type="image/avif" />
  <source srcset="product-photo.webp" type="image/webp" />
  <img src="product-photo.jpg" alt="Blue running shoes" />
</picture>

9 out of 10 images on the page use WebP or AVIF format.

Example 2: Failing Implementation

Scenario: Blog post with legacy image formats

Failing state:


<img src="image1.jpg" alt="Description" />
<img src="image2.png" alt="Another description" />
<img src="image3.jpeg" alt="Third image" />

All images are in legacy formats (JPEG/PNG). Modern format coverage is 0%.

Example 3: Mixed Implementation

Scenario: Homepage with partial modern format adoption

Failing state:


<img src="banner.jpg" alt="Banner" />
<img src="photo.webp" alt="Photo" />
<img src="icon.png" alt="Icon" />
<img src="thumbnail.jpg" alt="Thumbnail" />

Only 1 out of 4 images (25%) uses modern format. Below the 80% threshold for pages with 5+ images.

Unit Test

Test File

xeopix-crawling-v2/__tests__/seo-audit-checks/imageAnalysis/issue-22-images-compressed-webp.test.js

Purpose

This unit test validates that the image analysis correctly detects images that are not served in modern compressed formats (WebP/AVIF) and flags legacy formats (JPEG, PNG, GIF) as an SEO issue.

Tested Function

runImageAnalysis(ctx) from toggleGroups/imageAnalysis.js

Issue Information

Issue Number: 22
Issue Code: images_compressed_webp
Toggle Group: imageAnalysis

Test Scenarios

Positive Test Cases

#	Scenario	Expected Result
1	All images use WebP format (`image1.webp`, `image2.webp`)	No issue detected
2	All images use AVIF format (`image1.avif`, `image2.avif`)	No issue detected
3	HTML contains no `<img>` tags	No issue detected
4	Empty HTML string	No issue detected, no crash

Negative Test Cases

#	Scenario	Expected Result
1	Images use JPEG format (`.jpg`, `.jpeg`)	Issue detected with `imageCount` = 2
2	Images use PNG format (`.png`)	Issue detected with `imageCount` = 1
3	Images use GIF format (`.gif`)	Issue detected with `imageCount` = 1
4	Mixed formats: WebP, JPEG, AVIF, PNG	Issue detected with `imageCount` = 2 (only non-modern formats flagged)
5	Images without `src` but with `data-src` pointing to a non-modern format	Issue detected with `imageCount` = 1
6	Multiple images all using the same non-modern format (5 JPEGs)	Issue detected with `imageCount` = 5, `sampleImages` length = 5
7	Relative URLs (`/images/photo.jpg`, `./assets/pic.png`)	Issue detected with resolved absolute URLs in `sampleImages`

Edge Cases

#	Scenario	Expected Result
1	Empty HTML	Function does not throw; no issue detected
2	HTML with no `<img>` tags	No issue detected
3	Images without `src` attribute but with `data-src` containing a non-modern format	Issue detected (uses `data-src` as fallback)
4	Malformed HTML (unclosed `<img>` tag)	Function does not throw; issue detected
5	Images with query parameters in URL (`image.jpg?v=123`)	Issue detected with `imageCount` = 2

Cache Validation

#	Scenario	Expected Result
1	Two consecutive calls with the same HTML	`result1 === result2` (same object reference); `ctx.cache['imageAnalysis']` is defined

Expected Outcome

Pass

The issue should be reported when one or more images on the page use legacy formats (JPEG, PNG, GIF) instead of modern formats (WebP, AVIF). The imageCount reflects the number of non-modern images, and sampleImages contains their resolved absolute URLs.

Fail

The issue should not be reported when all images on the page use WebP or AVIF format, or when there are no images on the page.

Validation

The unit test verifies:

Correct issue detection: Images in non-modern formats (JPEG, PNG, GIF) are correctly flagged
No false positives: WebP and AVIF images are not flagged
Payload validation: issueCode, details.imageCount, and details.sampleImages contain the correct data
URL resolution: Relative image URLs are resolved to absolute URLs using ctx.pageUrl
Cache behaviour: Results are cached on ctx.cache['imageAnalysis'] and subsequent calls return the same cached result
Error handling: Empty HTML, malformed HTML, and missing src attributes are handled gracefully without throwing

File	Role
`toggleGroups/imageAnalysis.js`	Contains the `runImageAnalysis()` function under test
`issueCodes.js`	Defines the `IMAGES_COMPRESSED_WEBP` issue code constant

Coverage Summary

4 positive test cases covering all-modern formats (WebP, AVIF) and no-image scenarios
7 negative test cases covering every legacy format, mixed formats, lazy-loaded images, multiple images, and relative URL resolution
5 edge cases covering empty HTML, malformed HTML, missing src, query parameters, and no-image scenarios
1 cache validation test ensuring idempotent behaviour

References

Image SEO best practices — Google Search Central
Use WebP images — web.dev
Image file type and format guide — MDN