Image Optimization Monitoring: WebP, AVIF, and Lazy Loading

Images are typically the largest component of page weight and the most common cause of poor LCP. A single oversized hero image can make the difference between an LCP of 1.8 seconds and 5.2 seconds. Image optimization monitoring ensures that image quality is maintained continuously — not just when a developer remembers to check.

The Image Performance Landscape in 2026

Modern image formats and their savings: | Format | vs JPEG | Browser Support | Use Case | |--------|---------|----------------|----------| | WebP | 25-35% smaller | 97%+ | General replacement for JPEG/PNG | | AVIF | 40-55% smaller | 92%+ | Best quality/size ratio available | | JPEG XL | 20-60% smaller | 75%+ | Emerging; not yet widely deployed |

The average page in 2026 still uses JPEG for more than 60% of images, leaving significant performance on the table. Monitoring image format usage reveals these opportunities.

What Image Optimization Monitoring Covers

A complete image monitoring program covers:

Format compliance: Are images served in modern formats (WebP/AVIF) with appropriate fallbacks?

Size appropriateness: Are images served at the right dimensions for their display size? (Serving a 3000px image in a 400px container is wasteful)

Lazy loading correctness: Are below-the-fold images lazy-loaded? Is the LCP image not lazy-loaded?

Compression quality: Are images over-compressed (poor quality) or under-compressed (unnecessarily large)?

Alt text presence: Do images have alt text? (Accessibility and SEO)

Image dimensions specified: Do images have explicit width/height to prevent CLS?

Monitoring Image Optimization with Lighthouse

Lighthouse provides automated image optimization audits:

# Lighthouse image-specific audits:
- uses-optimized-images       # Checks if images can be compressed further
- uses-webp-images            # Checks if WebP would save significant bytes
- uses-responsive-images      # Checks if images are sized appropriately
- offscreen-images            # Checks if off-screen images are lazy-loaded
- efficient-animated-content  # Checks if animated GIFs should be videos
- image-alt                   # Checks if images have alt text

Run Lighthouse in CI/CD to catch image optimization regressions:

# .github/workflows/lighthouse.yml
- name: Run Lighthouse
  run: |
    npx lhci autorun --config=.lighthouserc.json
  
# lighthouserc.json
{
  "ci": {
    "assert": {
      "assertions": {
        "uses-webp-images": ["warn", { "maxLength": 0 }],
        "offscreen-images": ["warn", { "maxLength": 0 }],
        "uses-responsive-images": ["error", { "maxLength": 0 }]
      }
    }
  }
}

Implementing Modern Image Formats

AVIF with WebP Fallback

<picture>
  <!-- AVIF: best quality/size, newest format -->
  <source srcset="hero.avif" type="image/avif">
  <!-- WebP: excellent quality/size, wide support -->
  <source srcset="hero.webp" type="image/webp">
  <!-- JPEG: universal fallback -->
  <img src="hero.jpg" alt="Hero image" 
       width="1200" height="600"
       fetchpriority="high">
</picture>

Responsive Images

Serve different sizes for different viewports:

<img
  srcset="
    hero-400.avif 400w,
    hero-800.avif 800w,
    hero-1200.avif 1200w
  "
  sizes="
    (max-width: 400px) 400px,
    (max-width: 800px) 800px,
    1200px
  "
  src="hero-1200.jpg"
  alt="Hero image"
  width="1200"
  height="600"
>

This ensures a mobile user on a 400px screen downloads a 400px image, not a 1200px image that CSS scales down.

Lazy Loading Implementation

<!-- Below-the-fold images: lazy load -->
<img src="gallery-1.webp" 
     loading="lazy" 
     alt="Gallery image 1"
     width="800" height="600">

<!-- Above-the-fold LCP image: never lazy load -->
<img src="hero.webp" 
     loading="eager"
     fetchpriority="high"
     alt="Hero image"
     width="1200" height="600">

Common lazy loading mistakes:

1. Applying loading="lazy" to your LCP image (delays the most important image)
2. Not specifying width and height on lazy images (causes CLS when they load)
3. Using JavaScript lazy loading libraries instead of native loading="lazy" (adds unnecessary JS)

Automated Image Optimization Pipeline

For sites using a CMS or accepting user-uploaded images, automate optimization:

Next.js Image Component

Next.js's <Image> component handles format conversion, resizing, and lazy loading automatically:

import Image from 'next/image';

function ProductPage({ product }) {
  return (
    <div>
      {/* Next.js automatically serves WebP/AVIF, correct sizes */}
      <Image
        src={product.heroImage}
        alt={product.name}
        width={800}
        height={600}
        priority  // Add priority to LCP images
        sizes="(max-width: 768px) 100vw, 800px"
      />
    </div>
  );
}

Cloudinary or imgix for CMS Images

For user-uploaded images in a CMS:

// Cloudinary: Auto-format and quality
const optimizedUrl = cloudinary.url(publicId, {
  fetch_format: 'auto',  // Serves WebP/AVIF based on browser
  quality: 'auto',        // Optimal quality compression
  width: 800,
  crop: 'scale'
});

// imgix: Similar auto-optimization
const imgixUrl = `https://yoursite.imgix.net/${path}?auto=format,compress&w=800`;

Continuous Image Monitoring

Images are often added by content teams, not developers — and content teams don't always think about optimization. Continuous monitoring catches unoptimized images added after deployment:

Monitor page weight by resource type:

• Alert if image payload exceeds 1MB per page
• Alert if any single image exceeds 300KB
• Alert if the percentage of WebP/AVIF images drops below 80%

Monitor LCP image specifically:

import { onLCP } from 'web-vitals/attribution';

onLCP(({ value, attribution }) => {
  const lcpElement = attribution.lcpEntry?.element;
  if (lcpElement?.tagName === 'IMG') {
    const src = lcpElement.src;
    const format = src.split('.').pop().toLowerCase();
    
    if (['jpg', 'jpeg', 'png'].includes(format)) {
      analytics.track('unoptimized_lcp_image', { src, format, lcp: value });
    }
  }
});

This alerts you when your LCP image is served in an unoptimized format.

AzMonitor's performance monitoring checks include image audit metrics from Lighthouse, showing you when image optimization regresses on your key pages. Start monitoring image performance alongside uptime monitoring for complete web performance coverage.

Related: LCP monitoring guide — images are often the LCP element and the primary target for LCP optimization.