Image Optimization Pipeline

Optimize images for the web — generates responsive srcsets, converts to modern formats (AVIF, WebP), compresses without visible quality loss, and creates lazy-loading implementations for faster page loads.

This skill automates image optimization for web performance. It generates responsive image markup with proper srcset and sizes attributes, converts images to AVIF/WebP with JPEG fallbacks, implements lazy loading strategies, and creates build-time image processing pipelines using Sharp or Squoosh.

When to use

Use when images are slowing down your site, you need to implement responsive images, convert a library to modern formats, or set up automated image optimization in your build pipeline.

Examples

Responsive image setup

Generate proper srcset markup for responsive images

Set up responsive images with srcset for my blog — generate WebP and AVIF versions at 640, 768, 1024, and 1280px widths

Batch optimization script

Create a build script to optimize all images

Create a Sharp-based build script that auto-generates WebP versions, resizes to max 2000px, and compresses to under 200KB