🖼️Image SEO: Alt Text, File Names & Optimization
A complete guide to optimizing images for search engines — writing effective alt text, choosing the right file names, formats, compression, and lazy loading.
Images are the most common cause of poor PageSpeed scores and one of the most overlooked SEO opportunities. Properly optimized images improve page speed, accessibility, and can drive traffic via Google Image Search.
Alt Text: The Most Important Image Attribute
Alt text (alternative text) serves three purposes: it's read by screen readers for visually impaired users, displayed when an image fails to load, and used by search engines to understand image content. Google cannot "see" images — it reads alt text.
| Image Type | Alt Text Approach | Example |
|---|---|---|
| Product photo | Describe the product specifically | "Red leather hiking boots size 10" |
| Infographic | Describe the key data point | "Bar chart showing 65% CTR improvement with alt text" |
| Decorative | Empty alt="" (not omit the attr) | alt="" |
| Logo | Brand name + purpose | "Acme Corp logo" |
| Complex diagram | Short alt + long description nearby | "Flow chart of analysis pipeline [see description below]" |
Do not stuff keywords into alt text. "SEO seo search optimization best seo checker free" is a spam signal. Write natural descriptions that happen to include relevant words.
File Names and Formats
File names are a minor but real ranking signal for image search. Use descriptive, hyphenated names: red-leather-hiking-boots.webp is better than IMG_4821.jpg.
- WebP — best choice for photos and complex images. 25-35% smaller than JPEG at equivalent quality.
- AVIF — even smaller than WebP, but browser support is still maturing.
- SVG — ideal for logos, icons, and illustrations. Infinitely scalable, tiny file size.
- PNG — use only for images requiring transparency without SVG option.
- JPEG — acceptable fallback but prefer WebP.
Lazy Loading
Lazy loading defers off-screen image loading until the user scrolls near them. Add loading="lazy" to all <img> tags below the fold. Never add it to the largest above-the-fold image (your LCP element) — this delays your Largest Contentful Paint score.
<!-- Above the fold (LCP candidate) — DO NOT lazy load -->
<img src="hero.webp" alt="Hero image" width="1200" height="600">
<!-- Below the fold — lazy load these -->
<img src="product.webp" alt="Red leather boots" width="400" height="400" loading="lazy">Specifying Dimensions
Always specify width and height attributes on images. This allows browsers to reserve space before the image loads, preventing Cumulative Layout Shift (CLS) — a Core Web Vital that penalises pages with elements jumping around during load.
References
- [1]Google: Image SEO best practices — Official guidance for optimizing images in Google Search — developers.google.com
- [2]Google: WebP image format — Compression techniques and browser support — developers.google.com