What it does
Scans rendered page HTML for img tags and checks whether WordPress's automatic srcset/sizes generation is actually intact, since theme overrides, page builders, or hardcoded markup often strip it. Flags oversized images serving a single large file to mobile devices and any image missing loading="lazy" below the fold, which directly affects page weight and Core Web Vitals.
Install
This skill isn't packaged in an installable registry. It's a plain SKILL.md file you can copy directly. Copy it from the SKILL.md tab and save it at the path for your assistant:
Use it in your AI assistant
Claude Code
.claude/skills/responsive-image-auditor/ (or ~/.claude/skills/responsive-image-auditor/ for all projects)
GitHub Copilot (VS Code)
.github/skills/responsive-image-auditor/
OpenAI Codex
.codex/skills/responsive-image-auditor/
Cursor
.cursor/skills/responsive-image-auditor/ (or ~/.cursor/skills/responsive-image-auditor/ globally)
Compatibility
Any WordPress site. Works best when the agent can render or fetch actual page HTML output, not just editor content.
The complete SKILL.md for this skill:
---
name: responsive-image-auditor
description: Use when a user wants images checked for responsive delivery, mentions slow-loading images, missing srcset, or Core Web Vitals image issues.
---
# Responsive Image Auditor
## When to use
Pages are loading slowly on mobile, or the user wants to confirm WordPress's responsive image features are actually working rather than assumed to be.
## Procedure
1. Fetch the rendered HTML for the pages in scope (not just editor content, since builders and theme overrides can change final markup).
2. For each img tag, check whether srcset and sizes attributes are present and reference multiple actual image sizes, not just the original upload.
3. Flag images missing srcset entirely, usually a sign of a hardcoded <img> tag or a builder that bypassed WordPress's image handling.
4. Check for loading="lazy" on images below the fold, and flag its absence, or its presence on above-the-fold hero images where it can hurt perceived load speed.
5. Identify any image serving a file dramatically larger than its rendered display size, a common cause of unnecessary page weight.
6. Report findings per-page with the specific tag and attribute missing, so fixes can be targeted rather than site-wide guesswork.
## Guardrails
- Don't strip loading="lazy" from below-the-fold images or add it to the hero image without checking the layout, both are common regressions.
- Confirm srcset actually resolves to real, existing image sizes before flagging it as fixed.