Back to Cookbook

Image Squeeze

Compress, convert, and generate srcsets for every image in one pass

Images are half the weight of the average web page. This recipe takes a folder of images and outputs optimized WebP/AVIF versions at multiple breakpoint widths, with the responsive HTML picture elements ready to paste.

House RecipeWork2 min

PROMPT

Create a skill called "Image Squeeze". When I give you a directory of images or a website URL, process every image: compress it, convert to WebP and AVIF formats (keeping the original as a fallback), generate responsive variants at multiple widths (default: 400, 800, 1200, 1600 pixels), and output proper HTML `<picture>` elements with srcset, sizes, width, height, and loading="lazy" attributes. Let me configure quality targets (default: WebP 80, AVIF 65) and breakpoint widths. Generate a before/after report showing file sizes, format conversions, and total bytes saved. Organize output files with a clear naming convention (filename-400w.webp, filename-800w.avif, etc.).

How It Works

Point your Claw at a directory of images (or a live site URL), and it

processes everything: compresses, converts to modern formats with fallbacks,

generates responsive srcset variants, and outputs the HTML. Clients uploading

5MB photos straight from their camera? Handled.

What You Get

  • WebP and AVIF conversions with JPEG/PNG fallbacks
  • Responsive variants at configurable breakpoint widths (e.g., 400, 800, 1200, 1600)
  • Proper `` elements with srcset and sizes attributes
  • Lazy loading attributes on below-fold images
  • Width and height attributes to prevent CLS
  • Before/after file size comparison report
  • Total bytes saved across the project

Setup Steps

  1. Point your Claw at a folder of images or a staging site URL
  2. Optionally configure breakpoint widths (default: 400, 800, 1200, 1600)
  3. Optionally set a quality target (default: 80 for WebP, 65 for AVIF)
  4. Your Claw processes everything and outputs optimized files + HTML snippets

Tips

  • Run this on every project before launch — it typically saves 40-70% of image weight
  • AVIF is smaller than WebP but has less browser support, so both are generated with fallbacks
  • The CLS prevention (width/height attributes) alone can meaningfully improve Core Web Vitals
  • For existing sites, your Claw can crawl pages and replace images in-place
Tags:#web-design#performance#images#optimization