← ClaudeAtlas

image-processinglisted

Process images in TypeScript/JavaScript using Bun's built-in Bun.Image API — resize, crop, rotate, flip, compress, convert formats (JPEG/PNG/WebP/HEIC/AVIF), generate blurry placeholders (LQIP/ThumbHash), and read metadata. Use when the user mentions image processing, resizing, cropping, downsizing, compressing, thumbnails, converting image formats, WebP/AVIF/HEIC conversion, image optimization, placeholder/LQIP/blur-up, EXIF/orientation, palette/indexed PNG, stripping metadata, or working with images from S3, file uploads, or clipboards in a Bun project. Also trigger on "make this image smaller", "thumbnail this", "convert to webp", "generate a blur placeholder", or any chained image pipeline task. Replaces sharp on Bun.
magnusrodseth/dotfiles · ★ 0 · Data & Documents · score 62
Install: claude install-skill magnusrodseth/dotfiles
# Image Processing with Bun.Image `Bun.Image` is Bun's built-in image pipeline (Bun 1.3.14+). Zero npm deps, no native addon build step, runs off the JS thread, faster than `sharp` in most benchmarks. API shape mirrors `sharp`: construct → chain → pick output format → `await` a terminal. ## Preflight - Confirm the project uses Bun (`bun --version` ≥ 1.3.14, or `package.json` `engines.bun` / a `bunfig.toml`). If on plain Node.js, recommend `sharp` instead — don't force a runtime switch just for images. - No imports needed — `Bun.Image` is a runtime global. - HEIC/AVIF: macOS/Windows only. Linux rejects with `ERR_IMAGE_FORMAT_UNSUPPORTED` — wrap with a WebP fallback (see REFERENCE.md). ## Quick start ```ts // Resize, compress, and convert in one chain. await Bun.file("photo.jpg") .image() .resize(800, 600, { fit: "inside" }) .webp({ quality: 80 }) .write("thumb.webp"); ``` The pipeline is lazy — **nothing runs until a terminal is awaited** (`.write`, `.bytes`, `.buffer`, `.blob`, `.toBase64`, `.dataurl`). ## Common workflows ### Generate a thumbnail ```ts await Bun.file("photo.jpg").image().resize(400, 400, { fit: "inside" }).webp({ quality: 80 }).write("thumb.webp"); ``` `fit: "inside"` preserves aspect ratio; default `fit: "fill"` stretches. ### Compress without resizing ```ts await Bun.file("hero.png").image().webp({ quality: 75 }).write("hero.webp"); ``` For screenshots / UI assets, indexed PNG is usually 3-5× smaller than WebP: ```ts await Bun.file("s