Image Alt Text & Optimization
Optimize images with alt text, file names and compression for SEO.
Images improve engagement but must be optimized so they help - not hurt - SEO.
Alt text
The alt attribute describes an image for screen readers and search engines. It is vital for accessibility and helps images rank in image search.
Best practices
- Write descriptive, specific alt text; include a keyword only if natural.
- Use descriptive file names (
pour-over-v60.jpg, notIMG_2841.jpg). - Compress images and use modern formats like WebP or AVIF.
- Add
widthandheightto prevent layout shift (CLS). - Use
loading="lazy"for below-the-fold images.
Example
<img
src="/img/pour-over-v60.webp"
alt="Hario V60 dripper brewing pour over coffee into a glass carafe"
width="800" height="600"
loading="lazy">When to use it
- An e-commerce site adds descriptive alt text to product images, making them discoverable in Google Images and accessible to screen reader users simultaneously.
- A news site names image files with descriptive slugs ('marathon-2024-finishers.jpg') instead of 'IMG_4821.jpg' to improve contextual relevance for image search.
- A web developer runs an automated audit that flags all images with empty or missing alt attributes before each deploy to production.
More examples
Descriptive alt text vs empty alt
Alt text should describe what is in the image naturally; decorative images use empty alt so they are skipped by screen readers.
<!-- Decorative image: empty alt so screen readers skip it -->
<img src="divider-wave.svg" alt="">
<!-- Informative product image: keyword-rich but natural alt -->
<img
src="/images/trail-runner-pro-blue.jpg"
alt="Trail Runner Pro in blue — lightweight off-road running shoe"
width="800" height="600"
loading="lazy">
<!-- Avoid: keyword stuffing in alt text -->
<!-- alt="running shoes buy cheap running shoes best running shoes" -->Responsive image with SEO-friendly srcset
Srcset and sizes serve the correct image resolution per viewport, reducing bandwidth and improving Core Web Vitals LCP scores.
<img
src="/images/trail-runner-pro-800.jpg"
srcset="/images/trail-runner-pro-400.jpg 400w,
/images/trail-runner-pro-800.jpg 800w,
/images/trail-runner-pro-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Trail Runner Pro in blue — lightweight off-road running shoe"
width="800" height="600"
loading="lazy">Audit missing alt text with Python
Fetching a page and inspecting every img element catches missing or empty alt attributes that would otherwise harm both SEO and accessibility.
python3 - << 'EOF'
import requests
from bs4 import BeautifulSoup
url = "https://example.com/shoes/trail-runner-pro/"
soup = BeautifulSoup(requests.get(url, timeout=5).text, 'html.parser')
for img in soup.find_all('img'):
alt = img.get('alt')
src = img.get('src', '[no src]')
if alt is None:
print(f"MISSING ALT: {src}")
elif alt == '':
print(f"EMPTY ALT (decorative): {src}")
else:
print(f"OK ({len(alt)}ch): {src}")
EOF
Discussion