Image SEO: Alt Text, File Names, Compression, and More

Images are simultaneously an SEO opportunity and a common SEO liability.

Poorly optimized images slow pages down and waste their potential as search signals. Well-optimized images contribute to page speed, accessibility, relevance, and Google Image Search visibility.

This guide covers every image SEO factor that matters in 2026.

File Names: The First Signal

When you upload an image, its descriptive file name is one clue search engines can use to understand what the image shows.

Bad:

• IMG_4829.jpg
• image001.png
• screenshot_20240315.jpg

Good:

• web-design-services-bangkok.jpg
• technical-seo-audit-checklist.jpg
• astro-website-speed-comparison.jpg

Best practices:

• Use descriptive file names that reflect the image content
• Include a relevant keyword where natural (do not force it)
• Use hyphens to separate words (not underscores, not spaces)
• Keep file names concise: 3-6 words is usually enough
• Set file names before uploading: renaming after upload requires updating the src attribute

Alt Text: Describe the Purpose of the Image

Alt text is an HTML attribute that describes what an image shows. Search engines read it. Screen readers announce it to visually impaired users.

HTML:

<img src="technical-seo-audit.jpg" alt="Technical SEO audit checklist for small business websites" />

Best practices:

• Describe what the image actually shows: be specific
• Include a relevant keyword naturally, where it genuinely describes the image
• Keep it concise: 5-15 words for most images
• Avoid starting with “image of” or “picture of”: search engines already know it is an image
• For decorative images (design elements, dividers), use empty alt text: alt=""

What to avoid:

• Keyword stuffing: alt="SEO services SEO agency best SEO cheap SEO Bangkok"
• Generic descriptions: alt="photo"
• Missing alt text entirely (common on sites with many images)
• Identical alt text on multiple different images

Check your alt text: Our Image SEO Checker audits every image on a page and flags missing or problematic alt text.

Image Formats: Compare Quality, Size and Purpose

Not all image formats are equal for SEO. Format affects file size, which directly impacts page speed.

Modern Astro sites can generate optimized, responsive images through astro:assets. The <Image> component defaults to WebP, while <Picture> can offer AVIF with a WebP fallback. Our Astro Image vs Picture comparison explains when each component is appropriate and shares results from 25 projects. The output still depends on source files and configuration; compare measured assets rather than assuming a framework guarantees speed.

Compression: Reduce File Size Without Losing Quality

Large image files are a common page-speed problem. The useful saving depends on the source, dimensions, visual complexity, format, and quality setting, so compare representative outputs rather than relying on a universal percentage.

Illustrative starting budgets, to adapt to visual quality and display size:

• Hero images: under 200KB
• Blog post images: under 150KB
• Small thumbnails/icons: under 30KB
• Full-page background images: under 400KB

Free compression tools:

• Squoosh.app: browser-based, excellent WebP conversion
• TinyPNG / TinyJPG: fast, simple compression
• ImageOptim (Mac): batch compression tool

In Astro: imported src/ assets can be transformed at build time through <Image> or <Picture>. You still need appropriate widths, sizes, quality, and loading priority; files served directly from public/ are not processed by Astro.

Image Dimensions: Right Size, No Oversizing

Loading a 4000x3000px image and displaying it at 800x600px wastes bandwidth and slows load time. The browser downloads the full-size image regardless of the display size.

Best practices:

• Use images at or close to their display dimensions
• Use srcset and sizes attributes for responsive images (serve different sizes to different devices)
• Never load a 3000px image to display at 300px: resize it first
• Always specify width and height attributes on <img> tags to prevent Cumulative Layout Shift (CLS)

Why CLS matters: If an image loads without dimensions set, the browser does not reserve space for it. When it loads, the page jumps, causing a CLS penalty and a bad user experience.

Lazy Loading: Defer Off-Screen Images

Images below the fold do not need to load when the page first opens. Lazy loading defers them until the user scrolls near them.

HTML:

<img src="image.webp" alt="Description" loading="lazy" width="800" height="450" />

Important: Do NOT lazy load images that are visible above the fold when the page loads. Lazy loading your hero image will hurt your LCP (Largest Contentful Paint) score significantly.

General rule:

• First image on the page (hero, featured image): loading="eager" or no loading attribute
• All images below the fold: loading="lazy"

Image Sitemaps

For sites where images are a significant part of the content (photography, e-commerce, news), an image sitemap helps Google discover and index images that might otherwise be missed.

Include image data in your regular sitemap using the image extension:

<url>
  <loc>https://example.com/page/</loc>
  <image:image>
    <image:loc>https://example.com/images/example.jpg</image:loc>
  </image:image>
</url>

Check your sitemap with our Sitemap Checker.

Structured Data for Images

For articles and blog posts, Article schema should include the image property pointing to your featured image. This helps Google understand the primary image associated with the article:

{
  "@type": "Article",
  "image": {
    "@type": "ImageObject",
    "url": "https://webaloha.co/images/blog-image-seo.jpg",
    "width": 1200,
    "height": 630
  }
}

Including image dimensions in the schema helps Google understand the image’s aspect ratio without having to download it.

Google Image Search Optimization

Images with strong alt text, descriptive file names, and relevant surrounding content can rank in Google Image Search, a secondary traffic channel worth claiming.

Additional tips for image search:

• Place images near relevant text content (Google uses surrounding text as context)
• Use high-quality, original images rather than stock photos (more likely to be featured)
• Add image captions where relevant: they provide additional keyword context
• Ensure the page the image lives on is properly indexed

Quick Image SEO Checklist

For every new piece of content:

• Descriptive file names set before upload (hyphens, keywords where natural)
• Alt text on every image (specific, descriptive, not stuffed)
• WebP format used where possible
• Images compressed below target file sizes
• Hero/above-fold image has loading="eager" or no loading attribute
• Below-fold images have loading="lazy"
• width and height attributes set on all images
• Featured image included in Article schema with dimensions

Run an audit: Image SEO Checker checks all images on any page instantly. To fix what it flags, our Image Compressor shrinks files and offers compression and WebP conversion; inspect the result at the intended display size.

Image SEO is part of the full on-page SEO checklist. For a complete picture of your site’s SEO health, the technical SEO audit guide covers all the infrastructure factors. Our SEO Services include image optimization as part of every engagement.

For format, discovery and metadata requirements, use Google’s image guidance. For choosing empty versus descriptive alternatives, use the W3C image decision tree. A decorative image and an image containing essential instructions need different treatment.