Optimize JPG / PNG images inside VS Code using the
leanoCLI — right-click in the Explorer, or run a command from the palette.
Fully local: the extension runs npx leano … 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 — Leano: 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
--jsonoutput). - Logs — Full CLI stdout/stderr go to the Leano output channel.
This is the same toolchain as the CLI and site — 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 leano. 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). |
| Leano: Optimize Images | Opens a folder picker. |
Folder output location
| Setting | CLI flag | Result |
|---|---|---|
leano.inPlace off (default) |
(none) | CLI writes to a sibling <folder>-optimized directory. |
leano.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 Leano in VS Code settings (leano.*).
| 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 leano <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.
Related
| Project | Role |
|---|---|
| Leano | CLI and project site. |
License
MIT — see LICENSE.