Image & Multimedia Optimization: alt, WebP, srcset & CLS Prevention

Images often account for the bulk of page weight yet are frequently overlooked. When optimized properly, they improve three things simultaneously: SEO (image search, content comprehension), performance (load speed, Core Web Vitals), and accessibility (screen readers). This guide covers alt text, format selection, compression and responsive images, lazy loading for CLS prevention, and image search optimization.

Alt Text#

alt (alternative text) describes image content for users who cannot see images and for search engines. Principles:

Concise & Accurate: Describe the actual image content;
Natural Keywords: Naturally include relevant keywords—no stuffing;
Empty Alt for Decor: Use alt="" for purely decorative images so assistive technologies skip them.

alt.html

<!-- Good -->
<img src="keyword-funnel.webp" alt="Funnel diagram showing keywords grouped by search intent" width="800" height="450">
<!-- Bad: no info / keyword stuffing -->
<img src="img1.jpg" alt="SEO keywords ranking optimization tools tutorial">

Alt is Accessibility Firstalt's primary purpose is helping visually impaired users understand images. SEO value is a natural byproduct. Write as if "reading to someone who can't see"—you'll naturally get it right.

File Naming & Formats#

Naming: Use descriptive English filenames like keyword-funnel.webp, not IMG_2046.jpg;
Formats: Prioritize WebP / AVIF (smaller files at similar quality); use SVG for icons and simple graphics;
Fallback: Use <picture> to provide multiple formats with JPEG fallback for older browsers.

Content	Recommended Format
Photographs	AVIF / WebP (fallback JPEG)
Transparent Background	WebP / PNG
Icons, Graphics	SVG

Compression & Responsive Images#

Compression removes unnecessary bytes, while srcset serves appropriate sizes for different screens, avoiding mobile devices downloading desktop-sized images:

srcset.html

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450"
  alt="Diagram">

For comprehensive performance and Core Web Vitals optimization, see the Site Speed guide in the Technical SEO section.

Lazy Loading & CLS Prevention#

Always Declare DimensionsWrite width/height (or CSS aspect-ratio) for every image so the browser reserves space and prevents layout shift during loading (CLS). Images without dimensions are the #1 CLS source.

Use native loading="lazy" for below-the-fold images to reduce initial load;
Don't lazy load critical above-the-fold images (LCP elements)—it slows down initial render;
Use lazy loading in combination with dimension attributes.

Image Sitemaps & Image Search#

To drive traffic from Google Images:

Ensure images are not blocked by robots.txt and are crawlable;
Place images in relevant context, surrounded by related text and headings;
For large image collections, provide an image sitemap or include image information in your sitemap;
Product images can be enhanced with Product structured data.

Image Optimization Checklist#

Every image has accurate alt (empty alt for decorative images)
Descriptive filenames
Modern formats WebP/AVIF, SVG for icons
Compressed with srcset for responsive delivery
Explicit width/height or aspect-ratio to prevent CLS
Lazy load below-the-fold, but not LCP images
Images not blocked by robots.txt
Image sitemap for large image collections

Triple WinImage optimization improves SEO, performance, and accessibility simultaneously—rarely does one SEO action benefit so many areas at once.

Frequently Asked Questions#

How should I write alt text?

Alt text should concisely and accurately describe the image content so that people who cannot see it (including screen reader users and search engines) understand what it conveys. Naturally include relevant keywords without keyword stuffing. Decorative or non-informative images can use empty alt (alt="") so assistive technologies skip them. The primary purpose of alt is accessibility—SEO value is a natural byproduct.

What image format should I use?

Prioritize modern formats like WebP or AVIF—they deliver significantly smaller file sizes at similar quality compared to JPEG/PNG, dramatically improving load speed. Use WebP/AVIF or JPEG for photos, WebP/PNG when transparency is needed, and SVG for simple graphics and icons. Use the picture element to provide multiple formats with fallbacks, allowing browsers that don't support newer formats to fall back to JPEG.

How do I prevent images from causing CLS (Cumulative Layout Shift)?

Explicitly declare width and height attributes on every image (or use CSS aspect-ratio). This allows the browser to reserve the correct space before the image loads, preventing content from jumping during loading. CLS is one of the Core Web Vitals metrics, and images without dimensions are a common CLS source. Lazy loading should also be used together with dimension attributes.

Does lazy loading affect SEO?

When implemented correctly, it doesn't—in fact, it helps performance. Use native loading="lazy" for below-the-fold images to reduce initial load and improve LCP. However, don't lazy load critical above-the-fold images (especially LCP elements), or you'll slow down initial render. Also ensure your lazy loading implementation doesn't prevent search engines from discovering images—native loading attributes are safe to use.