ImageMagick for VS Code: Native image editing inside the editor

ImageMagick is a VS Code extension I built to remove the friction of context-switching to an external image tool every time a screenshot.png lands in a project folder. Right-click any image in the Explorer, and an in-editor panel opens with controls for resize, crop, rotate/flip, compress, and format conversion (JPEG · PNG · WebP · AVIF · GIF · TIFF · BMP). Every change updates a live preview within ~150 ms; the original is never overwritten, saving always goes through a file dialog with a smart default name (photo.optimized.webp).

Stack

• VS Code Extension API: webview panels, custom Explorer context menus, save dialogs
• Svelte 5 + Tailwind CSS v4: webview UI, runes-based reactive state ($state, $derived, $effect)
• TypeScript: strict, end-to-end, with a typed message protocol shared between host and webview
• esbuild: dual-target bundling (Node CJS for the extension host, ESM for the webview)
• magickwand.js: native ImageMagick-7 bindings for Node (the actual image engine)

Key features

• Three entry points: Explorer right-click, Command Palette, drag-and-drop into the panel
• Declarative editing pipeline (crop → rotate → flip → resize → format → quality), non-destructive, fully reversible, one-click reset
• Live size estimate alongside the preview so you can dial in quality vs. file size before saving
• Runtime encoder probing, the UI only offers formats the bundled binary can actually produce on your platform - Distributed as a 22 MB .vsix, ready to install offline

GitHub · VS Code Marketplace · MIT

Every web and app developer ships images, and every project ends up needing the same five operations on them: resize, crop, rotate, compress, convert. The tools that exist for this all have the same problem, they live somewhere else.

• Online optimizers: (TinyPNG, Squoosh, Compressor.io) require uploading the file. That's a non-starter for client work, NDA assets, or anything you'd rather not hand to a third party. They also assume you have an internet connection, and they break the flow: download the optimized result, find the right folder, drop it in.
• Desktop apps: (Photoshop, Affinity, ImageOptim) are overkill for "make this 2 MB hero image into a 200 KB WebP." Switching apps means losing the project context, which folder the asset belongs in, what the rest of the codebase calls it, what dimensions the layout actually needs.
• CLI tools (magick, cwebp, sharp scripts) work, but only if you remember the flags. Quality 80? 85? -resize 50% or -resize 50x50? It's the kind of thing you re-Google every time. The result is the same loop, several times a week: stop coding, switch apps, optimize, switch back. It's small individually and exhausting in aggregate, and for sensitive assets there's no good answer at all.

A VS Code extension that does it all in-place, locally, without leaving the editor.

• Right-click → optimize: The image you're working on is already in the file tree; one click opens the editor panel with the file loaded.
• Live preview with size estimate: Adjust quality, format, or dimensions and watch both the pixels and the resulting file size update in real time, so you stop guessing whether 75% quality is "good enough."
• Fully local: ImageMagick runs natively inside the extension host. Nothing is uploaded, nothing leaves the machine, and it works offline.
• Originals stay safe: Saving always goes through a file dialog with <name>.optimized.<ext> pre-filled, so accidental overwrites aren't possible. The five operations every project needs, where every project already is.