ImageMagick for VS Code 0.4.0: optimization presets
0.4.0 of my ImageMagick VS Code extension adds saved optimization presets and a one-click optimize from the Explorer, encoded in the extension host with no panel and no uploads.
My ImageMagick extension lets you resize, crop, rotate, compress, and convert images inside VS Code, with a live preview and no uploads. The engine is ImageMagick compiled to WebAssembly.
Until now, every image went through the same route: open the panel, set the format, drag the quality slider, set a size, hit Save As. Fine once. Tedious for the fortieth icon in a folder, when the answer is always "WebP, quality 80, strip the metadata."
0.4.0 fixes that.
Presets
A preset is a saved pipeline: a format, a quality, a maximum long edge, whether to strip metadata, and whether the result is written alongside the source or over it. Three ship by default (Web WebP, Compress JPEG, PNG to WebP). You can add your own in the imagemagick.presets setting, or build one visually: open an image, set it up the way you like, and hit the new Save as preset button in the panel.
One-click optimize
Right-click any image in the Explorer, or select a dozen and right-click, and choose Optimize with Preset. A list of your presets appears. Pick one, and the optimized files are written straight to disk.
| the Optimize with Preset entry in the Explorer right-click menu | the Optimize with Preset entry in the Explorer right-click menu select the preset |
|---|---|
 |
 |
Every row in that list spells out exactly what it will do, because the one setting that can lose your original file is the one you most need to see:
Web WebP webp · max 1600px · quality 80 · strip metadata · saves a copy
Compress JPEG jpg · quality 75 · strip metadata · saves a copy
My Icons webp · quality 70 · OVERWRITES SOURCE
the Image changed format from png to webp and redused the size from 327.11KB to 29.19KB
No panel opens. No tab. No dialog. You get a progress notification and a count when it finishes.
The part that made it possible
The interesting constraint: the extension host is a Node process, and crashing it takes VS Code with it. An earlier version of this extension did exactly that, with a native addon faulting the host at 0xC0000005. That is why the image engine lives in the webview, sandboxed, where a crash costs you a panel and nothing more.
A headless one-click optimize has no webview to hide behind. The obvious workaround was an invisible one, spun up per run, which is slow and ugly.
It turned out to be unnecessary. @imagemagick/magick-wasm is pure WebAssembly, not a native addon. It has no C++ boundary to fault across, so it runs in the extension host safely, on the exact same magick.wasm binary the webview already loads. The one-click path encodes in-process, no window, no round trip. The thing I assumed was the hard part was already solved by a decision made for an unrelated reason two versions ago.
Next
- Strip metadata as a standalone action
- Before and after size with percent saved
- Compare slider in the preview
- Responsive size set from one source
- Apply a preset from inside the panel, not just from the Explorer
- Watermark and text overlay
- Auto-optimize on save
More soon.
Building scalable systems and developer-first tools. Lead Software Engineer at DSRPT.
Frequently asked
-
A saved pipeline: an output format, a quality level, an optional maximum long edge, whether to strip metadata, and whether to write a copy alongside the source or overwrite it. Save it once, then apply it to any image with two clicks.
-
Right-click an image in the VS Code Explorer (or select several and right-click) and choose "Optimize with Preset". A list of your presets drops down from the top of the window. Pick one and the optimized files are written to disk. The extension cannot list your presets directly in the right-click menu, because VS Code requires every menu item to be declared statically at install time.
-
Two ways. Open an image in the panel, set the format, quality, and size you want, and click "Save as preset". Or edit the imagemagick.presets array in your VS Code settings directly.
-
Only if the preset says so. By default every preset writes a copy alongside the source, like photo.optimized.webp. A preset set to overwrite is labelled OVERWRITES SOURCE in capitals in the picker, so you always see it before you commit.
-
Select as many images as you like in the Explorer, right-click, and pick a preset. Each one is encoded in turn with a progress notification, and you get a count at the end. Files that fail are logged to the ImageMagick output channel instead of stopping the batch.
-
No. It encodes in the extension host using the same ImageMagick WebAssembly binary the editor panel uses. Nothing leaves your machine and no editor tab opens.
-
No. PNG, GIF, BMP, and TIFF are lossless, so the quality setting is ignored for them. The preset picker hides the quality number on those presets rather than showing a value that does nothing.