How to Optimize Images for SEO and Speed
Image optimization is one of the most overlooked website fixes — and one of the most impactful. Unoptimized images are the #1 cause of slow websites. Missing alt text hurts both your SEO and accessibility. This guide covers everything you need to know about optimizing images: adding alt text, compressing file sizes, using modern formats like WebP, and enabling lazy loading.
Why Image Optimization Matters
Images typically make up 50-80% of a web page's total size. A single uncompressed photo from a smartphone can be 5MB — larger than most entire web pages should be. When your images aren't optimized, your site loads slowly, visitors leave, and Google ranks you lower.
Beyond speed, images without alt text are invisible to search engines and inaccessible to the 2.2 billion people globally with visual impairments who use screen readers.
FreeSiteAudit checks for:
- ✗Missing alt text on images
- ✗Images over 500KB (significantly slowing page load)
- ✗Using outdated formats (BMP, uncompressed TIFF) instead of modern WebP
- ✗Broken image URLs returning 404 errors
How to Check If You Have Image Issues
Right-click any image on your site and select "Inspect" to see if it has an alt attribute. Check the image file size in the Network tab of your browser's developer tools. Or simply run a free FreeSiteAudit to get a complete report of all image issues across your site.
Step-by-Step: Optimizing Your Images
Add Alt Text to Every Image
Alt text describes what's in an image. It should be specific, natural, and include relevant keywords where appropriate — but never stuffed with keywords.
Bad: alt="" or alt="image" or alt="plumber plumbing plumber service"
Good: alt="Licensed plumber repairing kitchen sink drain in Austin home"
WordPress: Click on any image in your Media Library. Fill in the "Alt Text" field on the right.
Wix: Click on the image → Settings gear → "What's in the image?" field.
HTML: Add the alt attribute: <img src="photo.jpg" alt="Your description here">
Compress Images Before Uploading
Compression reduces file size without visible quality loss. A 3MB photo can be compressed to 200KB and look identical on screen.
Free tools: TinyPNG (web-based, drag and drop), ImageOptim (Mac app), Squoosh (web-based, advanced options)
WordPress plugin: ShortPixel or Imagify — automatically compresses images on upload
Target sizes: Under 200KB for regular images, under 300KB for hero/banner images
Convert to WebP Format
WebP is Google's modern image format. It produces images 30% smaller than JPEG at the same visual quality, and is supported by all modern browsers.
Convert online: Upload to Squoosh, select WebP as output format
WordPress: ShortPixel and Imagify can automatically convert to WebP
Wix/Squarespace: These platforms automatically serve optimized formats
Enable Lazy Loading
Lazy loading defers images below the fold — they only load when users scroll to them. This speeds up the initial page load significantly.
Important: Don't lazy-load images above the fold (hero images, logos). These should load immediately.
Find and Fix Broken Images
Broken images show a blank box or broken icon, making your site look unprofessional. They often happen when images are deleted, renamed, or moved without updating the references.
Find them: Run a FreeSiteAudit or use a broken link checker to find 404 image URLs.
Fix them: Re-upload the image and update the src URL, or remove the image tag entirely if the image is no longer needed.
Before & After
Before
- 12 images, no alt text
- Total image weight: 8.2MB
- JPEG format, uncompressed
- All images load at once
- 2 broken image references
After
- 12 images, all with descriptive alt text
- Total image weight: 890KB (89% smaller)
- WebP format, compressed
- Below-fold images lazy loaded
- All image URLs working
Common Mistakes to Avoid
Keyword-stuffing alt text
"plumber austin plumbing service drain cleaning austin tx plumber" — Google can detect this. Write natural descriptions that include keywords organically.
Uploading images at full camera resolution
A 12-megapixel phone photo is 4000x3000 pixels — far more than any website needs. Resize images to their display size (typically 800-1200px wide) before uploading.
Using the same alt text for every image
Each image should have unique, specific alt text. Using "company photo" for every image doesn't help search engines or screen reader users.
Frequently Asked Questions
What is alt text and why does it matter?
Alt text describes what's in an image. Screen readers read it aloud for visually impaired users, search engines use it to understand image content, and browsers display it when images fail to load. It's essential for both accessibility and SEO.
What image format should I use?
WebP for photos and complex images (30% smaller than JPEG). SVG for logos, icons, and simple graphics. PNG only when you need transparency and WebP isn't supported.
How big should website images be?
Most images should be under 200KB. Hero images can go up to 300KB. Total page image weight should stay under 1MB. Images wider than 1920px are unnecessary for most websites.
Check your images for free
Run a free audit to find missing alt text, oversized images, and broken image URLs across your entire site.
Run Free Audit