A Complete Guide to Image SEO: Alt Text, File Names, and Compression

Images account for over 60% of web page weight on average, yet most websites treat image optimization as an afterthought. In 2026, with Google's emphasis on Core Web Vitals and visual search growing rapidly, image SEO is no longer optional - it's a competitive advantage.

This guide covers everything: from writing perfect alt text and choosing file names, to compression techniques, modern formats like WebP and AVIF, lazy loading, and structured data. Whether you're a blogger, e-commerce owner, or web developer, you'll find actionable steps to improve your image SEO today.

Why Image SEO Matters in 2026

Consider these numbers:

Optimized images improve three things simultaneously:

1. Page speed - Smaller images = faster load = better Core Web Vitals (LCP, CLS)
2. Discoverability - Proper alt text and file names help Google index your images
3. Accessibility - Screen readers depend on alt text to describe images to visually impaired users

Alt Text: The Foundation of Image SEO

Alt text (alternative text) is the text description of an image that appears when the image can't load and is read aloud by screen readers. It's also the primary signal Google uses to understand image content.

How to Write Perfect Alt Text

Alt Text Best Practices

• Be specific: Describe what's in the image, not the page topic
• Keep it under 125 characters: Screen readers may truncate longer text
• Include relevant keywords naturally: Don't force keywords that don't describe the image
• Don't start with "image of" or "picture of": Screen readers already announce it as an image
• Use empty alt for decorative images: alt="" for icons, dividers, and decorative graphics
• Context matters: The same image might need different alt text on different pages

Image File Names That Rank

Google uses file names as a ranking signal for image search. A descriptive file name tells search engines what the image is about before they even analyze the image content.

File Name Rules

• Use hyphens (-) to separate words, not underscores or spaces
• Use lowercase letters only
• Include the primary keyword for the image's topic
• Keep names concise but descriptive (3-8 words)
• Match the file name to the image content, not the page topic

Choosing the Right Image Format

Image Compression Without Quality Loss

Compression is the single most impactful image SEO technique. A well-compressed image can be 70% smaller with virtually no visible quality difference.

Optimal Quality Settings by Format

Target File Sizes

• Thumbnail (100-300px): Under 20 KB
• Content image (600-800px): Under 100 KB
• Hero/banner (1200-1920px): Under 200 KB (ideally under 150 KB)
• Full-width background: Under 300 KB
• E-commerce product: Under 150 KB per image

Image Dimensions & Responsive Images

Serving correctly-sized images prevents two problems: wasted bandwidth (serving 4000px images on a 400px container) and layout shifts (CLS issues when images load without defined dimensions).

Essential Rules

1. Always specify width and height in HTML: <img width="800" height="600">
2. Use srcset for responsive images at multiple breakpoints
3. Don't upload 4000×3000 images for a 800px-wide content area - resize them first
4. Use CSS aspect-ratio to prevent cumulative layout shift

Responsive Image Code Example

<picture>
  <source srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
          sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
          type="image/webp">
  <img src="image-800.jpg"
       alt="descriptive alt text here"
       width="800" height="600"
       loading="lazy"
       decoding="async">
</picture>

Lazy Loading & Core Web Vitals

Lazy loading defers loading of off-screen images until the user scrolls near them. This dramatically improves Largest Contentful Paint (LCP) - one of the three Core Web Vitals that directly impact Google rankings.

Implementation

<!-- Native lazy loading (recommended) -->
<img src="photo.webp" alt="description" loading="lazy" decoding="async">

<!-- DON'T lazy load above-the-fold images -->
<img src="hero.webp" alt="hero image" loading="eager" fetchpriority="high">

Structured Data for Images

Add schema.org structured data to help Google understand image context and potentially earn rich results:

ImageObject Schema

{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/photo.webp",
  "name": "Golden retriever puppy playing in park",
  "description": "A happy golden retriever puppy catching a ball in Central Park",
  "width": 1200,
  "height": 800,
  "encodingFormat": "image/webp",
  "author": {"@type": "Organization", "name": "Your Site"}
}

Product Image Schema (E-commerce)

For product pages, ensure your Product schema includes the image property with multiple angles - Google uses these for Shopping results and visual matches.

Open Graph & Social Sharing Images

When someone shares your page on social media, the Open Graph image determines how it looks. A compelling OG image dramatically increases click-through rates from social platforms.

OG Image Specifications

Required Meta Tags

<meta property="og:image" content="https://example.com/og-image.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive text for the OG image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/twitter-image.webp">

Image Sitemaps

Image sitemaps help Google discover images that might not be found through regular crawling (CSS background images, JavaScript-loaded images, lazy-loaded images).

<url>
  <loc>https://example.com/my-page</loc>
  <image:image>
    <image:loc>https://example.com/image.webp</image:loc>
    <image:title>Descriptive image title</image:title>
    <image:caption>Longer description of the image</image:caption>
  </image:image>
</url>

You can include up to 1,000 image entries per URL in your sitemap. For most sites, Google discovers images through regular crawling - image sitemaps are most valuable for large image-heavy sites or when images are loaded dynamically.

Image SEO Checklist

Frequently Asked Questions