Image SEO: Alt Text, Compression, and Best Practices

Images account for an average of 50% of a web page's total weight, according to the HTTP Archive. Poorly optimized images slow down pages, hurt Core Web Vitals scores, and miss opportunities in Google Image Search, which drives 22.6% of all web searches according to SparkToro research. Image SEO encompasses alt text optimization, file compression, format selection, and structured data — each contributing to both performance and discoverability.

Alt Text: The Foundation of Image SEO

What Is Alt Text?

Alt text (alternative text) is an HTML attribute (alt="description") that describes an image's content and function. It serves three purposes: accessibility for screen reader users, context for search engines, and fallback text when images fail to load.

Writing Effective Alt Text

Good alt text follows these principles:

• Be descriptive and specific: "Golden retriever puppy playing fetch on a beach" is better than "dog" or "image."
• Include keywords naturally: If the image is relevant to your target keyword, include it. But describe the image accurately — do not force unrelated keywords into alt text.
• Keep it concise: Aim for 125 characters or fewer. Screen readers may truncate longer alt text.
• Avoid redundancy: Do not start with "image of" or "picture of" — screen readers already announce that the element is an image.
• Be contextual: The same image might need different alt text depending on the page's context. A photo of a laptop on a review page might be "MacBook Pro 14-inch M3 front view" while the same photo on a lifestyle blog might be "working remotely from a coffee shop."

Decorative Images

Purely decorative images (borders, spacers, design elements) should have empty alt attributes (alt=""), not missing alt attributes. An empty alt tells screen readers to skip the image, while a missing alt causes screen readers to read the file name, which is a poor experience.

Image File Optimization

Modern Image Formats

File format selection significantly impacts both quality and file size:

• WebP: Google's modern format offers 25-35% smaller files than JPEG at equivalent quality. Supported by all modern browsers.
• AVIF: Even more efficient than WebP (up to 50% smaller than JPEG) but with slower encoding and less universal browser support.
• JPEG: Best for photographs when WebP/AVIF are not supported. Use progressive JPEG for perceived faster loading.
• PNG: Necessary for images requiring transparency. Use only when transparency is needed, as PNG files are larger than JPEG/WebP.
• SVG: Ideal for logos, icons, and illustrations. Infinitely scalable with tiny file sizes.

Compression Techniques

Compress images without perceptible quality loss:

• Lossy compression: Removes image data to reduce file size. Tools like TinyPNG, Squoosh (by Google), and ShortPixel can reduce JPEG file sizes by 60-80% with minimal visible quality loss.
• Lossless compression: Reduces file size without removing data. Smaller savings but no quality loss. Useful for PNGs and images where quality is paramount.
• Responsive images: Use the srcset attribute to serve different image sizes based on the user's device and viewport. Serving a 2000px-wide image to a 400px-wide mobile screen wastes bandwidth.

Image Dimensions

Always specify width and height attributes on <img> tags. This prevents Cumulative Layout Shift (CLS) by allowing the browser to reserve the correct space before the image loads. Use CSS aspect-ratio for responsive layouts.

Image File Names

Use descriptive, keyword-rich file names separated by hyphens. blue-running-shoes-nike-pegasus.webp is far better than IMG_20240301_123456.jpg. Google uses file names as a context signal for understanding image content.

Lazy Loading

Implement lazy loading for images below the fold using the native loading="lazy" attribute. This defers loading offscreen images until the user scrolls near them, improving initial page load time and LCP. Important: do not lazy-load the LCP element (hero image or above-the-fold images) — these should load eagerly.

Image Sitemaps and Structured Data

Submit an image sitemap to Google Search Console to help Google discover images, especially those loaded via JavaScript or CSS. Use ImageObject schema markup for important images to provide additional context (caption, creator, license information).

Key Takeaways

• Write descriptive, keyword-inclusive alt text under 125 characters for every meaningful image.
• Use modern image formats (WebP, AVIF) and compress images to reduce page weight by 50% or more.
• Always specify width and height attributes to prevent CLS, and use responsive srcset for different devices.
• Use descriptive, hyphenated file names that include relevant keywords.
• Lazy-load below-the-fold images but eagerly load the LCP element.
• Submit image sitemaps to help Google discover and index your images for image search traffic.