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.

✨ Features

Multi-Image Mosaic

Compare 2+ images simultaneously in a responsive grid that adapts to your panel size. Every image stays in sync — zoom into a detail on one and all others follow.

Overlay Mode

Switch to a single-viewport overlay and instantly jump between images with keyboard shortcuts. Perfect for rapid before/after comparisons.

Pixel-Level Differences

Toggle difference visualization to see exactly what changed between the reference image and each comparison image, down to the pixel.

Reference Image Selection

Designate any image as the reference with a clear blue border highlight. Press and hold the overlay button to temporarily flash the reference across all grid positions.

Synchronized Zoom & Pan

Zoom to any point in any image — all viewports stay perfectly aligned. Drag to pan across all images simultaneously.

Image Browser Sidebar

Browse image-only directory trees from the Activity Bar. Set a root path, filter with wildcard patterns (*.png, *_mask.*), multi-select files and folders, and open everything in the compare panel in one click.

Drag & Drop

Drag images or entire folders from the VS Code Explorer directly into the compare panel to add them to the current session.

State Preservation

Your zoom level, pan position, view mode, and selections persist across tab switches. Pick up right where you left off.

🚀 Getting Started

From the Marketplace

1. Install Vantage Image Compare from the Extensions panel
2. Select 2+ images in the File Explorer → Right-click → Vantage: Compare Images

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.

From the Sidebar

1. Open the Vantage view in the Activity Bar
2. Set a folder path and optionally filter by pattern
3. Select images → Click Open in Editor

🎮 Controls

📂 Supported Formats

PNG · JPEG · GIF · WebP · BMP · SVG

🛠 Development

Prerequisites

• VS Code ^1.80.0
• Node.js 18+ and npm

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

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:

1. Fork the repository
2. Create a branch for your feature or fix:

   git checkout -b feat/my-feature
   

3. Make your changes and verify:

   npm run compile   # Must complete without errors
   

4. Test in the Extension Development Host (press F5)
5. Commit with a clear message following Conventional Commits:

   feat: add support for TIFF images
   fix: prevent pan drift on zoom reset
   

6. 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

📋 Changelog

1.0.0

• Multi-image mosaic comparison with synchronized zoom & pan
• Overlay mode with keyboard navigation
• Pixel-level difference highlighting
• Image browser sidebar with wildcard filtering
• Drag & drop image/folder intake
• State and mode persistence
• Keyboard shortcuts (Alt+1-9, Alt+Tab, Shift+Alt+Tab)

📄 License

TBD

Made with 🔍 for pixel perfectionists