Issue 22

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%.

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.

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.

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.

PixyScan 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, PixyScan 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

PixyScan 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