Images are the single biggest contributor to slow page speeds — and slow pages directly hurt Google rankings through Core Web Vitals. But images also represent a massive SEO opportunity: Google Image Search drives billions of clicks per month, and alt text is a real relevance signal for page rankings. Image SEO is one of the highest-ROI optimizations on your site — and all 7 steps in this guide are completely free.
Most sites are leaving both rankings and traffic on the table because of unoptimized images. Uncompressed files that are hundreds of kilobytes larger than they need to be. Missing alt text on dozens of images. File names like IMG_7823.jpg that tell Google nothing. This guide fixes all of it.
Step 1 — Choose the Right Image Format
The image format you use determines file size, quality, and browser compatibility. Choosing the wrong format wastes bandwidth on every page load.
| Format | Best For | File Size | Browser Support | Recommendation |
|---|---|---|---|---|
| WebP | All photos and most graphics | Smallest (vs JPEG/PNG) | All modern browsers (95%+) | ✅ Best Choice |
| AVIF | Photos where max compression matters | Slightly smaller than WebP | ~85% of browsers | ⚠️ Good but less support |
| JPEG | Photos — WebP fallback | Medium | Universal | ⚠️ Fallback only |
| PNG | Logos, screenshots, transparency needed | Large (lossless) | Universal | ⚠️ Only when transparency needed |
| SVG | Icons, logos, simple graphics | Tiny (vector, scales infinitely) | Universal | ✅ Best for icons/logos |
| GIF | Avoid — use MP4 video or WebP animation | Very large for animations | Universal | ❌ Avoid in 2026 |
Convert All Images to WebP
⚡ Highest ImpactWebP is the default image format for SEO in 2026. Google developed it specifically for web performance and it delivers 25–35% smaller file sizes than JPEG at equivalent visual quality — with zero perceptible difference to your visitors.
Free conversion tools:
- Squoosh (squoosh.app) — Google’s free browser-based converter. Drag, convert, download. Best for individual images.
- ShortPixel (WordPress plugin) — auto-converts on upload, free for 100 images/month
- Smush (WordPress plugin) — free tier available, converts and compresses in bulk
- Cloudinary — free tier converts and serves WebP automatically based on browser support
Serve both formats: Use the HTML <picture> element to serve WebP to modern browsers and JPEG as a fallback for older browsers — though in 2026, WebP-only is acceptable for most sites given 95%+ browser support.
Step 2 — Compress Images to Target Sizes
Compress to Target File Sizes
⚡ Highest Impact on LCPNever upload raw images directly from your camera or design software. A raw DSLR image is 5–20MB. An unoptimized PNG export from Figma might be 2–4MB. These file sizes are catastrophic for page speed and will immediately fail LCP.
Target file sizes by image type:
Free compression tools:
- TinyPNG / TinyJPG — paste in, compress, download. Free for up to 20 images/day
- Squoosh — adjust quality slider visually until you hit target size without visible quality loss
- ShortPixel / Imagify / Smush — WordPress plugins that compress automatically on upload
Quality vs compression balance: Use “lossy” compression (WebP quality 75–85) for photos — invisible quality reduction, large file size savings. Use “lossless” for images with text overlays or sharp graphics where compression artifacts are visible.
Step 3 — Write Descriptive Alt Text
Write Meaningful Alt Text for Every Image
High SEO ImpactAlt text serves three purposes: it helps Google understand what the image shows (indexing it in Image Search), it contributes to the page’s topical relevance (relevance signal), and it provides a text alternative for screen readers (accessibility). Missing alt text means Google ignores the image for indexing and ranking purposes.
Alt text examples — good vs bad:
alt=”image”
alt=”photo”
alt=”IMG_4892″
alt=”SEO tools SEO tools free SEO”
alt=”Google Search Console coverage report with indexed pages”
alt=”Website speed test results showing Core Web Vitals scores”
Alt text rules:
- Describe what the image actually shows — be specific
- Include your target keyword where it fits naturally — don’t force it
- Keep under 125 characters (screen readers truncate longer alt text)
- Use
alt=""(empty) for purely decorative images — tells screen readers to skip it - Never stuff multiple keywords into alt text — one natural mention maximum
Step 4 — Use SEO-Friendly File Names
Rename Image Files Before Uploading
Medium ImpactImage file names are a minor but real SEO signal — they tell Google what the image contains before it’s even analyzed visually. File names also appear in the image URL, which can rank in Google Image Search. A descriptive file name gives you an extra keyword placement at no cost.
- Good:
free-seo-audit-tool-dashboard.webp - Bad:
IMG_4891.jpg,screenshot001.png,image-2.webp - Use hyphens between words (not underscores — Google treats underscores as word joiners)
- Keep file names under 5 words — don’t over-stuff
- Include your primary keyword for the page where relevant and natural
- All lowercase, no spaces
For existing images: Renaming already-uploaded images changes their URL. Only rename images that aren’t already indexed or linked from external sites. For indexed images, a rename without a 301 redirect will break the image URL in Google’s index.
Step 5 — Always Set Width and Height Attributes
Add Explicit Width & Height to Prevent CLS
Critical for Core Web VitalsThis is the #1 cause of CLS (Cumulative Layout Shift) on most websites. When an image doesn’t have explicit width and height attributes in its HTML, the browser doesn’t know how much space to reserve before the image loads. It renders the text content first, then the image appears and pushes everything down — causing the entire page to jump. This is exactly what CLS measures.
Correct implementation:
<img src="hero.webp" width="1200" height="630" alt="SEO audit tool" loading="lazy">
- Always include both
widthandheightattributes — not just one - Values should match the image’s actual pixel dimensions
- You can still size images differently with CSS — the HTML attributes are just for space reservation
- In WordPress: images inserted via the Media Library get width/height automatically in WordPress 5.5+
- Check older content — images from before WordPress 5.5 may lack these attributes
Step 6 — Implement Lazy Loading
Add loading=”lazy” to Below-the-Fold Images
High Impact on LCP & SpeedLazy loading defers loading images until the user scrolls close to them — instead of loading every image on the page upfront, the browser only loads images the user is about to see. This dramatically reduces the initial page load time and directly improves your LCP score for the above-the-fold content.
Implementation:
<img src="content-image.webp" width="800" height="400" alt="..." loading="lazy">
- Add
loading="lazy"to all images below the fold (not visible on initial load) - Never add
loading="lazy"to your LCP image (hero/banner) — this delays it and worsens LCP - Add
fetchpriority="high"to your LCP image specifically to prioritize its loading - Supported natively in all modern browsers — no JavaScript library needed
- In WordPress: lazy loading is added automatically to images since WordPress 5.5
LCP image rule: Your first visible large image (hero, banner) should have fetchpriority="high" and NO loading="lazy". All other images below it should have loading="lazy". These two attributes working together can improve LCP by 0.5–1 second on image-heavy pages.
Step 7 — Serve Images Through a CDN
Use a CDN for Faster Global Image Delivery
High Impact for Global AudiencesA CDN (Content Delivery Network) stores copies of your images on servers distributed around the world and serves each user the image from the server physically closest to them. A user in Tokyo gets your images from a Tokyo server, not your hosting server in New York — significantly reducing load time.
- Cloudflare (free plan) — the easiest free CDN. Set up in 15 minutes by changing nameservers. Automatically caches and serves images from 300+ global locations. Also adds automatic WebP conversion for supported browsers.
- BunnyCDN — very affordable ($1–5/month for most small sites), excellent performance
- Cloudinary (free tier) — 25GB storage, 25GB bandwidth free. Also handles on-the-fly image transformation, auto-WebP, and auto-compression
- Many WordPress hosts (Cloudways, WP Engine, Kinsta) include CDN in their plans
Check Your Image SEO Free
Use Seobility’s free Image & Mobile Optimization tool to audit all images on any URL instantly — no signup needed. The tool checks:
- Missing or empty alt text on all images
- Images without explicit width/height attributes
- Oversized images that are hurting your page speed
- Images not optimized for mobile viewports
- Missing lazy loading attributes
Run it on your most important pages first — homepage, top landing pages, most visited blog posts. These are the pages where image SEO improvements deliver the most ranking impact.
🖼️ Check Your Image SEO — Free Now
No signup. No account. Audit every image on any page for missing alt text, size issues, CLS problems, and mobile optimization — instant results.