DiscordSign up
SKILLS.SH

responsive-images

Performant responsive images with srcset, sizes, lazy loading, and modern formats. Covers srcset width descriptors, sizes attribute patterns, and lazy loading rules optimized for Core Web Vitals (LCP, CLS) Includes picture element patterns for art direction, WebP/AVIF fallback chains, and fetchpriority configuration for hero images Provides six documented error patterns with fixes: missing width/height attributes, lazy-loading LCP images, density descriptors, missing alt text, aspect ratio distortion, and format selection Quick reference tables for common sizes patterns, aspect ratios, object-fit values, and image format comparisons

INSTALLATION
npx skills add https://github.com/jezweb/claude-skills --skill responsive-images
Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

Responsive Images

Status: Production Ready ✅

Last Updated: 2026-01-14

Standards: Web Performance Best Practices, Core Web Vitals

Quick Start

Basic Responsive Image

<img

  src="/images/hero-800.jpg"

  srcset="

    /images/hero-400.jpg 400w,

    /images/hero-800.jpg 800w,

    /images/hero-1200.jpg 1200w,

    /images/hero-1600.jpg 1600w

  "

  sizes="(max-width: 640px) 100vw,

         (max-width: 1024px) 90vw,

         1200px"

  alt="Hero image description"

  width="1200"

  height="675"

  loading="lazy"

/>

Hero Image (LCP)

<img

  src="/images/hero-1200.jpg"

  srcset="

    /images/hero-800.jpg 800w,

    /images/hero-1200.jpg 1200w,

    /images/hero-1600.jpg 1600w

  "

  sizes="100vw"

  alt="Hero image"

  width="1600"

  height="900"

  loading="eager"

  fetchpriority="high"

/>

Configuration

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

Lazy Loading Rules

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

Common Patterns

Full-Width Responsive Image

<img

  src="/images/banner-1200.jpg"

  srcset="

    /images/banner-600.jpg 600w,

    /images/banner-1200.jpg 1200w,

    /images/banner-1800.jpg 1800w,

    /images/banner-2400.jpg 2400w

  "

  sizes="100vw"

  alt="Full width banner"

  width="2400"

  height="800"

  loading="lazy"

  class="w-full h-auto"

/>

Grid Card Image (3 columns)

<img

  src="/images/card-600.jpg"

  srcset="

    /images/card-300.jpg 300w,

    /images/card-600.jpg 600w,

    /images/card-900.jpg 900w

  "

  sizes="(max-width: 768px) 100vw,

         (max-width: 1024px) 50vw,

         33vw"

  alt="Card image"

  width="900"

  height="600"

  loading="lazy"

  class="w-full h-auto"

/>

Fixed Aspect Ratio Container

<div class="aspect-[16/9] overflow-hidden">

  <img

    src="/images/video-thumbnail-800.jpg"

    srcset="

      /images/video-thumbnail-400.jpg 400w,

      /images/video-thumbnail-800.jpg 800w,

      /images/video-thumbnail-1200.jpg 1200w

    "

    sizes="(max-width: 768px) 100vw, 800px"

    alt="Video thumbnail"

    width="800"

    height="450"

    loading="lazy"

    class="w-full h-full object-cover"

  />

</div>

Modern Formats (WebP + AVIF)

<picture>

  <source

    srcset="

      /images/hero-800.avif 800w,

      /images/hero-1200.avif 1200w,

      /images/hero-1600.avif 1600w

    "

    sizes="100vw"

    type="image/avif"

  />

  <source

    srcset="

      /images/hero-800.webp 800w,

      /images/hero-1200.webp 1200w,

      /images/hero-1600.webp 1600w

    "

    sizes="100vw"

    type="image/webp"

  />

  <img

    src="/images/hero-1200.jpg"

    srcset="

      /images/hero-800.jpg 800w,

      /images/hero-1200.jpg 1200w,

      /images/hero-1600.jpg 1600w

    "

    sizes="100vw"

    alt="Hero image"

    width="1600"

    height="900"

    loading="eager"

    fetchpriority="high"

  />

</picture>

Art Direction (Different Crops)

<picture>

  <source

    media="(max-width: 640px)"

    srcset="

      /images/product-portrait-400.jpg 400w,

      /images/product-portrait-800.jpg 800w

    "

    sizes="100vw"

  />

  <source

    media="(min-width: 641px)"

    srcset="

      /images/product-landscape-800.jpg 800w,

      /images/product-landscape-1200.jpg 1200w,

      /images/product-landscape-1600.jpg 1600w

    "

    sizes="(max-width: 1024px) 90vw, 1200px"

  />

  <img

    src="/images/product-landscape-1200.jpg"

    alt="Product image"

    width="1200"

    height="675"

    loading="lazy"

  />

</picture>

Error Prevention

Always Include Width and Height

Problem: Layout shift when images load (poor CLS score)

<!-- ❌ WRONG - causes layout shift -->

<img src="/image.jpg" alt="Image" loading="lazy" />

<!-- ✅ CORRECT - browser reserves space -->

<img

  src="/image.jpg"

  alt="Image"

  width="800"

  height="600"

  loading="lazy"

/>

Source: Web.dev - Optimize CLS

Don't Lazy Load LCP Images

Problem: Delayed LCP, poor Core Web Vitals score

<!-- ❌ WRONG - delays LCP -->

<img

  src="/hero.jpg"

  alt="Hero"

  loading="lazy"

/>

<!-- ✅ CORRECT - prioritizes LCP -->

<img

  src="/hero.jpg"

  alt="Hero"

  loading="eager"

  fetchpriority="high"

/>

Source: Web.dev - Optimize LCP

Use Width Descriptors (w), Not Density (x)

Problem: Browser can't choose optimal image for viewport

<!-- ❌ WRONG - only considers DPR -->

<img

  src="/image.jpg"

  srcset="/image.jpg 1x, /image@2x.jpg 2x"

  alt="Image"

/>

<!-- ✅ CORRECT - considers viewport + DPR -->

<img

  src="/image-800.jpg"

  srcset="

    /image-400.jpg 400w,

    /image-800.jpg 800w,

    /image-1200.jpg 1200w

  "

  sizes="(max-width: 768px) 100vw, 800px"

  alt="Image"

  width="800"

  height="600"

/>

Exception: Density descriptors are appropriate for fixed-size images like logos.

Always Include Alt Text

Problem: Fails accessibility, SEO, and screen readers

<!-- ❌ WRONG -->

<img src="/product.jpg" />

<!-- ✅ CORRECT - descriptive alt text -->

<img src="/product.jpg" alt="Red leather messenger bag with brass buckles" />

<!-- ✅ CORRECT - decorative images use empty alt -->

<img src="/decorative-line.svg" alt="" role="presentation" />

Aspect Ratio with object-fit

Problem: Image stretches or squashes when container size differs from image dimensions

<!-- ❌ WRONG - image distorts -->

<div class="w-full h-64">

  <img src="/image.jpg" alt="Image" class="w-full h-full" />

</div>

<!-- ✅ CORRECT - maintains aspect ratio -->

<div class="w-full h-64">

  <img

    src="/image.jpg"

    alt="Image"

    class="w-full h-full object-cover"

  />

</div>

Quick Reference

Sizes Attribute Patterns

<!-- Full width -->

sizes="100vw"

<!-- Content width (max 800px) -->

sizes="(max-width: 768px) 100vw, 800px"

<!-- Sidebar (fixed 300px) -->

sizes="300px"

<!-- 2-column grid -->

sizes="(max-width: 768px) 100vw, 50vw"

<!-- 3-column grid -->

sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"

<!-- Responsive with max-width -->

sizes="(max-width: 640px) 100vw, (max-width: 1024px) 90vw, 1200px"

Common Aspect Ratios

Ratio

CSS

Use Case

16:9

aspect-[16/9]

Video thumbnails, hero images

4:3

aspect-[4/3]

Standard photos

3:2

aspect-[3/2]

DSLR photos

1:1

aspect-square

Profile pictures, Instagram-style

21:9

aspect-[21/9]

Ultrawide banners

object-fit Values

Value

Behavior

Use Case

cover

Fill container, crop edges

Card images, backgrounds

contain

Fit inside, preserve all content

Logos, product photos

fill

Stretch to fill

Avoid unless necessary

scale-down

Smaller of contain or original size

Mixed content sizes

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

97%+

Modern browsers, photos

AVIF

Excellent

Smallest

90%+

Cutting-edge, fallback required

Recommended Strategy: AVIF → WebP → JPEG fallback using <picture>

Resources

Token Efficiency: ~70% savings by preventing trial-and-error with srcset/sizes syntax

Errors Prevented: 6 common responsive image issues documented above

BrowserAct

Let your agent run on any real-world website

Bypass CAPTCHA & anti-bot for free. Start local, scale to cloud.

Explore BrowserAct Skills →

Related skills

frontend-design
3/3

Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Guides design thinking before coding: establish bold aesthetic direction (brutalist, maximalist, retro-futuristic, luxury, playful, etc.) with clear purpose, tone, and differentiation Emphasizes typography, color theming, motion, spatial composition, and textural details as core design pillars; uses CSS variables, animations, and scroll-triggered effects Generates working, functional code (HTML/CSS/JS, React, Vue) that matches implementation complexity to aesthetic vision: elaborate code for maximalist designs, restrained precision for minimalist ones Explicitly avoids generic patterns: overused fonts (Inter, Roboto), clichéd color schemes (purple gradients), predictable layouts, and cookie-cutter component design

Verified authoranthropics
SKILLS.SH
422K139K
2026-05-22
web-design-guidelines
2/3

Audit UI code against Vercel's Web Interface Guidelines for design and accessibility compliance. Fetches the latest guidelines from a remote source before each review, ensuring rules stay current Accepts file paths or patterns as arguments; prompts for files if none provided Outputs findings in a terse file:line format for quick scanning and remediation Covers design, accessibility, and UX best practices as defined in the guidelines repository

Verified authorvercel-labs
SKILLS.SH
318K26.9K
2026-05-22
vercel-composition-patterns
3/3

React composition patterns for scaling components and avoiding boolean prop proliferation. Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decisions React 19 specific guidance on removing forwardRef and using use() instead of useContext()

Verified authorvercel-labs
SKILLS.SH
172K26.9K
2026-05-22
ui-ux-pro-max
2/3

Comprehensive design intelligence for web and mobile UI/UX across 10 technology stacks. Includes 50+ design styles, 161 color palettes, 57 font pairings, and 99 UX guidelines with priority-ranked rules for accessibility, touch interaction, performance, and responsive layout Searchable database with design-system generation that recommends patterns, colors, typography, and effects based on product type and keywords; supports light/dark mode and platform-specific guidance (iOS HIG, Material Design, React Native) Covers 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, HTML/CSS) with implementation-specific best practices and performance optimization rules Provides 25 chart types, 161 product type patterns, and pre-built templates for websites, landing pages, dashboards, admin panels, e-commerce, SaaS, portfolios, blogs, and mobile apps with component libraries (buttons, modals, forms, tables, cards, charts)

nextlevelbuilder
SKILLS.SH
158K81.3K
2026-05-22

Stop writing automation&scrapers

Install the CLI. Run your first Skill in 30 seconds. Scale when you're ready.

Start free
free · no credit card