How does this skill help with SEO and Core Web Vitals?

By implementing lazy loading, explicit width/height attributes, and modern formats, it improves LCP and CLS scores which are critical for search engine rankings.

Does it include backend transformation logic?

Yes, it provides implementation patterns for ImageSharp-based transformation services, including focal-point aware cropping and caching strategies.

Which frameworks are supported by this skill?

It currently supports Next.js (Image component), Nuxt (Image module), Blazor (custom components), and Vanilla HTML/CSS implementations.

Does it handle modern image formats like AVIF and WebP?

Yes, the skill prioritizes AVIF and WebP for superior compression while automatically providing JPEG fallbacks for older browsers.

Responsive Image Optimization

Name: Responsive Image Optimization
Author: melodic-software

bymelodic-software

•

内容管理

Designs high-performance, responsive image pipelines for modern web frameworks including Next.js, Nuxt, and Blazor.

This skill automates the creation of professional-grade image delivery systems, ensuring optimal performance through modern formats like AVIF and WebP, responsive breakpoints, and sophisticated lazy loading strategies. It provides framework-specific implementations for components and back-end transformation logic, helping developers significantly reduce Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) while minimizing bandwidth usage across all device types. Whether you are building a custom CMS or optimizing an existing frontend, this skill generates the necessary code for both delivery and server-side processing.

主要功能

01Multi-framework support for Next.js, Nuxt, Blazor, and Vanilla HTML/CSS

02Modern format negotiation including AVIF and WebP with fallbacks

0338 GitHub stars

04Automated responsive breakpoint and srcset configuration

05Backend image transformation and CDN caching logic design

06Performance-focused loading strategies (Lazy, Eager, and Priority)

使用场景

01Optimizing web performance to improve Google Core Web Vitals scores

02Building a custom CMS with automated image resizing and delivery

03Implementing complex art direction for responsive hero sections

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add melodic-software/claude-code-plugins optimize-images

For use in Claude.ai and ChatGPT

Download Skill