Images & Media Optimization
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
srcsetattributes 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
widthandheightattributes to prevent Cumulative Layout Shift (CLS).