Image optimization for SEO: the complete guide
Images are the heaviest assets on most web pages — and how you handle them directly affects your Google rankings through Core Web Vitals. Here's the complete playbook.
1. Compress and use modern formats
Convert photos to WebP (25-35% smaller than JPG) and compress at ~82% quality. This is the single biggest win. Use JPG to WebP or the image compressor to do it in bulk.
2. Right-size your images
Don't ship a 4000px image to display it at 800px. Cap the longest side to your real layout width (often 1920px desktop, 1080px mobile). A correctly sized image can be 80% smaller before any quality trade-off. Use the resizer.
3. Set width and height attributes
Always include width and height on <img> tags so the browser reserves space. This prevents layout shift (CLS), a Core Web Vital.
4. Use responsive images (srcset)
Ship multiple sizes and let the browser pick:
<img srcset="img-800.webp 800w, img-1600.webp 1600w"
sizes="(max-width:768px) 100vw, 1600px"
src="img-1600.webp" width="1600" height="900" alt="descriptive text">5. Write descriptive alt text
Alt text helps accessibility and image SEO. Describe the image naturally, including relevant keywords where they fit honestly.
6. Lazy-load below-the-fold images
Add loading="lazy" to images that aren't visible on first paint, so they don't block the initial load.
7. Name files descriptively
blue-running-shoes.webp beats IMG_4821.webp for image search.
The fast workflow
For an existing site: run your whole image folder through bulk compression to WebP at 82%, capped at 1920px, then download the ZIP and replace your assets. It's the highest-ROI SEO task you can do in an afternoon. See also: best way to compress images for websites.