patternjavascriptModerate

Image SEO: alt text, lazy loading, and next-gen formats

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

image seoalt textlazy loadingwebpavifimage optimizationlcp image

Problem

Images without alt text are invisible to screen readers and search engines. Large unoptimized images hurt LCP and Core Web Vitals scores. Missing lazy loading causes unnecessary bandwidth usage and slower page loads.

Solution

Write descriptive alt text for all meaningful images (leave alt='' for decorative images). Add loading='lazy' to all below-the-fold images. Use next-gen formats (WebP, AVIF) with <picture> fallbacks. Compress images and specify explicit width/height to prevent CLS.

Why

Alt text is the primary way Google Images indexes image content and attributes relevance. Lazy loading defers off-screen image fetches, directly improving LCP for above-the-fold content. WebP images are typically 25-35% smaller than JPEG at equivalent quality.

Gotchas

Do NOT add loading='lazy' to the Largest Contentful Paint (LCP) image — it delays LCP
Alt text should describe the image content, not stuff keywords — keyword stuffing in alt text is a spam signal
Decorative images should have alt='' (empty string), not a missing alt attribute — missing alt fails accessibility audits
Next.js <Image> component handles lazy loading, format conversion, and sizing automatically

Code Snippets

Optimized image markup with lazy loading and next-gen format

<!-- LCP hero image: no lazy loading, preload hint -->
<link rel="preload" as="image" href="hero.webp" />
<img src="hero.webp" width="1200" height="630" alt="Team collaborating in an open office" fetchpriority="high" />

<!-- Below-fold image: lazy load with WebP + JPEG fallback -->
<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" width="800" height="600" alt="Product closeup showing texture detail" loading="lazy" />
</picture>

Context

Any page with images, especially content-heavy or e-commerce sites

Revisions (0)

No revisions yet.