How does it improve SEO and search rankings?

It directly optimizes Largest Contentful Paint (LCP) and prevents Cumulative Layout Shift (CLS), which are critical Core Web Vitals metrics used by Google for ranking.

What are blur placeholders and how are they implemented?

Blur placeholders show a low-resolution version of an image while the full version loads. This skill shows how to use automatic static blurs or generate blurDataURLs for remote images.

Does this skill work with remote images?

Yes, it includes specific patterns for configuring Next.js remotePatterns and integrating with external CDNs like Cloudinary or Imgix using custom loaders.

Does it support modern image formats like AVIF?

Absolutely. The skill provides the necessary configuration for next.config.js to enable AVIF and WebP, which can reduce image file sizes by 30-50%.

Can I use this for Art Direction on different screen sizes?

Yes, the skill includes patterns for swapping different image assets based on breakpoints using media queries or CSS-driven responsive techniques.

Image Optimization & Performance

Name: Image Optimization & Performance
Author: yonatangross

byyonatangross

•

デザインツール

Optimizes web image performance and user experience using Next.js 16 patterns, modern formats like AVIF/WebP, and responsive loading strategies.

This skill provides production-ready image optimization patterns specifically for Next.js and modern web applications to improve Core Web Vitals, particularly Largest Contentful Paint (LCP). It automates the implementation of responsive image sizing, lazy loading, and blur placeholders while ensuring cross-browser compatibility through modern formats like AVIF and WebP. By following these established best practices and avoiding common anti-patterns like layout shifts, developers can significantly reduce bandwidth and enhance perceived performance across all device types.

主な機能

01Advanced CDN integration and remote image pattern matching

0269 GitHub stars

03Responsive image sizing configurations for Next.js Image component

04Largest Contentful Paint (LCP) optimization via priority loading patterns

05Dynamic blur-up placeholders for improved perceived performance

06Automated AVIF/WebP format conversion and next.config.js setup

ユースケース

01Implementing responsive hero banners with art direction across devices

02Improving SEO rankings by fixing Core Web Vitals like LCP and CLS

03Optimizing e-commerce product galleries for faster mobile load times

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit image-optimization

For use in Claude.ai and ChatGPT

Download Skill