/optimize-images

Description

Design a responsive image optimization pipeline for web delivery.

Install

Add the repository(one-time)

/plugin marketplace add melodic-software/claude-code-plugins

Install the plugin

/plugin install content-management-system@melodic-software

Prompt Preview

# Optimize Images Command

Design a responsive image optimization pipeline for web delivery.

## Usage



## Framework Options

- **next**: Next.js Image component
- **nuxt**: Nuxt Image module
- **blazor**: Blazor component with srcset
- **vanilla**: Plain HTML/CSS implementation

## Workflow

### Step 1: Parse Arguments

Extract framework and format preferences from command.

### Step 2: Invoke Skills

Invoke relevant skills:

- `image-optimization` - Responsive patterns
- `cdn-media-delivery` - CDN integration

### Step 3: Design Responsive Strategy

**Breakpoint Configuration:**



### ...

Links

GitHub Stats

0 forks

Updated 4 hours ago

Other plugins with /optimize-images

/optimize-images

Optimize all images in the project for web performance. Convert images to modern formats (WebP, AVIF) with fallbacks. Replace img tags with Next.js Image component for automatic optimization. Add proper width/height attributes to prevent layout shift. Implement lazy loading for below-fold images. Compress existing images using sharp or imagemin. Create responsive image sets with srcset. Add priority loading for hero images. Configure next.config.ts for image optimization. Measure performance improvements with Lighthouse. Reference frontend-development-agent for Next.js Image API expertise. Document image optimization guidelines.

larouex-fullstack-builder

/optimize-images

larouex-fullstack-builder

/optimize-images

Optimize and implement Next.js Image components

nextjs-core