Image Optimisation for SEO

Images enhance content but unoptimised images are one of the leading causes of slow page load times, poor Core Web Vitals scores, and missed SEO opportunities. Proper image optimisation improves page speed, provides additional ranking signals through alt text, and opens up Google Image Search as a traffic source.

Why Image Optimisation Matters

Page Speed & Core Web Vitals

Images typically account for 50–70% of a web page's total file size. Uncompressed images directly cause:

• Slow Largest Contentful Paint (LCP) — if your hero image takes 4 seconds to load, your LCP fails
• Layout shifts (CLS) — images without defined dimensions cause content to jump as they load
• Poor user experience — users abandon pages that take more than 3 seconds to load

Google uses Core Web Vitals as ranking signals. Poor image optimisation directly hurts rankings.

Google Image Search Traffic

Google Image Search drives significant traffic for many industries. Images with proper alt text, descriptive file names, and relevant page context can rank in Image Search, bringing additional organic traffic.

Accessibility

Alt text makes images accessible to visually impaired users who rely on screen readers. This is not just good practice — it is a legal requirement in many jurisdictions and an ethical responsibility.

Image File Formats

WebP (Recommended Default)

• 25–35% smaller than JPEG at equivalent quality
• Supports transparency (like PNG)
• Supported by all modern browsers
• Best choice for most web images

AVIF (Best Compression)

• 30–50% smaller than JPEG at equivalent quality
• Superior compression to WebP
• Growing browser support (not yet universal)
• Best choice where browser support is confirmed

JPEG

• Universal browser support
• Good for photographs
• No transparency support
• Larger file sizes than WebP/AVIF

PNG

• Supports transparency
• Lossless quality
• Significantly larger file sizes
• Use only when transparency is required and WebP is not an option

SVG

• Vector format — scales to any size without quality loss
• Smallest file size for icons, logos, and simple illustrations
• Not suitable for photographs
• Can be styled with CSS and animated with JavaScript

Format Decision Matrix

Image Type	Recommended Format
Photographs	WebP (fallback: JPEG)
Illustrations with transparency	WebP (fallback: PNG)
Icons and logos	SVG
Animated images	WebP animation or optimised GIF
Hero/banner images	WebP or AVIF

Image Compression

Lossy vs Lossless

Lossy compression removes some image data to reduce file size. At quality levels of 75–85%, the difference is invisible to the human eye but file sizes are 60–80% smaller.

Lossless compression reduces file size without removing any data. Smaller reduction than lossy but preserves perfect quality. Best for SVGs, screenshots, and images with text.

Compression Guidelines

Image Use	Quality Setting	Target Size
Hero/banner	80–85%	Under 200KB
Blog/article images	75–80%	Under 100KB
Thumbnails	70–75%	Under 30KB
Icons/logos	Lossless (SVG)	Under 10KB

Compression Tools

• Squoosh (free, browser-based) — excellent for individual images with visual comparison
• ShortPixel (freemium) — bulk compression with WordPress integration
• ImageOptim (free, macOS) — drag-and-drop compression
• Next.js Image component — automatic optimisation for Next.js applications

Alt Text Best Practices

Alt text (alternative text) is an HTML attribute that describes what an image shows:

<img src="keyword-research-process.webp" alt="Flowchart showing the five-step keyword research process: seed keywords, tool expansion, analysis, grouping, and prioritisation" />

Writing Good Alt Text

Be descriptive and specific:

• ✅ "Bar chart comparing SEO vs Google Ads cost per lead over 12 months"
• ❌ "Chart" or "Image" or "graph.jpg"

Describe what the image shows, not what it is:

• ✅ "Team reviewing website analytics dashboard in a meeting room"
• ❌ "Photo of team meeting"

Include keywords naturally, but only when relevant:

• ✅ "Screenshot of Google Search Console performance report showing organic traffic growth"
• ❌ "SEO keyword research tools best SEO agency South Africa"

Keep it under 125 characters — screen readers may truncate longer alt text.

When to Use Empty Alt Text

Use empty alt text (alt="") for purely decorative images that add no informational value:

• Background patterns
• Decorative dividers
• Spacer images

Empty alt text tells screen readers to skip the image. Do not omit the alt attribute entirely — that causes screen readers to read the file name aloud.

Responsive Images

Serve different image sizes for different devices to avoid loading desktop-sized images on mobile:

The srcset Attribute

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Description of the image"
/>

This tells the browser to load the appropriate image size based on the viewport width.

The <picture> Element

Use <picture> for format fallbacks:

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

Lazy Loading

Lazy loading defers loading of below-the-fold images until the user scrolls near them:

<img src="image.webp" alt="Description" loading="lazy" />

When to Use Lazy Loading

• Use on all images below the initial viewport (below the fold)
• Do not use on the hero image or any image visible on initial page load (LCP element)

Lazy loading above-the-fold images actually hurts LCP because it delays loading the most important visual element.

Image Dimensions & Layout Shift

Always specify width and height attributes on images:

<img src="image.webp" alt="Description" width="800" height="400" />

This tells the browser how much space to reserve before the image loads, preventing Cumulative Layout Shift (CLS) — the jarring visual jump when content moves as images load.

Image SEO for Google Image Search

To rank in Google Image Search:

1. Use descriptive, keyword-relevant file names (seo-strategy-framework.webp not IMG_3421.webp)
2. Write comprehensive alt text
3. Place images in contextually relevant content
4. Ensure the surrounding text relates to the image
5. Use high-quality, original images (not stock photos everyone uses)
6. Add image structured data where appropriate

Key Takeaways

• Image optimisation directly impacts page speed, Core Web Vitals, and rankings.
• Use WebP or AVIF formats for the best compression-to-quality ratio.
• Write descriptive, specific alt text for every informational image.
• Implement lazy loading for below-the-fold images but not for the hero image.
• Always specify image dimensions to prevent layout shift.
• Compress images to appropriate sizes — hero images under 200KB, content images under 100KB.

Quick Image Optimisation Checklist

• All images compressed to appropriate quality levels
• WebP or AVIF format used where possible
• Every informational image has descriptive alt text (under 125 characters)
• Decorative images have empty alt text (alt="")
• Image file names are descriptive and keyword-relevant
• Width and height attributes set on all images
• Lazy loading enabled for below-the-fold images
• Hero image loads eagerly (no lazy loading)
• Responsive images served with srcset for different viewport sizes
• Images are served from a CDN where possible

Tools & Resources (Coming Soon)

• Image Compression Tool (Coming soon)
• Alt Text Analyzer (Coming soon)
• Page Speed Checker (Coming soon)

Related SEO Documentation

• What Is On-Page SEO?
• Content Quality Signals
• What Is Technical SEO?
• Core Web Vitals Explained
• Writing SEO Content That Ranks
• URL Structure Best Practices