Images bring traffic from Google Images and make pages readable. But they are also the most common cause of slow pages and accessibility failures.
Alt text
Alt text describes the image for screen readers and search engines. Write what the image shows, in context.
- Good: alt="Stainless steel coffee grinder on a kitchen counter"
- Bad: alt="image", alt="coffee grinder coffee grinder buy"
Decorative images should have an empty alt (alt="") so screen readers skip them.
File names
Use descriptive, hyphenated names before upload (nike-running-shoe.webp), not IMG_2043.jpg.
Formats and size
- Use WebP or AVIF, which are far smaller than JPEG/PNG
- Serve the right dimensions; do not scale a 3000px image down with CSS
- Compress to a sensible quality
Loading
- Lazy-load images below the fold
- Always set width and height to prevent layout shift
- Preload the main hero image
Image sitemaps and captions
An XML sitemap can include image URLs, and captions can be indexed. Keep filenames and alt text consistent with your topic.
Check yours
Paste a page's HTML into the free on-page audit — it flags images missing alt text as part of the score.