skills.rest
dennislee928
dennislee928COMMUNITY
Explore all skills by this author →
WebsiteGitHub

responsive-images

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

54|Updated Nov 19, 2025
Search Tags:#performance#webp#lazy loading#responsive images#avif#srcset#cls
One-click install
npx skills add https://github.com/dennislee928/Ethic-Latex --skill responsive-images-dennislee928
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-images
Source: https://github.com/dennislee928/Ethic-Latex/tree/main/.claude/skills/responsive-images
Command: npx skills add https://github.com/dennislee928/Ethic-Latex --skill responsive-images-dennislee928

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 ensures images load quickly and display correctly across all devices, preventing layout shifts and improving Core Web Vitals.

Core Features & Use Cases

  • Responsive Sizing: Automatically serves the right image size for each viewport using srcset and sizes.
  • Modern Formats: Delivers images in efficient formats like AVIF and WebP with fallbacks.
  • Lazy Loading: Defers loading of offscreen images to speed up initial page load.
  • Art Direction: Provides different image crops for mobile vs. desktop using the <picture> element.
  • CLS Prevention: Ensures images reserve space to avoid layout shifts.
  • Use Case: Implement performant responsive images for your website's hero section, product cards, and content images to enhance user experience and SEO.

Quick Start

Implement a responsive image using srcset, sizes, and lazy loading for the hero image on your homepage.

Frequently Asked Questions about responsive-images

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

FAQPage Schema
How do I implement responsive images with srcset and sizes to speed up my website?▼

Implement responsive images by using the srcset and sizes attributes to automatically serve the appropriate image size for each viewport, optimizing delivery and improving page load speed across all devices.

What's the best way to serve AVIF and WebP formats with fallbacks for older browsers?▼

Serve modern image formats like AVIF and WebP by using the picture element to provide format fallbacks, ensuring efficient delivery for modern browsers while maintaining compatibility with older ones.

Why does my page layout shift when images load, and how do I prevent Cumulative Layout Shift?▼

Prevent Cumulative Layout Shift (CLS) by ensuring images have proper aspect ratios and dimensions, which reserves space on the page and stops layout shifts when images load.

How do I use lazy loading to defer offscreen images and speed up initial page load?▼

Use lazy loading techniques to defer the loading of offscreen images, which speeds up the initial page load by only downloading images when they are needed as the user scrolls.

When do I need different image crops for mobile versus desktop using the picture element?▼

Use the picture element for art direction when you need to serve different image crops for mobile versus desktop, ensuring the focal point of the image remains relevant across varying viewport sizes.

Related Skills

Explore More Design & Creative Skills→
vecearvecear

responsive-design-system

Define responsive design systems with Tailwind CSS breakpoints, fluid typography, and container queries.

Community
Advanced
nangyak4415-sudonangyak4415-sudo

optimize

Identify and fix web performance issues in frontend applications.

Community
Intermediate
flitzrrrflitzrrr
4

responsive-design

Implement mobile-first CSS with fluid grids, responsive images, and touch optimization.

Community
Intermediate
ProfPowellProfPowell
4

images

Generate WebP and AVIF variants, srcset, and validate HTML image markup.

Community
Advanced