How to Optimize Images for SEO (Complete Guide)

Images make up roughly 50% of a typical web page's total weight. Get image optimization wrong, and you tank your Core Web Vitals, frustrate visitors, and hand rankings to competitors who got it right. This guide walks through exactly how to optimize images for SEO — from choosing the right format to writing alt text that actually helps you rank.

Every step here is actionable. No theory without application.

Why Image SEO Matters

Three reasons image optimization deserves serious attention:

Page speed directly affects rankings. Google's Core Web Vitals — specifically Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) — are ranking signals. The largest element on most pages is an image. An unoptimized hero image that takes 4 seconds to load pushes your LCP past Google's 2.5-second threshold and kills your ranking potential. CLS suffers too when images load without defined dimensions, shoving content around as the page renders.

Google Image Search is massive. Image results account for roughly 20% of all Google searches. Properly optimized images show up in image packs, image search results, and sometimes in featured snippets. That is free traffic you are leaving on the table if your images are unnamed, undescribed, and oversized.

User experience compounds the effect. Fast-loading, sharp, properly sized images keep visitors on the page longer. Longer dwell time, lower bounce rate, more pages per session — all behavioral signals that reinforce rankings. Slow images do the opposite.

Image SEO Checklist

Seven steps, in priority order. Nail these and your images are working for your rankings instead of against them.

1. Choose the Right Format

Format choice is the single biggest lever for file size. Pick wrong and no amount of compression saves you.

• JPEG — Best for photographs and complex images with gradients. Lossy compression keeps file sizes small.
• PNG — Best for graphics, logos, screenshots, and anything requiring transparency. Lossless compression preserves every pixel.
• WebP — Best for almost everything on the modern web. 25-35% smaller than JPEG at equivalent quality, supports both lossy and lossless compression, and handles transparency. Browser support is above 97% globally.
• AVIF — The next generation. 30-50% smaller than WebP in many cases, but encoding is slower and browser support sits around 92%.

The practical recommendation: serve WebP as your default format with JPEG/PNG fallbacks for the small slice of browsers that need them. Use AVIF if your build pipeline supports it and you can tolerate slower encoding. For a deeper breakdown, see our comparison of the best image formats for web.

2. Compress Appropriately

Uncompressed images are the most common page speed killer. The target depends on the image type:

• Photos: 75-85% quality is the sweet spot. Below 75%, JPEG artifacts become visible. Above 85%, file sizes balloon with minimal perceptual improvement.
• Graphics and screenshots: Use lossless compression. PNG optimization tools strip unnecessary metadata and reduce file size without touching pixel data.
• WebP: Start at quality 80 for photos. WebP's compression algorithm handles low quality settings better than JPEG, so you can often push to 75 without visible degradation.

A 2MB hero image compressed to 150KB at quality 80 looks identical to the human eye but loads 13x faster. That is the difference between passing and failing LCP.

You can compress images in bulk with Pixotter — everything processes client-side, so your files never leave your browser.

3. Use Descriptive File Names

Search engines read file names. IMG_4832.jpg tells Google nothing. red-leather-wallet-front-view.jpg tells Google exactly what the image contains.

Rules for file names:

• Use hyphens between words (not underscores — Google treats hyphens as word separators)
• Be specific and descriptive
• Include your target keyword where it fits naturally
• Keep it under 5-6 words
• Use lowercase only

Good: compress-png-before-after.webp Bad: Screenshot 2026-03-15 at 10.42.17 AM.png

Rename files before uploading. Retroactively renaming files on a live site means changing URLs, setting up redirects, and risking broken image links.

4. Write Good Alt Text

Alt text serves three purposes: accessibility (screen readers read it aloud), SEO (search engines use it to understand image content), and fallback display (shown when images fail to load).

Write alt text that describes the image accurately and concisely. Include your keyword when it fits naturally — do not force it. More on this in the alt text section below.

5. Implement Lazy Loading

Lazy loading defers loading of off-screen images until the user scrolls near them. This directly improves LCP by prioritizing above-the-fold content.

<img src="product-photo.webp" alt="Red leather wallet" loading="lazy">

One critical rule: never lazy-load your LCP image. The hero image or largest above-the-fold image should load immediately. Apply loading="lazy" only to images below the fold. Lazy-loading your LCP image actually hurts your score because it delays the largest paint.

For your LCP image, consider adding fetchpriority="high" to tell the browser to prioritize it:

<img src="hero-image.webp" alt="Product showcase" fetchpriority="high">

6. Use Responsive Images

Serving a 3000px-wide image to a 375px-wide phone screen wastes bandwidth and slows everything down. The srcset and sizes attributes let the browser pick the right resolution:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Product demonstration"
  width="1200"
  height="800"
  loading="lazy"
>

Always include width and height attributes. They let the browser reserve the correct space before the image loads, preventing CLS. You can resize images to exact dimensions with Pixotter before generating your responsive variants.

7. Add Structured Data

Structured data helps search engines understand your images in context. Two schemas matter most:

For product images, use ImageObject within your Product schema:

{
  "@type": "Product",
  "name": "Red Leather Wallet",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/images/red-leather-wallet.webp",
    "width": 1200,
    "height": 800,
    "caption": "Red leather wallet with card slots"
  }
}

For blog images, the Article schema with an image property is sufficient. Google uses this for rich results and image search attribution.

Structured data does not guarantee rich results, but it removes ambiguity about what your images represent. Sites with proper schema markup consistently outperform those without in image search visibility.

File Format Comparison for SEO

WebP hits the best balance of file size, quality, and compatibility for SEO purposes. AVIF wins on compression but the slower encoding and lower browser support make it a secondary choice for now. For the full technical comparison, read PNG vs WebP and WebP vs AVIF.

Image Compression for SEO with Pixotter

Pixotter handles the compression and conversion workflow in one step. Here is the batch workflow for optimizing a set of blog images:

1. Drop your images into Pixotter — drag and drop works for individual files or entire folders
2. Set quality target — 80% is a strong default for photos; bump to 85% if you notice artifacts
3. Convert to WebP — select WebP as your output format to capture the 25-35% size reduction over JPEG
4. Review results — Pixotter shows the original and compressed sizes side-by-side
5. Download — all files processed client-side, nothing uploaded to any server

Typical results for blog images:

Those savings translate directly to faster page loads, better LCP scores, and stronger rankings. If you need to hit specific file size targets — say, under 100 KB for mobile — check out our guide on how to reduce image size.

Everything runs in your browser via WebAssembly. Your images never touch a server, which matters if you work with client photos or sensitive product images before launch.

Alt Text Best Practices with Examples

Alt text is deceptively simple — describe what is in the image. Yet most sites either skip it entirely or stuff it with keywords until it reads like spam.

Good vs. bad alt text:

Guidelines that work:

• Be specific. "Dog" is less useful than "Golden retriever puppy sitting on a red couch." Specificity helps both screen readers and search engines.
• Include your keyword once, naturally. If the image genuinely relates to your target keyword, work it in. If it does not relate, do not force it.
• Keep it under 125 characters. Screen readers cut off alt text at roughly this length. Say what matters first.
• Use empty alt="" for decorative images. Background patterns, spacers, and purely aesthetic elements should have empty alt attributes so screen readers skip them. Omitting the alt attribute entirely is an accessibility violation — use alt="" explicitly.

The right image sizes for different contexts — social sharing, blog headers, product galleries — also affect how images appear in search results. Our image size guide for websites covers the specific dimensions that matter.

FAQ

Does image file size affect SEO rankings?

Yes. Image file size directly impacts page load speed, which is a Google ranking factor through Core Web Vitals. Large, uncompressed images are the most common cause of poor LCP scores. Compress images to the smallest file size that maintains acceptable visual quality — typically quality 75-85% for JPEG and WebP.

What is the best image format for SEO?

WebP. It delivers 25-35% smaller file sizes than JPEG at equivalent quality, supports transparency, and has 97%+ browser support. Use JPEG as a fallback for older browsers and PNG only when you need lossless compression for graphics or screenshots. Convert your images to WebP with Pixotter.

How do I write alt text for SEO?

Describe the image accurately and concisely. Include your target keyword if it fits naturally — do not stuff multiple keywords. Keep alt text under 125 characters. Use empty alt="" for decorative images. Good alt text serves accessibility first and SEO second; the two goals align when done correctly.

Should I lazy load all images?

No. Lazy load images below the fold only. Your LCP image — typically the hero image or largest visible element — must load immediately. Lazy-loading the LCP image delays rendering and hurts your Core Web Vitals score. Use loading="lazy" on below-fold images and fetchpriority="high" on your LCP image.

Does Google index WebP images?

Yes. Google fully supports WebP indexing and has since 2010. WebP images appear in Google Image Search results alongside JPEG and PNG. There is no SEO disadvantage to using WebP — the smaller file sizes are a net positive for rankings through improved page speed.

How many images should a blog post have?

There is no magic number. Use images when they add value — screenshots that illustrate a process, charts that visualize data, diagrams that explain architecture. A 2,000-word tutorial might need 5-8 images. A comparison article might need 2-3 plus a table. Never add images purely for decoration or to hit some imaginary image-per-300-words ratio. Every image should earn its bandwidth.