SEO Mastery Logo
Back to On-Page SEO

Images & Media Optimization

On-Page SEOBeginner8 min readUpdated June 13, 2026
Hero Image

Uploading a massive, unoptimized 5MB image from your iPhone directly to your website is the fastest way to ruin your SEO. It devastates page load times, ruins your Core Web Vitals (specifically Largest Contentful Paint), and heavily frustrates mobile users.

Short Summary

Modern image optimization involves a balance of performance and context: aggressive file size compression using next-gen formats, semantic file naming, and highly descriptive Alt Text for accessibility and Google Image Search dominance.

Anatomy of a 2026 Optimized Image

1. Semantic File Naming

Search engine crawlers do not "look" at the pixels of your image to understand its context; they read the surrounding metadata. The very first signal is the filename itself.

  • Terrible: IMG_9482_FINAL_v2.png
  • Good: roofing-contractor-austin.jpg
  • Best: commercial-metal-roofing-installation-austin-texas.jpg (Descriptive, uses hyphens, avoids stop words)

2. Alt Text: Accessibility First

Alt text (Alternative Text) displays if an image fails to load and is read aloud by screen readers. By writing highly descriptive Alt Text for visually impaired users, you naturally provide Google with exactly what it needs to rank your image in Google Lens and Image Search.

  • Bad: alt="plumber chicago plumber near me" (Spammy keyword stuffing)
  • Good: alt="A licensed plumber using a wrench to fix a leaking PVC pipe under a kitchen sink" (Descriptive and natural)

3. Next-Gen Formats: WebP and AVIF

JPEG and PNG are legacy formats. To pass strict 2026 Core Web Vitals thresholds, you must use modern compression.

  • WebP: Widely supported and typically 30% smaller than JPEGs without quality loss.
  • AVIF: The new gold standard in 2026, offering up to 50% better compression than WebP. Always aim to keep standard blog images under 100KB, and hero images strictly under 250KB.

4. Lazy Loading & Responsive Sizing

Never load images the user hasn't scrolled down to see yet.

  • Use native HTML attribute loading="lazy" on all images that appear below the fold.
  • Ensure you use srcset attributes so mobile users are served a small mobile-sized image, while 4K desktop users get the high-res version.

Checklist

  • All images have been compressed (ideally under 100KB).
  • Images are served in next-gen formats like WebP or AVIF.
  • Image filenames are descriptive, lower-case, and use hyphens for spaces.
  • Every non-decorative image has detailed, natural, and accessible Alt Text.
  • Images below the fold utilize loading="lazy".
  • Images have explicit width and height attributes to prevent Cumulative Layout Shift (CLS).