responsive-images
Installation
Summary
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
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,
Related skills
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Ktanstack-query
|
2.5Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktailwind-theme-builder
>
2.2Kfastapi
|
2.0Kcolor-palette
>
1.9K