How to Optimize Images for SEO: Complete 2026 Guide
Why Image Optimization Matters for SEO
Images account for 50% of total page weight on the average website. Unoptimized images slow down your site, increase bounce rates, and hurt your Google rankings. According to HTTP Archive, the median web page loads 2.2MB of image data. Reducing that by 60-80% through proper optimization can cut your page load time in half.
Google confirmed Core Web Vitals as a ranking signal, and Largest Contentful Paint (LCP) is often caused by a large, unoptimized hero image. Fix your images and you fix your LCP.
Step 1: Choose the Right Image Format
WebP is the best format for most web images. It provides 25-35% better compression than JPEG at equivalent quality. Google recommends WebP and all modern browsers support it.
AVIF offers even better compression than WebP (50% smaller files) but has slower browser adoption. Use AVIF as a progressive enhancement with WebP as fallback.
PNG is only necessary for images requiring transparency. SVG is ideal for logos, icons, and simple graphics.
Step 2: Compress Before Upload
Never upload uncompressed images. Use tools like Squoosh, TinyPNG, or ImageOptim to compress images before publishing. Target these file sizes: hero images under 200KB, thumbnails under 50KB, icons under 10KB.
Step 3: Resize to Display Size
Do not upload a 4000px wide image and display it at 800px. Resize images to the maximum display size they will actually be shown at.
Step 4: Write Descriptive Alt Text
Alt text helps Google understand what the image shows and improves accessibility. Describe the image content specifically.
Step 5: Implement Lazy Loading
Add loading="lazy" to images below the fold. This defers loading of off-screen images until users scroll to them. Do not lazy load your hero image.
Step 6: Use Responsive Images
Use the srcset attribute to serve different image sizes for different screen sizes.
Image Optimization Checklist
- Convert all images to WebP format
- Compress images to under 200KB for heroes, 50KB for thumbnails
- Resize to actual display dimensions
- Write descriptive, keyword-rich alt text
- Add loading="lazy" to below-the-fold images
- Use srcset for responsive image delivery
- Name files descriptively (not IMG_001.jpg)
Sources
Try Our Free Tools
Put what you learned into practice with these free SEO tools: