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.

主な機能

Core Web Vitals optimization for LCP and CLS prevention
Intelligent lazy loading and fetchpriority management
Modern format implementation (AVIF/WebP) with robust fallbacks
169 GitHub stars
Automated srcset and sizes configuration based on container layouts
Art direction patterns for device-specific image cropping

ユースケース

Implementing modern media strategies for high-traffic landing pages and blogs
Optimizing website performance by serving correctly sized images to mobile users
Eliminating Cumulative Layout Shift (CLS) by implementing aspect-ratio containers

概要

主な機能

Core Web Vitals optimization for LCP and CLS prevention
Intelligent lazy loading and fetchpriority management
Modern format implementation (AVIF/WebP) with robust fallbacks
169 GitHub stars
Automated srcset and sizes configuration based on container layouts
Art direction patterns for device-specific image cropping

ユースケース

Implementing modern media strategies for high-traffic landing pages and blogs
Optimizing website performance by serving correctly sized images to mobile users
Eliminating Cumulative Layout Shift (CLS) by implementing aspect-ratio containers