Does it support modern image formats like AVIF and WebP?

Yes, it includes standardized patterns for the element to serve next-gen formats like AVIF and WebP while maintaining JPEG/PNG fallbacks for older browsers.

When should I use the 'sizes' attribute vs just 'srcset'?

The skill guides you to use 'sizes' whenever an image doesn't take up the full width of the viewport, allowing the browser to select the smallest possible file for the specific layout.

How does this skill help with Core Web Vitals?

The skill provides code patterns that eliminate Layout Shift (CLS) using explicit dimensions and improves Largest Contentful Paint (LCP) by correctly applying fetchpriority and eager loading to hero images.

Can this skill help with mobile-specific image cropping?

Yes, it includes templates for Art Direction using the element and media queries to serve different image crops or ratios for mobile and desktop screens.

Responsive Images

Name: Responsive Images
Author: jezweb

byjezweb

•

169

•

设计工具

Implements high-performance responsive image strategies including modern formats, art direction, and Core Web Vitals optimization.

This skill empowers Claude to implement production-grade responsive image solutions that prioritize web performance and SEO. It provides standardized patterns for using srcset and sizes attributes, modern formats like AVIF and WebP, and essential attributes for Core Web Vitals such as fetchpriority and aspect-ratio. Whether you are building high-impact hero sections, complex image grids, or optimizing for Largest Contentful Paint (LCP), this skill ensures your images are delivered efficiently across all device types while preventing layout shifts.

主要功能

01Core Web Vitals optimization for LCP and CLS prevention

02Intelligent lazy loading and fetchpriority management

03Modern format implementation (AVIF/WebP) with robust fallbacks

04169 GitHub stars

05Automated srcset and sizes configuration based on container layouts

06Art direction patterns for device-specific image cropping

使用场景

01Implementing modern media strategies for high-traffic landing pages and blogs

02Optimizing website performance by serving correctly sized images to mobile users

03Eliminating Cumulative Layout Shift (CLS) by implementing aspect-ratio containers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jezweb/claude-skills responsive-images

For use in Claude.ai and ChatGPT

Download Skill