AEO Analyzer

AI Engine Optimization Intelligence

Back to Documentation

Media & Accessibility Checks

15% Weight 14 Checks 4 High Priority

14 checks ensuring your media content is optimized, accessible, and AI-readable. This dimension accounts for 20% of your overall AEO score.

Why Media Matters: AI systems cannot "see" images or "watch" videos - they rely on alt text, captions, and transcripts to understand your visual content.

Image Optimization

Optimized images improve page load times and ensure AI systems can efficiently process your visual content.

Lazy Loading Implementation

High ▼
What It Checks
Verifies that images use the loading="lazy" attribute for deferred loading of off-screen images.
Why It's Important
Lazy loading significantly improves initial page load performance. Faster pages are prioritized by AI systems and provide better user experience.
Scoring Method
Pass: >80% of below-fold images have lazy loading Partial: 50-80% use lazy loading Fail: <50% lazy loading implementation
How To Fix
Add loading="lazy" to below-fold images. Do NOT lazy-load above-the-fold images.
Implementation Example
<!-- Below-fold image - USE lazy loading -->
<img src="product-gallery.jpg"
     alt="Product gallery view"
     loading="lazy"
     width="800" height="600">

<!-- Above-fold hero image - NO lazy loading -->
<img src="hero-banner.jpg"
     alt="Welcome to our store"
     fetchpriority="high"
     width="1200" height="400">

Image File Size Optimization

High ▼
What It Checks
Analyzes individual image file sizes and total page image weight. Checks for oversized images that could be compressed.
Why It's Important
Large image files are the primary cause of slow page loads. AI crawlers have bandwidth limits and may skip heavy pages.
Scoring Method
Pass: Total image weight <500KB, no single image >200KB Partial: Total weight 500KB-1MB Fail: Total weight >1MB or images >500KB each
How To Fix
Compress images using tools like ImageOptim, TinyPNG, or Squoosh. Use appropriate dimensions.
Image Optimization Checklist
<!-- Before: Unoptimized image -->
<img src="photo-original.jpg"> <!-- 2.4MB -->

<!-- After: Optimized image -->
<img src="photo-optimized.webp"
     width="800" height="600"
     loading="lazy"
     alt="Product showcase"> <!-- 95KB -->

# CLI tools for optimization
# ImageMagick - resize and compress
convert input.jpg -resize 800x600 -quality 85 output.jpg

# cwebp - convert to WebP
cwebp -q 80 input.jpg -o output.webp

Image Aspect Ratio & Dimensions

Medium ▼
What It Checks
Verifies that images have explicit width and height attributes, preventing Cumulative Layout Shift (CLS).
Why It's Important
Images without dimensions cause layout shifts as they load, hurting CLS scores and user experience.
Scoring Method
Pass: >90% of images have width/height attributes Partial: 70-90% have dimensions specified Fail: <70% have dimensions
How To Fix
Always specify width and height attributes on images. Use CSS aspect-ratio for responsive containers.
Preventing Layout Shift
<!-- Good: Explicit dimensions prevent CLS -->
<img src="product.jpg" width="800" height="600" alt="Product image">

<!-- Better: With CSS aspect-ratio fallback -->
<style>
.image-container {
  aspect-ratio: 4 / 3;
  width: 100%;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

<div class="image-container">
  <img src="product.jpg" alt="Product image">
</div>

Image Compression Analysis

Medium ▼
What It Checks
Analyzes compression efficiency of images by comparing file sizes against optimal compression ratios for each format type (JPEG, PNG, WebP, AVIF).
Why It's Important
Poorly compressed images waste bandwidth and slow page loads. AI crawlers have limited resources and may skip pages with inefficiently compressed media.
Scoring Method
Pass: Images are optimally compressed (quality vs size) Partial: Some images could be further compressed Fail: Multiple images significantly over-sized
How To Fix
Use image optimization tools to apply appropriate compression. Target 80-85% quality for JPEGs.
Compression Guidelines
# Optimal compression settings by format:

# JPEG - Use quality 80-85 for photos
cjpeg -quality 82 input.jpg > output.jpg

# PNG - Use for graphics with transparency
optipng -o5 image.png

# WebP - Modern format, excellent compression
cwebp -q 80 photo.jpg -o photo.webp

# AVIF - Best compression but slower to encode
avifenc --min 40 --max 50 input.png output.avif

Alt Text Quality

Alt text enables AI systems to understand image content and provides accessibility for screen reader users.

Alt Text Presence

Critical ▼
What It Checks
Scans all <img> elements to verify they have non-empty alt attributes. Decorative images should have alt="".
Why It's Important
Alt text is the primary way AI systems understand image content. Without it, visual information is invisible to AI crawlers and screen readers. WCAG Level A requirement.
Scoring Method
Pass: 100% of content images have alt text Partial: 80-99% have alt text Fail: <80% have alt text
How To Fix
Add descriptive alt text to every content image. Use empty alt="" for purely decorative images.
Implementation Example
<!-- Content image - needs descriptive alt -->
<img src="ceo-headshot.jpg"
     alt="Jane Smith, CEO of TechCorp, smiling in professional attire">

<!-- Product image - include key details -->
<img src="blue-sneakers.jpg"
     alt="Nike Air Max 90 in royal blue, side view">

<!-- Decorative image - empty alt -->
<img src="decorative-line.svg" alt="" role="presentation">

Alt Text Quality & Descriptiveness

High ▼
What It Checks
Evaluates the quality and descriptiveness of alt text. Checks for generic phrases like "image", file names as alt text, and keyword stuffing.
Why It's Important
Descriptive alt text helps AI understand context and relevance. Poor quality alt text provides no semantic value.
Scoring Method
Pass: Alt text is descriptive, 10-125 chars, contextually relevant Partial: Alt text exists but is generic or wrong length Fail: Generic phrases, file names, or keyword-stuffed
How To Fix
Write alt text that describes the image's content and purpose. Avoid starting with "Image of...".
Good vs Bad Alt Text
<!-- BAD: Generic or unhelpful -->
<img src="chart.png" alt="image">
<img src="team.jpg" alt="photo">
<img src="product.jpg" alt="IMG_4521.jpg">
<img src="ceo.jpg" alt="Image of a person">

<!-- GOOD: Descriptive and contextual -->
<img src="chart.png" alt="Bar chart showing 40% increase in Q3 revenue">
<img src="team.jpg" alt="Marketing team collaborating in conference room">
<img src="product.jpg" alt="Red leather handbag with gold buckle, front view">
<img src="ceo.jpg" alt="Sarah Chen, CEO, speaking at TechConf 2024">

Modern Image Formats

Next-generation image formats provide superior compression while maintaining visual quality.

WebP/AVIF Format Usage

Medium ▼
What It Checks
Detects usage of modern image formats (WebP, AVIF) which offer 25-50% smaller file sizes compared to JPEG/PNG.
Why It's Important
Modern formats reduce bandwidth and improve load times. AVIF offers up to 50% savings over JPEG. All modern browsers support WebP.
Scoring Method
Pass: >50% of images use WebP or AVIF Partial: 20-50% use modern formats Fail: <20% or no modern format usage
How To Fix
Convert images to WebP/AVIF. Use the <picture> element for fallbacks.
Progressive Enhancement
<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero banner" width="1200" height="600">
</picture>

SVG Accessibility

Low ▼
What It Checks
Verifies that inline SVG elements have proper accessibility attributes including role="img", aria-label, or <title> elements.
Why It's Important
Without proper accessibility markup, SVG meanings are invisible to screen readers and AI systems.
Scoring Method
Pass: All meaningful SVGs have accessibility attributes Partial: Some SVGs have accessibility markup Fail: No accessibility attributes on inline SVGs
How To Fix
Add role="img" and aria-label to meaningful SVGs. Use aria-hidden="true" for decorative ones.
Accessible SVG Patterns
<!-- Meaningful SVG - needs accessibility -->
<svg role="img" aria-label="Company growth chart"
     viewBox="0 0 100 100">
  <title>Company Growth Chart</title>
  <desc>A line chart showing revenue growing 45% year over year</desc>
</svg>

<!-- Decorative SVG - hide from assistive tech -->
<svg aria-hidden="true" class="decorative-divider">
  <!-- Decorative pattern -->
</svg>

Responsive Images

Serving appropriately-sized images for different devices and viewport sizes.

Responsive Images (srcset)

Medium ▼
What It Checks
Verifies that images use srcset and sizes attributes to provide multiple image resolutions for different viewports.
Why It's Important
Mobile devices don't need 4K images. Serving appropriately-sized images reduces data transfer by 50-80% on mobile.
Scoring Method
Pass: >50% of large images use srcset Partial: 20-50% use responsive techniques Fail: No responsive images or <20% implementation
How To Fix
Provide multiple image sizes using srcset and define display sizes with the sizes attribute.
Srcset Example
<img srcset="product-400w.jpg 400w,
             product-800w.jpg 800w,
             product-1200w.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            600px"
     src="product-800w.jpg"
     alt="Premium leather wallet in brown">

Video & Audio Accessibility

Making video and audio content accessible and AI-readable through captions and transcripts.

Video Accessibility Features

High ▼
What It Checks
Verifies that video elements include captions (<track kind="captions">), descriptions, and proper controls. Checks for autoplay without user consent.
Why It's Important
AI systems cannot watch videos - they rely on captions and transcripts. Captions are essential for deaf/hard-of-hearing users.
Scoring Method
Pass: All videos have captions, controls, no autoplay with sound Partial: Some accessibility features present Fail: No captions or autoplay with sound
How To Fix
Add caption tracks to all videos. Include controls and avoid autoplay.
Video with Captions
<video controls preload="metadata" poster="thumbnail.jpg">
  <source src="demo.mp4" type="video/mp4">
  <track kind="captions" src="captions-en.vtt"
         srclang="en" label="English" default>
  <track kind="captions" src="captions-es.vtt"
         srclang="es" label="Spanish">
</video>

Video Transcripts

High ▼
What It Checks
Detects whether video content has an accompanying full text transcript on the page.
Why It's Important
Transcripts are the primary way AI systems index video content. They make video content searchable and quotable.
Scoring Method
Pass: Full transcript present near video content Partial: Partial transcript or summary available Fail: No transcript or text alternative
How To Fix
Provide a complete transcript near the video. Use collapsible sections for long transcripts.
Video with Transcript
<article>
  <h2>Product Demo Video</h2>
  <video controls poster="demo-thumbnail.jpg">
    <source src="demo.mp4" type="video/mp4">
    <track kind="captions" src="demo-en.vtt" srclang="en" default>
  </video>

  <details class="video-transcript">
    <summary>View Full Transcript</summary>
    <div class="transcript-content">
      <p><strong>[00:00]</strong> Welcome to our product demo...</p>
      <p><strong>[00:15]</strong> First, let me show you...</p>
    </div>
  </details>
</article>

Audio Transcripts

High ▼
What It Checks
Verifies that audio content (podcasts, audio clips) has accompanying text transcripts.
Why It's Important
AI systems cannot process audio - transcripts are the only way to make audio content discoverable and quotable.
Scoring Method
Pass: Complete transcript provided for audio Partial: Summary or partial transcript available Fail: No transcript for audio content
How To Fix
Provide full transcripts for all audio content. Include speaker identification.
Podcast with Transcript
<article class="podcast-episode">
  <h2>Episode 42: The Future of AI</h2>
  <p class="episode-meta">Duration: 45 min | Published: Oct 15, 2024</p>

  <audio controls preload="metadata">
    <source src="episode-42.mp3" type="audio/mpeg">
  </audio>

  <section class="transcript">
    <h3>Full Transcript</h3>
    <p><strong>Host (Sarah):</strong> Welcome to Tech Talk...</p>
    <p><strong>Dr. Chen:</strong> Thanks for having me, Sarah.</p>
  </section>
</article>

Semantic Media Elements

Using proper HTML5 elements to give context and meaning to media content.

Figure/Figcaption Usage

Medium ▼
What It Checks
Detects usage of <figure> and <figcaption> elements to semantically associate images with their captions.
Why It's Important
Figure/figcaption provides semantic relationship between images and descriptions that AI systems understand.
Scoring Method
Pass: >50% of content images use figure/figcaption Partial: 20-50% use semantic markup Fail: No figure/figcaption usage
How To Fix
Wrap images with captions in <figure> elements and use <figcaption> for caption text.
Figure/Figcaption Example
<figure>
  <img src="chart-revenue.png"
       alt="Q3 2024 revenue breakdown by region">
  <figcaption>
    Figure 3: Q3 2024 Revenue by Region.
    North America led with 45% of total revenue.
  </figcaption>
</figure>

PDF Accessibility

Medium ▼
What It Checks
Detects PDF links and checks if PDFs are tagged (accessible) or if HTML alternatives are provided.
Why It's Important
PDFs are often invisible to AI systems, especially scanned/image PDFs. HTML alternatives ensure content is discoverable.
Scoring Method
Pass: HTML alternatives provided or tagged accessible PDFs Partial: Some PDFs have alternatives Fail: Image-only PDFs with no alternatives
How To Fix
Provide HTML versions of PDF content when possible. Add descriptive context around PDF links.
Accessible PDF Linking
<!-- Bad: Unlabeled PDF link -->
<a href="report.pdf">Download</a>

<!-- Good: Descriptive PDF link with format indicator -->
<a href="annual-report-2024.pdf">
  Annual Report 2024 (PDF, 2.4MB)
</a>

<!-- Better: With HTML alternative -->
<div class="document-download">
  <h3>Annual Report 2024</h3>
  <p>Our comprehensive annual report covering financial
     performance, strategic initiatives, and future outlook.</p>
  <ul class="download-options">
    <li><a href="/reports/annual-2024">View Online (HTML)</a></li>
    <li><a href="/reports/annual-2024.pdf">Download PDF (2.4MB)</a></li>
  </ul>
</div>
Previous: Performance Checks Next: AI-Specific Checks