skills.rest
coastdigitalgroup
coastdigitalgroupOFFICIAL
Explore all skills by this author →
GitHub

responsive-images

Configure srcset and sizes for responsive, accessible image delivery across devices.

2|Updated Mar 21, 2026
Search Tags:#images#responsive#web-performance#srcset#art-direction#sizes
One-click install
npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill responsive-images-coastdigitalgroup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-images
Source: https://github.com/coastdigitalgroup/coastai-skills/tree/main/website-development/responsive-images
Command: npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill responsive-images-coastdigitalgroup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Responsive Images skill ensures websites deliver the most appropriate image assets based on device capabilities (screen resolution, viewport size) and connection speed, reducing bandwidth usage, improving page load times, and maintaining visual intent through art direction.

Core Features & Use Cases

  • Use srcset and sizes to serve the right resolution for mobile and desktop layouts.
  • Implement art direction with the <picture> element to swap crops or formats by breakpoint.
  • Modernize image delivery with AVIF/WebP fallbacks while preserving accessibility and layout stability.

Quick Start

Replace standard img usage with a srcset-based pattern (and use a picture element for art direction) to serve appropriate formats and prevent layout shifts.

Frequently Asked Questions about responsive-images

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I serve responsive images with srcset and sizes for mobile and desktop?▼

Serve responsive images using the srcset attribute to define image candidates by resolution and the sizes attribute to declare viewport-based slot widths. The browser selects the optimal asset, reducing bandwidth and improving page load times.

What's the best way to implement art direction for responsive web images?▼

Implement art direction for responsive images using the <picture> element. It swaps image crops or formats at defined breakpoints, ensuring the visual intent is maintained across different device viewports.

How do I add WebP and AVIF fallbacks for modern image formats?▼

Add modern format fallbacks using the <picture> element with multiple <source> tags. Specify AVIF or WebP in the type attribute and provide a standard image format in the fallback <img> tag for unsupported browsers.

Why do I need the sizes attribute when using srcset for resolution switching?▼

The sizes attribute is required with srcset because it tells the browser the rendered image width before downloading. Without it, the browser cannot accurately select the correct resolution image candidate for the user's viewport.

Can I prevent layout shift when loading responsive images?▼

Prevent layout shift when loading responsive images by explicitly defining image dimensions. The responsive images pattern preserves layout stability by ensuring the browser reserves the correct space during page render.

Related Skills

Explore More Software Engineering Skills→
dennislee928dennislee928
54

responsive-images

Implement responsive images with srcset, sizes, AVIF, WebP, and lazy loading.

Community
Advanced
davidbasilefilhodavidbasilefilho

optimize

Diagnose and fix web application UI performance issues with Core Web Vitals metrics.

Community
Advanced
PrasadTelasulaPrasadTelasula

responsive-design

Implement mobile-first responsive layouts using Tailwind CSS breakpoints.

Community
Advanced
mgd34msumgd34msu
4

imgix

Generate responsive image URLs with Imgix CDN transformations.

Community
Intermediate