Vantage Image Compare
Synchronized multi-image comparison for Visual Studio Code
Compare two or more images side-by-side in an adaptive mosaic grid with synchronized zoom and pan, pixel-level difference highlighting, and an overlay mode for rapid A/B switching — all without leaving VS Code. Can also be used to view single images with all the same zoom and pan controls.
✨ Features
- View a single image or compare multiple images in one panel.
- Use Mosaic mode for side-by-side review or Overlay mode for quick A/B switching.
- Zoom and pan are synchronized so every image stays aligned while inspecting details.
- Optionally enable pixel-diff to highlight per-pixel changes against a reference image.
- Load images from Explorer context menu, the Vantage sidebar, or drag-and-drop into the panel.
- Optional paired-folder comparison lets you step through matched filenames across selected folders.
🚀 Getting Started
From the Marketplace
- Install Vantage Image Compare from the Extensions panel
- Right-click one or more images → Vantage: Open
To use Vantage as your default image viewer, run Vantage: Set as Default Image Viewer from the Command Palette.
From the Command Palette
Run Vantage: Start (Ctrl+Shift+P / Cmd+Shift+P) to open an empty panel, then load images via right-click, sidebar, or drag & drop.
- Open the Vantage view in the Activity Bar
- Set a folder path and optionally filter by pattern
- Select images → Click Open in Editor
- For paired mode, select 2+ folders → Start Paired Comparison (Selected Folders)
🎮 Controls
| Input |
Action |
| Scroll wheel |
Zoom in/out centered on image (synced) |
| Click + drag |
Pan all images |
| Mode selector |
Toggle Mosaic ↔ Overlay |
Alt+1 – Alt+9 |
Jump to image 1–9 |
Ctrl+Alt+Down |
Next image |
Ctrl+Alt+Up |
Previous image |
Ctrl+Alt+Right |
Next matched pair (paired mode) |
Ctrl+Alt+Left |
Previous matched pair (paired mode) |
| Zoom input |
Type a zoom percent (e.g., 125 or 125%) and press Enter/blur to apply |
| ↺ button |
Reset view to default pan/zoom |
| Fit button |
Toggle visual scale normalization across different resolutions |
| ? button |
Show shortcut help overlay |
| Differences checkbox |
Toggle pixel diff visualization |
| Reference / Active dropdown |
Set the reference or active image, and remove images |
PNG · JPEG · GIF · WebP · BMP · SVG
⚙️ Configuration
Default Image Viewer
Vantage can be set as your default image viewer in VS Code. By default, VS Code's built-in image viewer is used.
To set Vantage as the default image viewer:
- Open the Command Palette (
Ctrl+Shift+P / Cmd+Shift+P)
- Run Vantage: Set as Default Image Viewer
- Reload the window when prompted
To disable it:
- Open Settings (
Ctrl+, / Cmd+,)
- Search for "Vantage"
- Uncheck Default Image Viewer
- Reload the window when prompted
Note: When disabled, you can still use "Open With..." context menu to open images in Vantage.
🛠 Development
Prerequisites
Setup
git clone https://github.com/Christophernph/vantage.git
cd vantage
npm install
npm run compile
Press F5 to launch the Extension Development Host, then run Vantage: Start from the Command Palette.
Scripts
| Command |
Description |
npm run compile |
Build the extension |
npm run watch |
Rebuild on file changes |
npx @vscode/vsce package --skip-license |
Package as .vsix |
Project Structure
vantage/
├── src/
│ ├── extension.ts # Extension entry point & command registration
│ ├── ImageDiffPanel.ts # Webview panel for image comparison
│ └── SidebarProvider.ts # Tree view sidebar provider
├── media/
│ ├── main.js # Webview frontend logic
│ └── style.css # Webview styles
├── .github/
│ └── workflows/
│ └── publish.yml # CI/CD publish workflow
├── package.json
└── tsconfig.json
🤝 Contributing
Contributions are welcome! Here's how to get involved:
- Fork the repository
- Create a branch for your feature or fix:
git checkout -b feat/my-feature
- Make your changes and verify:
npm run compile # Must complete without errors
- Test in the Extension Development Host (press
F5)
- Commit with a clear message following Conventional Commits:
feat: add support for TIFF images
fix: prevent pan drift on zoom reset
- Push and open a Pull Request against
main
Reporting Issues
Found a bug or have a feature request? Open an issue with:
- Steps to reproduce (for bugs)
- Expected vs actual behavior
- VS Code version and OS
📄 License
No license has been specified yet.
Made with 🔍 for pixel perfectionists
