The Ultimate Checklist for Image Optimization: Better Rankings & Faster Speed
Large, unoptimized images are the #1 reason websites load slowly. Learn how to compress, tag, and lazy-load your images to boost Core Web Vitals, improve accessibility, and rank higher on Google.
Key Takeaways
- Speed is Ranking: Optimizing images is the fastest way to improve Core Web Vitals (LCP/CLS).
- Modern Formats: Use WebP or AVIF to reduce file size by up to 30-50% compared to JPEG.
- Accessibility: Always use descriptive Alt Text for screen readers and image search rankings.
- Dimensions Matter: Set width and height attributes to prevent Cumulative Layout Shift (CLS).
Why Image Optimization Is an SEO Priority
Images make up over 50% of the total page weight on most websites. If you're wondering why your pages load slowly or why your Core Web Vitals scores are in the red, there's a strong chance your images are the culprit.
Google uses page speed as a ranking factorβand since images are the heaviest assets on most pages, optimizing them is one of the fastest ways to improve both user experience and search rankings.
This guide covers every aspect of image SEO: from file compression and modern formats to alt text, dimensions, lazy loading, and more. Follow this checklist page by page alongside your regular SEO audits to keep your site fast and accessible.
How Large Images Kill Your Rankings
When a user visits your page, the browser must download every resource before rendering the content. Oversized images cause three critical problems:
- Slow Largest Contentful Paint (LCP): If your hero image is 3MB, the browser stalls while downloading it. Google's target is LCP under 2.5 seconds.
- High Bounce Rate: 53% of mobile visitors leave a page that takes over 3 seconds to load. Heavy images are the main contributor.
- Wasted Bandwidth: Users on mobile data pay for every byte. Serving a 4000Γ3000 image to a 400px-wide phone screen is wasteful.
Reference: web.dev β Largest Contentful Paint (LCP)
Step 1: Compress Images Without Losing Quality
Image compression reduces file size while keeping visual quality acceptable. There are two types:
Lossy vs. Lossless Compression
- Lossy: Removes some image data to dramatically reduce size. A JPEG compressed at 80% quality is often visually identical to 100% but 60-70% smaller.
- Lossless: Reduces file size without any data loss. Best for logos, icons, and graphics where every pixel matters.
π Recommended Tools
- TinyPNG / TinyJPG: Free online compression for PNG and JPEG files
- Squoosh (by Google): Browser-based tool with side-by-side comparison
- ImageOptim: Desktop app for batch compression
- ShortPixel / Imagify: WordPress plugins for automated optimization
Step 2: Use Modern Image Formats (WebP & AVIF)
Older formats like JPEG and PNG are reliable, but modern formats deliver the same quality at significantly smaller file sizes.
Format Comparison
| Format | Best For | Size Savings | Browser Support |
|---|---|---|---|
| JPEG | Photos | Baseline | Universal |
| PNG | Transparency | Baseline | Universal |
| WebP | Photos & graphics | 25-35% smaller | 95%+ browsers |
| AVIF | Photos & graphics | 50%+ smaller | ~85% browsers |
Use the <picture> element to serve modern formats with a JPEG/PNG fallback:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Descriptive alt text">
</picture>
Step 3: Always Add Descriptive Alt Text
Alt text serves two critical purposes: it tells Google what the image is about, and it provides a text alternative for visually impaired users using screen readers.
π« Bad Alt Text Examples
alt=""β Empty. Google ignores the image entirely.alt="image"β Generic. Provides zero context.alt="photo photo seo seo seo keyword"β Keyword stuffing. Google may penalize you.
β Good Alt Text Examples
alt="SEO audit results showing a score of 92 out of 100"alt="Bar chart comparing page load times before and after image compression"alt="Screenshot of the FastSite Check dashboard with broken link warnings"
Our free SEO audit tool scans every image on your page and flags those missing alt text. For a general guide on content optimization, see our On-Page SEO Checklist.
Reference: Google Images best practices
Step 4: Set Width & Height Attributes (Prevent Layout Shift)
When the browser loads a page, it needs to know how much space each image will occupy
before it downloads. Without explicit width and height
attributes, the page layout jumps around as images loadβa problem called Cumulative Layout Shift
(CLS).
How CLS Hurts Your Rankings
CLS is one of Google's three Core Web Vitals. A CLS score above 0.1 is considered "needs improvement." Every time an image loads without reserved space, the text below it shifts downβfrustrating users and tanking your CLS score.
The fix is simple: Always include width and height in your <img>
tags:
<!-- β
Good: dimensions set, browser reserves space -->
<img src="hero.webp" alt="Hero banner" width="1200" height="600">
<!-- β Bad: no dimensions, causes layout shift -->
<img src="hero.webp" alt="Hero banner">
FastSite Check flags every image missing width and height attributes in its
audit report, so you can fix CLS issues quickly.
Reference: web.dev β Cumulative Layout Shift (CLS)
Step 5: Implement Lazy Loading
Lazy loading defers the download of off-screen images until the user scrolls near them. This dramatically improves initial page load time, especially for long pages with many images.
How to Implement Lazy Loading
Modern browsers support native lazy loading with a single attribute:
<img src="photo.webp" alt="Description" loading="lazy" width="800" height="400">
β οΈ Important: Don't Lazy-Load Above-the-Fold Images
Your hero image and any images visible in the initial viewport should load immediately. Lazy-loading these images actually hurts LCP because the browser delays downloading the most important visual element.
- Above the fold: Use
loading="eager"(or omit the attribute entirely) - Below the fold: Use
loading="lazy"
Our audit tool counts how many images on your page are not lazy-loaded and flags it as a warning if the count is high.
Step 6: Optimize Image File Names
File names are a minor but real ranking signal. Google reads the file name to understand image context.
- π«
IMG_20260311_001.jpgβ Tells Google nothing - π«
photo.pngβ Too generic - β
seo-audit-dashboard-results.webpβ Descriptive, uses hyphens - β
core-web-vitals-score-comparison.avifβ Keyword-rich, clear
Use lowercase, hyphen-separated words. Avoid underscores, spaces, or random characters in image file names.
Step 7: Serve Responsive Images
Don't serve a 2400px-wide image to a phone with a 400px screen. Use the srcset attribute to
let the browser choose the right size:
<img
src="photo-800.webp"
srcset="photo-400.webp 400w,
photo-800.webp 800w,
photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Responsive image example"
width="1200" height="600"
loading="lazy"
>
This reduces bandwidth usage on mobile devices and improves load times across all screen sizes.
Image Optimization Checklist β Quick Reference
- β Compress all images (target: under 200KB for photos)
- β Use WebP or AVIF with JPEG/PNG fallback
- β Add descriptive alt text to every image
- β Set width and height attributes to prevent CLS
- β Lazy-load below-the-fold images
- β Keep above-the-fold images eager-loaded
- β Use descriptive, hyphenated file names
- β Serve responsive images with srcset
- β Run a free SEO audit to catch missing attributes
How FastSite Check Audits Your Images
Our free SEO audit tool checks every image on your pages and reports:
- β Images missing alt text
- β Images missing width/height dimensions (CLS risk)
- β Images not lazy-loaded
- β Total image count per page
- β Detailed image breakdown with URLs and attributes
Combine image optimization with our Technical SEO Checklist to build a bulletproof performance foundation.
Explore Our Complete SEO Series:
- π How to Use Fast Site Check
- π Technical SEO Checklist Guide
- π On-Page SEO Checklist Guide
- π Off-Page SEO & Link Building Guide
- π Complete SEO Audit Checklist
- π 7 Technical SEO Errors Killing Your Rankings
- π Image Optimization Checklist
- π Bulk SEO Checker & Sitemap Guide
- π SEO Audit vs. SEO Analysis
- π Why Your Site Is Not Showing on Google
Together, these guides create a complete system for scaling your organic traffic.
Are Your Images Slowing You Down?
Run a free audit now to find every unoptimized image on your siteβmissing alt text, missing dimensions, and lazy-loading gaps.