from front-end-checklist72,780
Checks image assets, markup, and build/CDN transforms to ensure images are served at appropriate display sizes using srcset and sizes to reduce wasted bandwidth
This skill codifies best practices for serving images at the correct display size. It guides an agent or reviewer through auditing image files, markup, and build/CDN pipelines to find oversized images that waste bandwidth, demonstrates how to generate responsive variants, and provides concrete before/after HTML examples. The focus is on measurable performance wins (Lighthouse 'Properly size images' savings) and repeatable fixes across components and templates.
Use this skill during performance reviews, PR code reviews, or site audits when images appear in Lighthouse or field metrics as a top contributor to load size. It's especially useful for sites with large hero images, responsive layouts, or image-heavy content where improper srcset/sizes use causes over-download on mobile.
references/rule.md with implementation tips and framework examplesLikely compatible with general-purpose agents that can run shell commands and inspect repo files (Copilot/Codex/Claude Code/agents that support file-level code review).
This skill has not been reviewed by our automated audit pipeline yet.
