webpocalypse-vscode
Optimize JPG / PNG images inside VS Code using the webpocalypse CLI — right-click in the Explorer, or run a command from the palette.
Fully local: the extension runs npx webpocalypse … in your workspace. No separate server and no API keys.
What it does
- Explorer — Right-click a
.jpg / .jpeg / .png → Optimize Image, or a folder → Optimize Folder.
- Command Palette — Webpocalypse: Optimize Images opens a folder picker (same optimization as a folder right-click).
- Progress — A short notification while work runs, then a summary with file count and approximate total size savings (from CLI
--json output).
- Logs — Full CLI stdout/stderr go to the Webpocalypse output channel.
This is the same toolchain as the CLI and GitHub Action — batch conversion with sharp, optional WebP / AVIF, resize caps, and preserved directory layout.
Requirements
| Requirement |
Notes |
| VS Code (or compatible editor) |
^1.85.0 — see engines in package.json. |
| Node.js + npm |
Used for npx webpocalypse. Node ≥ 18 matches the CLI. |
| Network (first run) |
npx may download the package; npx --yes avoids interactive prompts. |
Works on Linux, macOS, and Windows (same as the CLI and sharp).
Usage
Explorer
| Target |
Menu item |
Behaviour |
.jpg / .jpeg / .png |
Optimize Image |
Runs the CLI on a temporary folder containing that file, then merges outputs into the file’s parent directory (the CLI only accepts directories). |
| Any folder |
Optimize Folder |
Runs the CLI on that path directly. |
Command Palette
| Command |
When no file/folder is passed from Explorer |
| Optimize Image |
Opens an image file picker. |
| Optimize Folder |
Opens a folder picker (same as below). |
| Webpocalypse: Optimize Images |
Opens a folder picker. |
Folder output location
| Setting |
CLI flag |
Result |
webpocalypse.inPlace off (default) |
(none) |
CLI writes to a sibling <folder>-optimized directory. |
webpocalypse.inPlace on |
--in-place |
CLI replaces the folder contents safely (temp dir + rollback on failure). |
For single-file optimization, inPlace controls where merged outputs are read from after the CLI run (in-place output lives in the temp dir; otherwise the extension merges from <temp>-optimized).
Settings
All settings live under Webpocalypse in VS Code settings (webpocalypse.*).
| Setting |
Default |
Description |
quality |
80 |
Compression quality 1–100 (-q). |
format |
webp |
webp | avif | both (-f). |
maxWidth |
— |
Optional max width in px (--max-width). |
maxHeight |
— |
Optional max height in px (--max-height). |
lossless |
false |
Lossless compression (--lossless). |
inPlace |
false |
Folder runs: write into the same directory; single-file runs: merge from in-place temp output. |
How the CLI is invoked
The extension runs (conceptually):
npx --yes webpocalypse <path> --json [options…]
Options are derived from your settings. Structured results are parsed from the last JSON object line on stdout (the CLI also prints a human-readable table before that line).
Development
npm install
npm run compile # emit out/
npm run watch # tsc --watch
Open this repo in VS Code and Run Extension (F5) to launch an Extension Development Host with your local build.
VSIX (local install)
npm install -g @vscode/vsce # once
npm run compile
vsce package # produces .vsix
Install the .vsix via Extensions → … → Install from VSIX….
Publish to the Marketplace
Use @vscode/vsce with a publisher account and a Personal Access Token scoped to Marketplace (Manage). See the Publishing Extensions guide.
License
MIT — see LICENSE.
