Does it support modern image formats?

Yes, it provides implementation patterns for AVIF and WebP using the element, ensuring the smallest possible file sizes with proper browser fallbacks.

How does this skill improve SEO?

It optimizes Core Web Vitals (LCP and CLS) by ensuring images load efficiently and don't cause layout shifts, which are direct ranking factors for search engines.

Can it help with mobile-specific image versions?

Yes, it includes art direction patterns that allow you to serve different image crops or aspect ratios based on the user's screen size using media queries.

What is the difference between lazy and eager loading in this skill?

The skill applies 'eager' and 'high' fetchpriority to hero (LCP) images to speed up visual rendering, while using 'lazy' for below-the-fold content to save bandwidth.

Responsive Image Optimizer

Name: Responsive Image Optimizer
Author: evolv3ai

byevolv3ai

0•

设计工具

Implements performant, responsive images using modern standards like WebP, AVIF, and srcset to maximize Core Web Vitals scores.

The Responsive Image Optimizer skill equips Claude with the technical patterns necessary to handle complex image delivery tasks. It focuses on the intersection of design and performance, providing battle-tested boilerplate for responsive hero sections, grid layouts, and art direction. By strictly following Web Performance Best Practices, it helps developers eliminate Cumulative Layout Shift (CLS) and improve Largest Contentful Paint (LCP) through the intelligent use of lazy loading, fetchpriority, and aspect-ratio CSS. This skill is essential for frontend developers looking to automate the verbose syntax of modern responsive images while ensuring high SEO rankings and accessibility.

主要功能

01Optimization of LCP via fetchpriority and eager loading strategies

02CLS prevention through aspect-ratio and explicit dimension attributes

03Automated srcset and sizes attribute generation for diverse viewport needs

04Art direction patterns for mobile-specific image cropping and swapping

050 GitHub stars

06Modern format implementation including WebP and AVIF with legacy fallbacks

使用场景

01Standardizing image loading and performance rules across a React or Tailwind project

02Implementing complex image grids for e-commerce galleries and portfolios

03Optimizing Core Web Vitals and page speed for SEO-critical landing pages

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive responsive-images

For use in Claude.ai and ChatGPT

Download Skill