Image SEO & Accessibility Auditor

Image SEO Auditor

An enterprise-grade, dual-engine Image SEO, Core Web Vitals (LCP & CLS), WCAG 2.2 AA / European Accessibility Act (EAA) Compliance, and Next-Gen Format Auditor for BrowserMesh.

Audits web pages for image search visibility, evaluates accessibility compliance, diagnoses Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) bottlenecks, inspects Open Graph & Schema.org image structured data, verifies WHATWG responsive markup (srcset, sizes="auto"), unpacks XML Image Sitemaps, and actively probes image reachability to detect broken assets and bandwidth bloat.

The modern cloud alternative to Screaming Frog SEO Spider (£209/yr), Sitebulb, Google Lighthouse CLI, and brittle custom Python image crawlers.

🎯 Target Audience & Industry Solutions

• Technical SEO Directors & Webmasters: Protect image rankings in Google Images and Google Discover. Audit hundreds of pages via XML Sitemaps to uncover missing alt text, unindexed visual assets, and broken image URLs.
• Accessibility & Compliance Officers (WCAG 2.2 & EAA): Ensure digital storefronts comply with the European Accessibility Act (enforced June 28, 2025) and WCAG 2.2 Success Criterion 1.1.1 (Non-text Content) and 2.4.4 (Link Purpose). Automatically catches empty alt attributes on linked images (empty accessible links) and generic placeholder descriptions.
• Front-End & Performance Engineers (Next.js, Nuxt, Remix, Shopify, WordPress): Eliminate Core Web Vitals regressions. Flag LCP hero images delayed by the loading="lazy" anti-pattern, catch missing width/height dimensions that trigger layout shifts (CLS), and enforce modern AVIF/WebP next-gen formats.
• E-Commerce Growth Teams (Shopify Plus, Magento, BigCommerce): Audit product catalog imagery against Google Merchant Center standards (minimum 500x500 px, no blurry placeholder images, optimized file weights under 500KB for mobile shoppers).
• Social Media & Content Strategists: Debug Open Graph (og:image) and Twitter Card image previews, ensuring exact 1200x630 dimensions and high-resolution visuals across LinkedIn, Facebook, and X.

🚀 Key Features

1. WCAG 2.2 AA & EAA Accessibility Linter

Audits visual content against international accessibility regulations:

• Empty Accessible Link Detection: Flags images inside links or buttons (<a href="..."><img ...></a>) that lack alt text or accessible names, creating critical WCAG 2.4.4 barrier traps for screen-reader users.
• Alt Text Quality & Clues Engine: Flags keyword-stuffed alts, generic stubs (image, photo, logo, banner), placeholder stubs (TODO, sample, temp), redundant prefixes (Picture of..., Image showing...), camera filenames (IMG_2026.jpg), emojis in alt text, and missing terminal punctuation.
• ARIA & Decorative Awareness: Accurately respects aria-hidden="true", role="presentation", role="none", and aria-label/aria-labelledby, preventing false-positive flags on valid decorative icons.

2. Core Web Vitals Diagnostics (LCP & CLS)

• LCP Hero Image Optimizer: Automatically identifies the Largest Contentful Paint candidate. Flags the critical performance anti-pattern of applying loading="lazy" to above-the-fold hero images and warns when fetchpriority="high" is missing.
• Layout Shift (CLS) Prevention: Flags images missing explicit HTML width and height attributes or CSS aspect ratios, preventing layout jumps during page rendering.
• Below-the-Fold Lazy Loading: Recommends loading="lazy" and decoding="async" for secondary content and footer images to conserve client bandwidth.

3. WHATWG Living Standard Responsive Markup

• sizes="auto" Compliance: Evaluates modern responsive images using sizes="auto". Flags violations where sizes="auto" is used without loading="lazy" (violating WHATWG specifications) or lacks explicit dimension attributes.
• High-Density Display Readiness: Inspects <picture>, <source>, and srcset tags for 2x/3x retina descriptors and responsive breakpoint scaling.

4. Next-Gen Format & Bandwidth Optimization

• AVIF & WebP Adoption: Calculates modern format adoption percentage across all page images. Flags heavy legacy formats (BMP, uncompressed TIFF, heavy PNG graphics) that can be losslessly compressed with next-gen codecs.
• Oversized Asset Detector: Probes image file sizes, flagging warning thresholds (>200KB) and critical bottlenecks (>500KB).
• Animated GIF Detection: Recommends replacing bandwidth-heavy animated GIFs (>1MB) with modern HTML5 MP4/WebM video or animated WebP.

5. XML Image Sitemap Ingestion & Google Image SEO

• Google Image Sitemap Parser: Unpacks <image:image>, <image:loc>, <image:title>, <image:caption>, and <image:license> tags from standard and gzip-compressed XML sitemaps.
• Discrepancy Cross-Referencing: Matches sitemap-declared images against on-page HTML images, identifying orphaned or 404-broken sitemap entries that waste Googlebot crawl budget.
• Robots Directives Inspection: Flags pages missing <meta name="robots" content="max-image-preview:large"> (required for Google Discover rich cards) or blocked by noimageindex.

6. Social Open Graph & Schema.org Rich Snippets

• Open Graph Audit: Inspects og:image, og:image:width, og:image:height, and og:image:alt tags, verifying optimal 1.91:1 aspect ratios (1200x630 px).
• Structured Data Extraction: Unpacks JSON-LD and Microdata schema images from Product, Article, Recipe, and Organization schemas.

7. Active Reachability & Broken Link Prober

• Dead Link Detection: Concurrently probes external and internal image URLs with fast HTTP HEAD/GET requests, detecting HTTP 404 Not Found, 403 Forbidden, and 500 Server Errors before they damage user trust.

8. Calibrated 0–100 Health Scoring Engine

• Weighted Deductions: Evaluates image health across 45 rules categorized into Alt Text, Performance, Formats, Responsive Markup, Structured Data, Robots Directives, Sitemaps, and Reachability.
• Safety Caps & Severity Ceilings: Category deductions are capped to prevent disproportionate penalization on large media-heavy pages.
• Hard Severity Caps:
  • Pages with Robots noimageindex are capped at 59 (Grade D).
  • Pages with Empty Accessible Links are capped at 69 (Grade C).
  • Pages with Broken Images (404/500) or Missing Alt Text are capped at 79 (Grade C).
  • Pages with Missing Dimensions (CLS) or LCP Lazy Anti-Patterns are capped at 84 (Grade B).
  • Grade A+ (95–100) is strictly reserved for flawless pages featuring full modern format adoption, descriptive alt text, and valid Core Web Vitals markup.

📊 Feature Comparison: BrowserMesh vs. Traditional Tools

⚙️ How to Configure Your Job

Example Input

{
  "urls": "https://example.com/products/hiking-boots\nhttps://example.com/sitemap.xml",
  "checkImageHealth": true,
  "maxImages": 100,
  "maxSitemapPages": 50,
  "concurrency": 8,
  "timeout": 30
}

📥 Supported URL & Link Formats

• Direct Webpage URLs: Standard HTTP and HTTPS addresses (e.g. https://example.com/product/123, https://example.com/blog/article).
• Bare Domains & Subdomains: Automatically resolves schemes (e.g. example.com, shop.example.com, https://sub.domain.co.uk/).
• XML Image Sitemaps: Standard XML sitemaps declaring <image:image>, <image:loc>, <image:title>, and <image:caption> entries (e.g. https://example.com/sitemap.xml).
• Gzip-Compressed Sitemaps: Transparently decompresses .xml.gz sitemap archives on-the-fly (e.g. https://example.com/sitemap.xml.gz).
• Sitemap Index Hierarchies: Recursively discovers and unpacks child sitemaps declared within <sitemapindex> tags up to maxSitemapPages.
• Multi-line & Comma-Separated URL Batches: Paste hundreds of URLs separated by linebreaks or commas for concurrent bulk auditing.

📋 Standardized 25-Field Output Contract

Every yielded record strictly adheres to these 25 structured fields:

💡 Real-World JSON Output Example

{
  "url": "https://beacons.ai/austin",
  "domain": "beacons.ai",
  "statusCode": 200,
  "status": "healthy",
  "healthScore": 79,
  "grade": "B",
  "totalImagesCount": 3,
  "missingAltCount": 0,
  "emptyAltCount": 0,
  "descriptiveAltCount": 1,
  "poorAltCount": 2,
  "linkedImagesMissingAltCount": 0,
  "missingDimensionsCount": 1,
  "lazyLoadedCount": 0,
  "eagerLoadedCount": 0,
  "modernFormatPercentage": 0,
  "totalImageWeightBytes": 7694,
  "oversizedImagesCount": 0,
  "brokenImagesCount": 0,
  "lcpImageAudit": {
    "detected": true,
    "src": "https://cdn.beacons.ai/profile_pictures/instagram/austingingerich.jpg?q=1609087767.9388068",
    "format": "jpg",
    "isModernFormat": false,
    "fileSizeBytes": 5056,
    "isLazyLoaded": false,
    "hasFetchPriorityHigh": false,
    "hasExplicitDimensions": false,
    "issues": [
      "lcp-image-missing-fetchpriority"
    ]
  },
  "formatBreakdown": {
    "avif": 0,
    "webp": 0,
    "svg": 0,
    "jpg": 1,
    "png": 2,
    "gif": 0,
    "other": 0
  },
  "openGraphImageAudit": {
    "hasOgImage": true,
    "ogImageUrl": "https://cdn.beacons.ai/profile_pictures/instagram/austingingerich.jpg?q=1609087767.9388068",
    "hasDimensions": true,
    "width": 600,
    "height": 600,
    "hasAlt": false,
    "alt": null,
    "issues": []
  },
  "schemaImageAudit": {
    "hasSchemaImages": true,
    "schemaImageCount": 1,
    "imageObjects": [
      {
        "url": "https://cdn.beacons.ai/profile_pictures/instagram/austingingerich.jpg?q=1609087767.9388068"
      }
    ],
    "hasPrimaryImageOfPage": true,
    "primaryImageUrl": "https://cdn.beacons.ai/profile_pictures/instagram/austingingerich.jpg?q=1609087767.9388068",
    "sitemapSourceUrl": null,
    "declaredInSitemapCount": 0,
    "brokenSitemapImages": [],
    "issues": []
  },
  "images": [
    {
      "src": "https://cdn.beacons.ai/profile_pictures/instagram/austingingerich.jpg?q=1609087767.9388068",
      "resolvedUrl": "https://cdn.beacons.ai/profile_pictures/instagram/austingingerich.jpg?q=1609087767.9388068",
      "alt": "profile",
      "altStatus": "valid_descriptive",
      "role": "icon",
      "format": "jpg",
      "isModernFormat": false,
      "width": 84,
      "height": 4,
      "naturalWidth": 84,
      "naturalHeight": 4,
      "hasExplicitDimensions": false,
      "loading": "unset",
      "fetchPriority": "unset",
      "decoding": "unset",
      "hasSrcset": false,
      "hasSizes": false,
      "sizesAuto": false,
      "inPicture": false,
      "inLink": false,
      "linkHref": null,
      "inFigure": false,
      "figcaptionText": null,
      "nearestHeading": null,
      "issues": [
        "missing-dimensions"
      ],
      "recommendations": [
        "Add explicit width and height HTML attributes (or CSS aspect-ratio) to prevent Cumulative Layout Shift (CLS)."
      ],
      "statusCode": 200,
      "fileSizeBytes": 5056,
      "isBroken": false
    }
  ],
  "audit": {
    "healthScore": 79,
    "grade": "B",
    "totalDeductions": 26,
    "categoryDeductions": {
      "accessibility": 0,
      "performance": 9,
      "format": 12,
      "responsive_semantic": 0,
      "social_structured_robots": 5
    },
    "activeCeilingCaps": [],
    "bonusesAwarded": [
      "Schema.org ImageObject structured data declared (+5 pts)"
    ],
    "primaryIssues": [
      "1 image(s) missing explicit width/height",
      "Zero modern image format adoption (WebP/AVIF)"
    ],
    "recommendations": [
      "Add fetchpriority=\"high\" to the main hero LCP image.",
      "Set explicit HTML width and height attributes to avoid layout shifts.",
      "Adopt WebP and AVIF modern formats to reduce image payloads by 30-50%.",
      "Add <meta name=\"robots\" content=\"max-image-preview:large\"> to enable high-res Google Discover previews."
    ]
  }
}

💡 Common Use Cases

• WCAG 2.2 & European Accessibility Act (EAA) Compliance Audits: Ensure digital storefronts comply with mandatory accessibility directives by identifying empty accessible links, missing alt attributes, and non-descriptive filler text before enforcement penalties.
• Core Web Vitals Optimization (LCP & CLS): Integrate image audits into CI/CD pipelines to block deployments that apply loading="lazy" to above-the-fold hero images or omit explicit dimensions causing layout shifts.
• Google Image SEO & Discover Readiness: Maximize traffic from Google Images and Discover by ensuring modern formats, max-image-preview:large directives, and Schema.org ImageObject markup.
• Large-Scale E-Commerce Catalog Health: Ingest complete product sitemaps to catch broken 404 image URLs, oversized assets (>500KB), and non-standard aspect ratios across tens of thousands of SKUs.
• Social Media Preview Validation: Verify that marketing landing pages and blog articles render crisp 1200x630 previews with proper alt attributes across Twitter, LinkedIn, and Facebook.

❓ Frequently Asked Questions (FAQ)

What makes an "Empty Accessible Link" a critical accessibility failure?

When an <img> tag is wrapped in an <a> or <button> element with no text content and has an empty alt="" or missing alt attribute, screen readers encounter an anchor with no accessible name. Screen readers will read the raw URL or announce "Unlabeled Link", severely impairing blind users and violating WCAG 2.4.4 (Link Purpose) and the European Accessibility Act (EAA).

Why does lazy-loading the hero image hurt Core Web Vitals?

Applying loading="lazy" to the main above-the-fold image delays the browser's preload scanner from initiating the image network request until JavaScript parses layout coordinates. This artificially delays the Largest Contentful Paint (LCP) by 500ms to 2,000ms. Hero images should always have loading="eager" (or no loading attribute) and fetchpriority="high".

Why does missing width and height cause Cumulative Layout Shift (CLS)?

Before an image file downloads, the browser cannot determine its aspect ratio without explicit width and height HTML attributes. Once downloaded, the image suddenly expands, pushing surrounding text and buttons down and causing jarring layout jumps that ruin user experience and degrade Google's CLS metric.

What is the WHATWG sizes="auto" specification?

sizes="auto" is a modern browser specification that allows the browser to dynamically set the image layout width based on the rendered element width. However, according to the WHATWG HTML Living Standard, sizes="auto" must only be used on lazy-loaded images (loading="lazy") and requires explicit dimensions to prevent infinite layout loops.

Can Image SEO Auditor audit XML Image Sitemaps directly?

Yes! Simply pass the sitemap URL (e.g., https://example.com/sitemap.xml or https://example.com/sitemap.xml.gz) into the urls configuration. The plugin automatically uncompresses Gzip files, parses <image:image> entries, expands child sitemaps, and audits the discovered URLs up to maxSitemapPages.