Image Format SEO Rule

Check that images use modern formats like WebP and AVIF for better compression and performance

What This Rule Checks

Detects legacy image formats (jpg, png, gif), checks for next-gen format alternatives in picture elements, reports missing srcset for responsive images, and summarizes format usage across the page.

Why It Matters for SEO & GEO

Modern image formats like WebP and AVIF offer 25-50% better compression than JPEG and PNG. Using them reduces page weight and improves Core Web Vitals scores.

How to Fix

Convert images to WebP or AVIF format. Use the picture element to provide format fallbacks. Add srcset attributes for responsive image serving across different screen sizes.

Examples

Bad

<img src="photo.jpg">

Good

<picture><source srcset="photo.avif" type="image/avif"><source srcset="photo.webp" type="image/webp"><img src="photo.jpg" alt="Fallback"></picture>

How VibeLinter Checks Image Formats

VibeLinter’s images/format rule performs these checks on every page:

Format detection — Identifies the format of each image from its file extension (jpg, png, gif, webp, avif, etc.)
Next-gen format check — For images in legacy formats not wrapped in a <picture> element, suggests using WebP or AVIF
Picture element analysis — When images are in <picture> elements, checks that <source> tags include next-gen format alternatives (webp or avif type)
Responsive images — Reports images without srcset attributes or <picture> element wrappers
Format summary — Warns when all images use legacy formats with no next-gen formats detected on the page

Configuration

// vibelinter.config.cjs
module.exports = {
  rules: {
    'images/format': {
      enabled: true,
      severity: 'info',
      preferredFormats: ['webp', 'avif'],
      checkNextGen: true
    }
  }
}

SEO Impact

Modern image formats affect:

Page weight reduction — WebP is 25-34% smaller than JPEG; AVIF is up to 50% smaller
Core Web Vitals — Smaller images directly improve LCP scores
Mobile performance — Compressed formats are especially impactful on mobile networks
GEO (Generative Engine Optimization) — Faster-loading pages with optimized images are prioritized by AI search engines when selecting source content for generated answers