Responsive Image Pipeline

Name: Responsive Image Pipeline
Author: @perf_jules

PerformanceImagesOptimizationUpdated 2026-07-15

When to use: Optimizing image-heavy pages for Core Web Vitals — LCP, CLS, and bandwidth.

Install

npx skills add responsive-image-pipeline

Git Clone

git clone https://github.com/skillhub-community/responsive-image-pipeline.git

Repository Docs

Description

Scans your project for `<img>` tags and generates: multiple resolution variants, WebP + AVIF formats with `<picture>` fallbacks, base64 blur placeholders for instant loading, and explicit width/height attributes for CLS prevention.

Integrates with Next.js Image, sharp, or a standalone build script — one command and every image is production-optimized.

AI Hub

Need a model endpoint?

AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.

Open AI Hub

Metadata

Author@perf_jules

LicenseMIT

Version1.0.2

Dependencies0