Implement responsive images with srcset
SkillMediaresponsive-images is a skill for AI agents that reviews responsive images. It checks srcset, sizes attributes, and CSS layouts against a front-end checklist, useful when reviewing article images, cards, galleries, or any component rendered at multiple sizes across breakpoints.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an AI agent that supports skills.
Then ask your AI: use the Implement responsive images with srcset skill
What your AI can do with it
- Check srcset attributes on responsive images
- Verify sizes attributes are correct
- Review CSS layouts for images rendered at multiple sizes across breakpoints
- Review article images, cards, and galleries
- Apply a front-end checklist to image markup and CSS
Getting started
- Have an AI agent that supports skills.
- Add the responsive-images skill to the agent.
- Ask the agent to review a page or component containing responsive images.
- The agent checks both the markup and the CSS layout, since an incorrect sizes attribute can negate a good srcset.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/responsive-images/SKILL.md and read by ahel’s review.
Serving a 2000px image to a 400px phone screen wastes bandwidth and slows loading—srcset lets the browser download only the size it needs.
Quick Reference
- Use srcset to provide multiple image sizes
- Use sizes attribute to tell browser which size to download
- Browser selects optimal size based on viewport and DPR
- Can save 50-70% bandwidth on mobile devices
Check
Verify that images use srcset and sizes attributes for responsive delivery.
Fix
Implement responsive images with srcset for different screen sizes and resolutions.
Explain
Explain how responsive images deliver optimized versions based on device capabilities.
Code Review
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/en/rules/images/responsive-images
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- Use it when reviewing article images, cards, galleries, or any component rendered at multiple sizes across breakpoints.
- Why does it check CSS as well as markup?
- Because an incorrect sizes attribute can negate a perfectly good srcset, so both the markup and the CSS layout need review.
Advanced
- Item type
- skill
- Key
responsive-images-thedaviddias- Source
- github.com/thedaviddias/front-end-checklist