WebP Converter for VS Code
Convert your images to WebP format with a visual quality preview, inspired by Android Studio's WebP converter.
Features
- Right-click Context Menu: Convert images directly from the file explorer
- Visual Preview: Side-by-side comparison of original and WebP images
- Quality Control: Adjust compression quality with a slider (1-100%)
- Lossless Mode: Option for lossless WebP compression
- Batch Conversion: Convert multiple images at once
- Real-time Updates: See file size changes as you adjust quality
- Universal Build: Single VSIX works on all platforms (macOS, Linux, Windows - x64 & ARM)
- Supported Formats: PNG, JPG, JPEG, GIF, BMP, TIFF
Installation
From VSIX Package
- Download
webp4vscode-x.x.x.vsix
- Install via command line:
code --install-extension webp4vscode-x.x.x.vsix
- Or install via VS Code: Extensions → ⋯ → Install from VSIX...
From Source
- Clone or download this repository
- Run
npm install to install dependencies
- Run
npm run build:vsix to build the extension
- The VSIX file will be created in the project directory
Usage
Single Image Conversion
- Right-click on any image file (PNG, JPG, GIF, etc.) in the VS Code Explorer
- Select "Convert to WebP" from the context menu
- Configure options in the setup dialog:
- Adjust quality (1-100%)
- Enable/disable lossless mode
- Choose preview mode or instant conversion
- Optionally delete original file after conversion
- Click Continue to proceed
Batch Conversion
- Select multiple images in the Explorer (Ctrl+Click or Shift+Click)
- Right-click and select "Convert to WebP"
- All selected images will be processed with the same settings
Preview Mode
- See side-by-side comparison of original and WebP
- Adjust quality per-image with real-time preview
- Navigate between images with Previous/Next buttons
- Click images to zoom for detailed comparison
How It Works
The extension uses WebAssembly (WASM) for cross-platform image processing:
- webp-wasm: WASM-based WebP encoder/decoder from Google's Squoosh project
- Pure JS decoders: pngjs, jpeg-js, omggif, utif, bmp-js for input format support
This approach enables a single universal VSIX that works on all platforms without native dependencies.
Technical Details
| Component |
Technology |
| WebP Encoding |
webp-wasm (WASM) |
| PNG Decoding |
pngjs (Pure JS) |
| JPEG Decoding |
jpeg-js (Pure JS) |
| GIF Decoding |
omggif (Pure JS) |
| TIFF Decoding |
utif (Pure JS) |
| BMP Decoding |
bmp-js (Pure JS) |
| Bundler |
esbuild |
| Bundle Size |
~190 KB + ~450 KB WASM |
Configuration
The extension works out of the box with sensible defaults:
- Default Quality: 75% (good balance of size and quality)
- Output Location: Same directory as the original file
- Naming: Original filename with
.webp extension
Requirements
No additional dependencies required! The extension bundles everything it needs.
Building from Source
# Install dependencies
npm install
# Build VSIX from scratch (clean, typecheck, bundle, package)
npm run build:vsix
Development
# Install dependencies
npm install
# Watch mode for development
npm run watch
# Run extension in debug mode
# Press F5 in VS Code
Known Limitations
- Large images (>10MB) may take a few seconds to process
- Animated GIFs will be converted to static WebP (first frame)
- WASM loading adds slight startup delay on first conversion
License
MIT
Credits
- Inspired by Android Studio's WebP converter interface
- Uses webp-wasm for WebP encoding
- Built with esbuild for fast bundling
| |
