Image Optimization for SEO and Accessibility

The Dual Purpose of Image Optimization

Every image on a web page is an opportunity — or a liability. An optimized image improves page load speed (a ranking factor), contributes to image search visibility, conveys information to screen reader users, and reduces bandwidth for users on metered connections. An unoptimized image does the opposite: it slows the page, renders as meaningless file names to assistive technology, and contributes nothing to search indexing.

The good news is that accessibility optimization and SEO optimization for images are almost identical in practice. Both require descriptive alternative text, sensible file names, appropriate file formats, and correct HTML markup.

Writing Effective Alt Text

Alt text (the alt attribute on <img> elements) serves three purposes simultaneously: it is read aloud by screen readers, it is indexed by search engines, and it is displayed when the image fails to load. The same text must serve all three audiences well.

Guidelines for writing effective alt text:

• Describe what the image communicates, not what it looks like literally. For a chart showing revenue growth, write "Q3 revenue increased 22% compared to Q2" — not "a bar chart with blue and green bars".
• Keep alt text under 150 characters. For complex images (diagrams, infographics), provide a long description in adjacent text or via aria-describedby.
• Do not start with "image of" or "photo of" — screen readers already announce the element type.
• For functional images (buttons, links with only an image), the alt text should describe the function, not the appearance.
• For decorative images, use alt="" to suppress announcement. Never omit the alt attribute entirely.
• Include your primary keyword naturally where it is genuinely relevant to the image content.

File Names and URL Structure

Google indexes image file names and uses them as a relevance signal. An image named DSC_0042.jpg contributes nothing; an image named wcag-keyboard-navigation-test.jpg adds topical relevance. Before uploading, rename images to descriptive, hyphenated slugs that reflect the image content and target keyword.

<!-- Bad: meaningless file names -->
<img src="/images/DSC_0042.jpg" alt="A developer testing keyboard navigation">
<img src="/images/img001.png" alt="Color contrast checker screenshot">

<!-- Good: descriptive file names aligned with alt text -->
<img src="/images/keyboard-navigation-testing-developer.jpg" alt="A developer testing keyboard navigation on a web application">
<img src="/images/color-contrast-checker-wcag.png" alt="Color contrast checker showing a ratio of 4.5:1">

Modern Image Formats and Performance

Image format choice directly affects Core Web Vitals (LCP). WebP images are 25–35% smaller than equivalent JPEG/PNG files. AVIF is 50% smaller than JPEG. Smaller files load faster, improving LCP scores and therefore organic rankings. Use the <picture> element with format fallbacks to support all browsers:

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img
    src="/images/hero.jpg"
    alt="Accessibility audit dashboard showing 98% conformance score"
    width="1200"
    height="630"
    loading="eager"
    decoding="async"
  >
</picture>

Responsive Images with srcset

The srcset and sizes attributes allow browsers to serve appropriately sized images for each device. This avoids sending a 2400px-wide image to a 375px-wide mobile screen — a common source of LCP failures and wasted bandwidth for users on mobile data plans.

<img
  src="/images/guide-cover-800.webp"
  srcset="
    /images/guide-cover-400.webp 400w,
    /images/guide-cover-800.webp 800w,
    /images/guide-cover-1200.webp 1200w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 800px"
  alt="Visual guide to keyboard navigation testing"
  width="800"
  height="450"
  loading="lazy"
>

Lazy Loading and CLS Prevention

Use loading="lazy" on all below-the-fold images to defer their loading until the user scrolls near them. This improves initial page load speed. However, never use lazy loading on above-the-fold images (especially the LCP image) — it will delay the LCP metric and hurt rankings.

Always specify explicit width and height attributes on <img> elements. Without them, the browser does not know the image's aspect ratio before it loads, causing Cumulative Layout Shift (CLS) as the image displaces surrounding content on load. This is both an SEO issue (CLS is a ranking signal) and an accessibility issue (layout shifts disorient screen magnification users).

Image Structured Data

For article pages and product pages, add ImageObject schema to tell Google which image is the primary image for the page. This improves eligibility for image-rich results in Google Discover and Top Stories. The schema should include the image URL, dimensions, caption, and a description that complements the alt text.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Image Optimization for SEO and Accessibility",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/images/image-optimization-guide.webp",
    "width": 1200,
    "height": 630,
    "caption": "Diagram showing the relationship between alt text, file names, and SEO"
  }
}
</script>

SVGs as Accessible, SEO-Friendly Graphics

Inline SVGs are fully indexable by search engines and can be made fully accessible with a title element and aria-labelledby. For icons and decorative SVGs, use aria-hidden="true" to prevent them being announced by screen readers. For informative SVGs (diagrams, charts), provide a <title> and optionally a <desc> element inside the SVG.

<!-- Accessible informative SVG -->
<svg role="img" aria-labelledby="svg-title svg-desc" viewBox="0 0 400 200">
  <title id="svg-title">WCAG Conformance by Industry</title>
  <desc id="svg-desc">Bar chart showing that government sites have 78% WCAG AA conformance, e-commerce 62%, and healthcare 71%.</desc>
  <!-- chart paths -->
</svg>