Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →thedaviddias/responsive-images
Use when reviewing article images, cards, galleries, or any component rendered at multiple sizes across breakpoints. Check both the markup and the CSS layout because an incorrect `sizes` attribute can negate a perfectly good `srcset`.
Passed 23 of 23 test cases with the skill, and 22 of 23 without it.
1 fixed22 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
A test case the skill fixed. Same model, same prompt, with and without the skill.
An audit reveals a news homepage transfers a 2400px, 1.8MB JPEG banner to 375px mobile screens. What potential percentage range of bandwidth savings can typically be realized on mobile devices by implementing responsive image resolution switching?
| Checked | Without skill | With skill |
|---|---|---|
| Mentions potential bandwidth savings in the 50% to 70% range on mobile devices. | Missed | Passed |
The instructions your model reads when the skill loads.
Serving a 2000px image to a 400px phone screen wastes bandwidth and slows loading—srcset lets the browser download only the size it needs.
Verify that images use srcset and sizes attributes for responsive delivery.
Implement responsive images with srcset for different screen sizes and resolutions.
Explain how responsive images deliver optimized versions based on device capabilities.
Inspect image markup and component abstractions for srcset, sizes, and width/height handling. Flag pages that always ship desktop-sized assets to mobile, omit sizes, or generate variants that do not match the actual rendered layout.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/images/responsive-images
test cases passed, vs 22 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.