responsive-images
Implement performant responsive images with srcset, sizes, lazy loading, and modern formats (WebP, AVIF). Covers aspect-ratio for CLS prevention, picture element for art direction, and fetchpriority for LCP optimization. Use when adding images to pages, optimizing Core Web Vitals, preventing layout shift, implementing art direction, or converting to modern formats.
- Installs
- 137
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/oakoss/agent-skills --skill responsive-images- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads responsive-images automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Responsive Images
Overview
Responsive images serve the right image size and format based on viewport, device pixel ratio, and browser capabilities. Proper implementation prevents layout shift (CLS), optimizes Largest Contentful Paint (LCP), and reduces bandwidth by 50-70% with modern formats.
When to use: Any page with images, especially content images, hero images, product photos, and gallery layouts.
When NOT to use: Inline SVG icons, CSS background patterns, or canvas-rendered graphics.
Quick Reference
| Pattern | Approach | Key Points |
|---|---|---|
| Responsive sizing | srcset with width descriptors (w) + sizes | Browser selects optimal image for viewport and DPR |
| Modern formats | <picture> with AVIF, WebP, JPEG sources | AVIF saves 70%, WebP saves 50% vs JPEG |
| Art direction | <picture> with media queries | Different crops per viewport |
| LCP hero image | loading="eager" + fetchpriority="high" | Prioritize download for Core Web Vitals |
| Below-fold images | loading="lazy" | Defer until near viewport |
| Prevent CLS | width + height attributes | Browser reserves space before load |
| Fixed containers | object-fit: cover or contain | Maintain aspect ratio in constrained space |
| Format fallback | AVIF, WebP, JPEG source order | Best compression first, universal fallback last |
Recommended Image Sizes
| Use Case | Widths to Generate | Sizes Attribute |
|---|---|---|
| Full-width hero | 800w, 1200w, 1600w, 2400w | 100vw |
| Content width | 400w, 800w, 1200w | (max-width: 768px) 100vw, 800px |
| Grid cards (3-col) | 300w, 600w, 900w | (max-width: 768px) 100vw, 33vw |
| Sidebar thumbnail | 150w, 300w | 150px |
Loading Strategy
| Image Position | loading | fetchpriority | Why |
|---|---|---|---|
| Hero/LCP | eager | high | Optimize LCP, prioritize download |
| Above fold (not LCP) | eager | omit | Load normally |
| Below fold | lazy | omit | Defer until near viewport |
| Off-screen carousel | lazy | omit | Defer until interaction |
Format Comparison
| Format | Quality | File Size | Browser Support | Use Case |
|---|---|---|---|---|
| JPEG | Good | Medium | 100% | Photos, complex images |
| PNG | Lossless | Large | 100% | Logos, transparency |
| WebP | Excellent | Small | 96%+ | Modern browsers, photos |
| AVIF | Excellent | Smallest | 93%+ | Newest format, fallback required |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
| Omitting width and height attributes on img elements | Always include width and height to prevent CLS layout shift |
| Lazy loading the LCP hero image | Use loading="eager" and fetchpriority="high" for LCP images |
| Using density descriptors (1x, 2x) for variable-width images | Use width descriptors (400w, 800w) with a sizes attribute |
| Missing alt text on content images | Provide descriptive alt text; use alt="" only for decorative images |
| Serving only JPEG without modern format fallbacks | Use <picture> with AVIF and WebP sources falling back to JPEG |
Delegation
- Audit a page for responsive image issues and CLS problems: Use
Exploreagent to scan HTML for missing attributes, incorrect loading strategies, and format gaps - Convert all images on a page to use picture element with modern formats: Use
Taskagent to rewrite img tags with AVIF/WebP/JPEG fallback chain - Plan an image optimization pipeline for a multi-page site: Use
Planagent to design srcset breakpoints, format conversion workflow, and CDN integration
References
- srcset, sizes, and width descriptor patterns
- Picture element and art direction
- Modern image formats: WebP, AVIF, and conversion tools
- Lazy loading, fetchpriority, and LCP optimization
- Aspect ratio, object-fit, and CLS prevention
FAQ
What does the responsive-images skill do?
Implement performant responsive images with srcset, sizes, lazy loading, and modern formats (WebP, AVIF). Covers aspect-ratio for CLS prevention, picture element for art direction, and fetchpriority for LCP optimization. Use when adding images to pages, optimizing Core Web Vitals, preventing layout shift, implementing art direction, or converting to modern formats.
How do I install responsive-images?
Run npx skills add https://github.com/oakoss/agent-skills --skill responsive-images in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/responsive-images/ (personal) or .claude/skills/responsive-images/ (project).
Which AI agents can use responsive-images?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is responsive-images safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains responsive-images?
It is published by oakoss in oakoss/agent-skills. It has 137 recorded installs.
More from oakoss/agent-skills
ui-ux-polish
oakoss/agent-skills
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
playwright
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
coolify
oakoss/agent-skills
Coolify self-hosted PaaS for deploying applications, databases, and services via REST API and Git integration. Covers API authentication, deployment triggers, build packs (Nixpacks, Dockerfile, Compose), CI/CD with GitHub Actions webhooks, environment management, and Traefik proxy configuration. Use when deploying apps to Coolify, triggering deployments via API, configuring build packs, setting up GitHub Actions CI/CD pipelines, managing environment variables, or troubleshooting deployment failures.
application-security
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
find-skills
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
drizzle-orm
oakoss/agent-skills
Open the skill to read its SKILL.md instructions.
Popular media & creative skills
hyperframes
heygen-com/hyperframes
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
media-use
heygen-com/hyperframes
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
hyperframes-registry
heygen-com/hyperframes
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
hyperframes-creative
heygen-com/hyperframes
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.
ai-video-generation
101-skills/superpowers
Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse
ai-image-generation
101-skills/superpowers
Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image