skills.rest
evolv3ai
evolv3aiCOMMUNITY
Explore all skills by this author →
GitHub

responsive-images

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

3|Updated Nov 14, 2025
Search Tags:#webp#lazy loading#web performance#responsive images#image optimization#avif#srcset
One-click install
npx skills add https://github.com/evolv3ai/claude-skills-archive --skill responsive-images-evolv3ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-images
Source: https://github.com/evolv3ai/claude-skills-archive/tree/main/skills/responsive-images
Command: npx skills add https://github.com/evolv3ai/claude-skills-archive --skill responsive-images-evolv3ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and templates (resource) and rules (resource) components.

What problem does it solve?

This Skill helps you implement performant responsive images, ensuring optimal loading times and visual quality across all devices by leveraging modern formats, lazy loading, and correct attribute usage.

Core Features & Use Cases

  • Responsive Sizing: Use srcset and sizes to serve appropriately sized images for different viewports and screen densities.
  • Modern Formats: Automatically provide WebP and AVIF versions with fallbacks for broader browser compatibility and smaller file sizes.
  • Lazy Loading: Defer loading of offscreen images to improve initial page load performance.
  • CLS Prevention: Ensure images have defined dimensions or aspect ratios to prevent layout shifts.
  • Art Direction: Use the <picture> element to serve different image crops or compositions based on media queries.
  • Use Case: When adding a hero image to your homepage, use this skill to generate srcset and sizes attributes, include AVIF/WebP versions, and set loading="eager" with fetchpriority="high" for optimal LCP.

Quick Start

Implement a responsive image using the responsive-images skill for the image located at '/images/hero.jpg', ensuring it's optimized for all devices.

Frequently Asked Questions about responsive-images

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

FAQPage Schema
How do I optimize images for Core Web Vitals and prevent layout shifts?▼

Serve responsive images using srcset and sizes attributes to deliver appropriately scaled image files for different viewport widths and screen densities. This mechanism stops oversized downloads on mobile devices and guarantees visual fidelity without wasting bandwidth.

What is the best way to implement WebP and AVIF formats with browser fallbacks?▼

Implement WebP and AVIF with fallbacks using the <picture> element to serve modern formats automatically. This approach minimizes file sizes for supported browsers while ensuring broader compatibility through traditional image format fallbacks.

How do I optimize a hero image for LCP using fetchpriority?▼

Optimize hero images for LCP by setting loading="eager" and fetchpriority="high" to prioritize their fetch. Combine this with srcset and AVIF formats to ensure the largest contentful paint element loads instantly without rendering delays.

When do I need to use the picture element for art direction?▼

Use the <picture> element for art direction when you need to serve different image crops or compositions based on media queries. This technique ensures optimal focal points and visual framing across varying viewport widths and device orientations.

Does lazy loading work with responsive srcset images?▼

Yes, lazy loading works with responsive srcset images by deferring offscreen image downloads until they approach the viewport. This improves initial page load performance while ensuring appropriately scaled images are served when rendering occurs.

Related Skills

Explore More Design & Creative Skills→
PrasadTelasulaPrasadTelasula

responsive-design

Implement mobile-first responsive layouts using Tailwind CSS breakpoints.

Community
Advanced
Gekkos-techGekkos-tech
4

core-web-vitals

Optimize LCP, INP, and CLS metrics for web pages.

Official
Intermediate
SamuelSahaSamuelSaha

Performance Optimization

Optimize frontend performance with Core Web Vitals, lazy loading, and code splitting.

Community
Advanced
dralgorhythmdralgorhythm
111

visual-assets

Automate visual asset creation, optimization, and organization across SVG, PNG, WebP, and AVIF formats.

Community
Advanced