Images play a crucial role in SEO. They help you rank in image search, improve user engagement, and directly impact your Core Web Vitals scores. Yet many website owners neglect image optimization, leaving significant traffic on the table.

This comprehensive guide covers everything you need to know about optimizing images for search engines in 2026.

Why Image SEO Matters

Before diving into techniques, let's understand why image optimization is worth your time:

Image Search Traffic

Google Images accounts for approximately 22% of all web searches. Optimized images can drive significant traffic to your site through image search results.

Core Web Vitals Impact

Images often cause the biggest performance issues on websites. Per Google's Core Web Vitals documentation, unoptimized images hurt your:

Largest Contentful Paint (LCP): Large images delay page load — and the LCP element is most often an image.
Cumulative Layout Shift (CLS): Images without explicit width/height cause layout shifts. See web.dev's guidance on image dimensions.
Interaction to Next Paint (INP): Heavy images and decoding work block the main thread and delay interaction response.

User Engagement

Pages with relevant, high-quality images have:

94% more views than text-only pages
Higher time on page
Lower bounce rates
Better conversion rates

Step 1: Choose Descriptive File Names

Before uploading any image, rename it with a descriptive, keyword-rich file name.

Bad Examples

IMG_20260101_124536.jpg
screenshot-1.png
photo.webp

Good Examples

blue-running-shoes-nike-2026.jpg
how-to-resize-image-photoshop.png
chocolate-cake-recipe-finished.webp

Best Practices

Use lowercase letters
Separate words with hyphens (not underscores)
Include relevant keywords naturally
Be specific but concise (3-6 words)
Avoid keyword stuffing

Step 2: Write Effective Alt Text

Alt text (alternative text) describes what's in an image for screen readers and search engines.

Purpose of Alt Text

Accessibility: Screen readers read alt text to visually impaired users
SEO: Search engines use alt text to understand image content
Fallback: Displays when images fail to load

Writing Great Alt Text

Bad: alt="image" or alt="" Okay: alt="shoes" Good: alt="blue Nike running shoes on wooden floor" Great: alt="Nike Air Zoom Pegasus 39 in blue colorway, side profile view"

Alt Text Best Practices

Describe the image accurately and specifically
Include keywords naturally (don't stuff)
Keep it under 125 characters
Don't start with "image of" or "picture of"
Use empty alt for decorative images (alt="")

Step 3: Optimize File Size

Large image files slow down your website, hurting both user experience and SEO.

Target File Sizes

Hero images: Under 200KB
General content images: Under 100KB
Thumbnails: Under 30KB
Icons and logos: Under 10KB

Compression Techniques

Lossy Compression

Removes some image data to reduce file size. Best for photographs where slight quality loss isn't noticeable.

Lossless Compression

Reduces file size without any quality loss. Best for graphics, logos, and images that will be edited further.

Tools for Compression

Use our Image Compressor to reduce file sizes while maintaining quality. You can target specific file sizes like 100KB or 200KB. For a deeper walk-through of when to choose lossy vs lossless and how to spot compression artefacts before they ship, see our image compression guide.

Step 4: Choose the Right Format

Different image formats serve different purposes. Choose based on your content type. We compare the major formats — JPEG, PNG, WebP, AVIF — head-to-head with file-size tests in our image format comparison.

Format Selection Guide

| Content Type | Best Format | Why | |--------------|-------------|-----| | Photographs | WebP, AVIF | Best compression for photos | | Logos, Icons | SVG, PNG | Crisp edges, scalability | | Screenshots | PNG, WebP | Sharp text and UI elements | | Transparent images | WebP, PNG | Full transparency support |

Modern Format Strategy

Serve modern formats (WebP, AVIF) with fallbacks:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

Learn more in our complete format comparison guide.

Step 5: Specify Image Dimensions

Always include width and height attributes on your images to prevent layout shifts.

The CLS Problem

When a browser loads an image without dimensions, it doesn't know how much space to reserve. As the image loads, content shifts around—this is a Cumulative Layout Shift.

The Solution

<!-- Bad: No dimensions -->
<img src="photo.jpg" alt="Product photo">

<!-- Good: With dimensions -->
<img src="photo.jpg" alt="Product photo" width="800" height="600">

<!-- Also good: CSS aspect-ratio -->
<img src="photo.jpg" alt="Product photo" style="aspect-ratio: 4/3;">

Responsive Images

Use srcset for different screen sizes while maintaining aspect ratio:

<img 
  src="photo-800.jpg" 
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Product photo"
  width="1200"
  height="800"
>

Step 6: Implement Lazy Loading

Lazy loading defers loading of images until they're about to enter the viewport.

Native Lazy Loading

Modern browsers support native lazy loading:

<img src="photo.jpg" loading="lazy" alt="Description" width="800" height="600">

When to Use Lazy Loading

✅ Images below the fold
✅ Images in long-scrolling pages
✅ Thumbnail galleries
❌ Hero images (above the fold)
❌ LCP images (critical for first paint)

Step 7: Use a Content Delivery Network (CDN)

CDNs serve images from servers closest to your users, dramatically improving load times.

Benefits of Image CDNs

Faster load times globally
Automatic format conversion
On-the-fly resizing
Caching for repeated visitors

Popular Image CDNs

Cloudflare Images
Imgix
Cloudinary
ImageKit

Step 8: Create an Image Sitemap

Help search engines discover all your images by including them in your sitemap.

XML Sitemap Format

<url>
  <loc>https://example.com/page</loc>
  <image:image>
    <image:loc>https://example.com/images/photo.jpg</image:loc>
    <image:title>Product Photo</image:title>
    <image:caption>Blue Nike running shoes on display</image:caption>
  </image:image>
</url>

Step 9: Optimize for Mobile

Mobile optimization is critical since most image searches happen on mobile devices.

Mobile Image Best Practices

Use responsive images with appropriate sizes
Compress more aggressively for mobile
Test on actual devices
Consider using smaller images on mobile networks

Testing Tools

Google PageSpeed Insights
GTmetrix
WebPageTest
Lighthouse (Chrome DevTools)

Step 10: Add Structured Data

Structured data helps search engines understand your images in context.

Product Images

{
  "@type": "Product",
  "name": "Running Shoes",
  "image": [
    "https://example.com/photos/shoes-front.jpg",
    "https://example.com/photos/shoes-side.jpg"
  ]
}

Article Images

{
  "@type": "Article",
  "headline": "How to Choose Running Shoes",
  "image": "https://example.com/featured-image.jpg"
}

Common Image SEO Mistakes

Avoid these common errors:

1. Uploading Full-Resolution Images

Don't upload 4000×3000 pixel images when you only display them at 800×600. Resize first.

2. Using One Image Size for All Devices

Serve appropriately sized images for different screens using srcset.

3. Skipping Alt Text

Every meaningful image needs alt text. No exceptions.

4. Over-Optimizing

Don't stuff keywords into file names and alt text. Write naturally.

5. Ignoring Image Context

Surrounding text matters. Place images near relevant content.

Image SEO Checklist

Before publishing any page, verify:

[ ] Images have descriptive file names
[ ] All images have relevant alt text
[ ] File sizes are optimized (under 200KB for most)
[ ] Correct format chosen for content type
[ ] Width and height attributes specified
[ ] Lazy loading enabled for below-fold images
[ ] Images included in sitemap
[ ] Tested on mobile devices

Conclusion

Image SEO isn't just about ranking in image search—it's about improving your overall website performance and user experience. By following these optimization techniques, you'll see benefits in:

Higher search rankings (both web and image search)
Faster page load times
Better Core Web Vitals scores
Improved user engagement

Start by uploading your images to our free optimization tools to compress, resize, and convert them for the web.