Image Optimization & Alt Text: The Accessibility SEO Guide

Why Image Optimization is Critical for SEO

Unoptimised images are the single largest drag on page speed for most South African websites. They directly hurt your Largest Contentful Paint (LCP), inflate bandwidth costs for users on mobile data, and leave Google Images traffic on the table. Fix your images and you fix a measurable chunk of your Core Web Vitals score.

Images serve three SEO purposes:

1. Google Images ranking: Optimised images appear in Google Images search — accounting for 10–30% of organic traffic on visual topics
2. Page speed: Uncompressed images slow your site, hurting Core Web Vitals (a confirmed ranking factor since the 2021 Page Experience update)
3. Accessibility: Alt text helps screen readers, satisfying WCAG 2.1 requirements and acting as a ranking signal

Image optimisation is a key component of complete on-page SEO — learn the full strategy in our comprehensive on-page SEO guide.

The Cost of Poor Image Optimisation

We audited a Johannesburg e-commerce site where the homepage loaded 14 uncompressed PNGs totalling 9.2 MB. Their LCP was 7.3 seconds on a 4G connection. After converting to WebP and lazy-loading below-the-fold images, LCP dropped to 2.1 seconds — and their PageSpeed Insights score jumped from 34 to 87.

• Unoptimised images (2 MB+ each) push LCP beyond 4 seconds — Google's "poor" threshold is 2.5 s
• Slow page speed triggers ranking penalties under Google's Page Experience system
• No alt text means Google cannot index image content for Google Images results
• Poor filenames waste search visibility on a zero-effort signal
• Cumulative Layout Shift (CLS) spikes when images lack explicit width and height attributes — the browser reserves no space until the image loads, causing content to jump

LCP, CLS, and the Page Experience Update

Google's Page Experience update made three Core Web Vitals — LCP, CLS, and Interaction to Next Paint (INP) — direct ranking factors. Images affect two of those three. A hero banner without width/height attributes causes layout shift (CLS). A 1.5 MB JPEG served without compression inflates LCP. In our experience, fixing images alone moves the needle on PageSpeed scores by 20–40 points for image-heavy sites.

Alt Text Best Practices: Keyword + Description

What is Alt Text?

Alt text (alternative text) is a short HTML attribute describing an image's content. It serves both accessibility and SEO purposes: screen readers announce it to visually impaired users, and Google uses it to understand what the image depicts. Every informational image on your site needs one — skip it, and you lose both audiences.

Alt text appears when:

• The image fails to load (broken link or slow connection)
• A user hovers over the image (some browsers)
• A screen reader reads the page aloud (accessibility)
• Google indexes image content for Google Images results

Alt Text Formula: Keyword + Description (125 chars max)

Structure: [Keyword] + [Descriptive context]

Good alt text: "Internal linking strategy diagram showing pillar page linking to cluster posts"

Bad alt text: "image123.jpg" or "diagram" or "Internal linking strategy diagram for South African SEO businesses with keywords"

The third example is keyword stuffing. Google's John Mueller has confirmed that cramming keywords into alt text can trigger spam filters. Keep it natural — describe the image as you would to someone who cannot see it.

Alt Text Guidelines

• Include target keyword once: If the image relates to "title tag optimisation," include that phrase — once
• Be descriptive: Describe what the image shows, not just the topic. "Bar chart comparing organic vs paid traffic" beats "traffic chart"
• Keep it under 125 characters: Google recommends concise descriptions; screen readers truncate after ~125 chars
• Don't stuff keywords: "title tag title tag SEO title tag optimisation" triggers spam signals
• Use punctuation: "Keyword: description" or "Keyword — description" reads better for screen readers
• Context matters: The same image of a graph might need different alt text on different pages depending on the surrounding content

Common Alt Text Mistakes SA Businesses Make

We recently crawled 50 South African SME websites using Screaming Frog. The results were grim:

• 62% had images with no alt text at all — complete missed opportunity for Google Images traffic
• Auto-generated alt text from CMS uploads: "IMG_20250314_143022.jpg" tells Google nothing
• Same alt text on every image: One Cape Town restaurant used "restaurant food photo" on all 34 menu images. Google sees that as thin content
• Alt text on decorative elements: Background gradients and spacer images had keyword-stuffed alt text, confusing screen readers
• Afrikaans/English mismatch: English alt text on an Afrikaans-language page sends mixed signals to Google about content language

Alt Text Examples by Image Type

Diagrams/Charts: "User search journey chart: awareness → consideration → decision stages"

Screenshots: "Google Search Console CTR report showing 2% average click-through rate for homepage"

Infographics: "SEO ranking factors ranked by importance: backlinks, content quality, page experience"

Product photos: "Red Nike Air Max 90 running shoe, side profile view" — include brand, colour, and angle

Team/staff photos: "Dr Sarah Nkosi, lead dentist at Smile Clinic Sandton" — name and role, not "team member"

Decorative images: Leave blank (alt="") — don't waste alt text on pure decoration. This tells screen readers to skip the image entirely

Image Compression: Balancing Quality and Speed

Image compression reduces file size without visible quality loss. A properly compressed JPEG at 80% quality is visually identical to the original but weighs 60–70% less. For most South African users on mobile data — where every megabyte counts against their data bundle — this difference matters more than it does in markets with unlimited fibre.

Target File Sizes (by format)

• JPEG: 50–150 KB per image (lossy compression acceptable for photos)
• PNG: 100–300 KB (lossless, larger files — use only when transparency is needed)
• WebP: 30–100 KB (25–35% smaller than JPEG at equivalent quality)
• AVIF: 20–80 KB (newest format, ~50% smaller than JPEG — browser support is now above 92%)
• SVG: 5–50 KB (scalable vector, ideal for logos, icons, and diagrams)

Step-by-Step Compression Workflow

This is the process we follow for every client site audit:

1. Crawl the site with Screaming Frog or Sitebulb — export a list of all images with their file sizes
2. Flag images over 200 KB — these are your priority targets
3. Batch-compress using Squoosh (Google's free tool) or TinyPNG. Set JPEG quality to 80%, PNG to maximum compression
4. Convert to WebP where possible — use the <picture> element to serve WebP with a JPEG fallback
5. Set explicit dimensions — add width and height attributes to every <img> tag to prevent CLS
6. Add loading="lazy" to all images below the fold (not the hero image)
7. Re-test with PageSpeed Insights — confirm LCP improvement

Compression Tools

• Free: TinyPNG, ImageOptim (Mac), Squoosh (Google's browser-based tool — excellent for one-off conversions)
• Paid/CDN: Cloudinary, ImageEngine, Cloudflare Polish (auto-compression on delivery)
• CMS plugins: WordPress Smush, ShortPixel, Imagify (auto-compress on upload)
• CLI tools: cwebp for WebP conversion, avifenc for AVIF — useful for batch processing during site migrations

Lazy Loading and Responsive Images

Lazy loading defers the download of off-screen images until the user scrolls near them. Combined with responsive image markup, it ensures each visitor downloads only the bytes they actually need — smaller files on mobile, larger files on desktop. Together, these two techniques cut initial page weight by 40–60% on image-heavy pages.

Native Lazy Loading with loading="lazy"

Modern browsers support native lazy loading via a single HTML attribute. No JavaScript library required:

<img src="product-photo.webp" alt="Product description" loading="lazy" width="800" height="600">

Critical rule: Never lazy-load your hero image or any above-the-fold content. The hero image is typically your LCP element — lazy loading it delays the metric Google measures. Use loading="eager" (or omit the attribute entirely) for above-the-fold images, and loading="lazy" for everything else.

Responsive Images with srcset and sizes

The srcset attribute lets the browser choose the right image size based on the user's screen width and pixel density. Instead of serving a 2400 px-wide image to a 375 px-wide phone, the browser picks the closest match:

<img srcset="product-400w.webp 400w, product-800w.webp 800w, product-1200w.webp 1200w" sizes="(max-width: 600px) 100vw, 50vw" src="product-800w.webp" alt="Product description">

The sizes attribute tells the browser how wide the image will display at each breakpoint. Without it, the browser assumes the image fills the full viewport — and downloads the largest version every time.

The <picture> Element for Format Fallbacks

Use the <picture> element when you need to serve different formats (WebP with JPEG fallback) or different crops for different screen sizes (art direction):

<picture>
  <source srcset="hero-banner.avif" type="image/avif">
  <source srcset="hero-banner.webp" type="image/webp">
  <img src="hero-banner.jpg" alt="Description of hero image" width="1200" height="600">
</picture>

The browser picks the first <source> it supports. Older browsers that don't recognise AVIF or WebP fall back to the <img> tag's JPEG. Zero JavaScript, zero complexity.

Image CDN and WebP Conversion

An image CDN automatically optimises, resizes, and serves images in the best format for each visitor's browser — without you touching a single file. For South African sites serving visitors across Africa and internationally, a CDN also reduces latency by serving images from edge servers closer to the user.

Popular Image CDN Options

• Cloudinary: Free tier covers 25 GB of bandwidth/month. Supports automatic format detection (serves WebP to Chrome, AVIF to supported browsers, JPEG to Safari pre-v16)
• Cloudflare Polish: If you already use Cloudflare (common for SA sites), enable Polish in the Speed settings. It auto-compresses and converts to WebP at the edge — no code changes needed
• imgix: Developer-focused, excellent for sites with thousands of product images. URL-based transformations let you resize, crop, and convert by adjusting query parameters
• Bunny CDN Optimizer: Budget-friendly option with South African PoPs (points of presence) — lower latency for local visitors

Next-Gen Formats: WebP and AVIF

WebP delivers 25–35% smaller files than JPEG at the same visual quality. AVIF pushes that to 50%. In our experience, converting a client's image library from JPEG to WebP typically saves 1–3 MB per page — enough to move LCP from "needs improvement" to "good" on its own.

Browser support in 2026: WebP is supported by 97%+ of browsers globally. AVIF support sits above 92%. For the remaining users, always include a JPEG fallback via the <picture> element.

Filename Optimisation: SEO-Friendly Naming

Descriptive filenames give Google an additional signal about image content before it even looks at alt text or surrounding copy. A file named cape-town-waterfront-sunset.jpg tells Google more than DSC_0042.jpg ever will. The effort is minimal — rename before upload, not after.

Good Filename Format

Formula: keyword-descriptor.ext

Good: "title-tag-optimisation-guide.jpg"

Bad: "image123.jpg" or "screenshot (1).png" or "photo-123-final.jpg"

Filename Best Practices

• Hyphens, not underscores: Google treats hyphens as word separators. seo-audit-report.jpg is three words; seo_audit_report.jpg is one token
• 1–2 keywords maximum: Include them naturally, not forced. johannesburg-office-interior.jpg works; johannesburg-seo-office-best-interior-design-2026.jpg does not
• Lowercase only: Mixed case creates duplicate URL issues on case-sensitive servers (most Linux hosting)
• Under 50 characters: Shorter filenames are easier to manage and less likely to be truncated in logs
• Match the image content: If the photo shows your Durban team at a conference, name it nexusseo-durban-team-conference.jpg — not team-photo.jpg
• No special characters: Avoid spaces, ampersands, brackets, or accented characters. These break URLs and cause 404s

Image Sitemaps

An image sitemap tells Google about images that might not be discoverable through normal crawling — for example, images loaded via JavaScript, images behind tabs or accordions, or images on pages with restricted crawl budgets. If your site has more than 500 images, an image sitemap is worth the 10 minutes it takes to set up.

When to Use an Image Sitemap

• JavaScript-loaded images: If images are injected via JS (React galleries, lazy-loaded carousels), Googlebot may miss them
• Large product catalogues: E-commerce sites with thousands of product photos benefit from explicit indexing signals
• CDN-hosted images: If your images live on a different subdomain (e.g., images.example.co.za), a sitemap helps Google associate them with your main domain

How to Add Images to Your Sitemap

You can extend your existing XML sitemap with <image:image> tags inside each <url> entry. Google supports up to 1,000 images per page URL:

<url>
  <loc>https://example.co.za/products/widget/</loc>
  <image:image>
    <image:loc>https://example.co.za/images/widget-front.webp</image:loc>
  </image:image>
</url>

WordPress users can enable image sitemaps through Yoast SEO or Rank Math — both generate them automatically. For static sites, add the image namespace (xmlns:image="http://www.google.com/schemas/sitemap-image/1.1") to your sitemap header and include the tags manually.