Image Information is a VS Code extension that opens images in a dedicated custom editor to inspect visual content and metadata side by side.
Highlights
- Integrated image preview in a VS Code custom editor
- Key metadata: dimensions, file size, format, color space, channels, alpha, DPI
- Advanced zoom workflow: toolbar, keyboard shortcuts, wheel zoom, fit mode, selection zoom
- Rotation controls (clockwise/counterclockwise, 90-degree steps)
- Mirror controls (horizontal and vertical)
- Color picker tool with pixel loupe and live pixel info (position + color)
- Overview minimap with current viewport rectangle and click/drag recentering
- Before/after comparison mode with an interactive split divider
- Side-by-side comparison mode with visual difference detection overlays
- Advanced ICO support with internal variant gallery when available
- Automatic webview refresh when the source image file changes
- User customization options (toolbar position, accent color, loupe settings)
- Gallery view for browsing images in a folder
Supported extensions:
- png
- jpg
- jpeg
- webp
- gif
- bmp
- tif
- tiff
- avif
- ico
- svg
- heic
- heif
Compatibility notes:
- tif/tiff/heic/heif files are converted to PNG for webview rendering.
- HEIC/HEIF decoding depends on native sharp support available on your environment.
Installation
From source
- Clone the repository:
git clone https://github.com/DonaldTrump-coder/ImageInformation.git
cd image-information
- Install dependencies:
npm install
- Build the extension:
npm run compile
- Press F5 in VS Code to start an Extension Development Host.
From local VSIX package
The workspace also includes a local VSIX package (example: image-information-0.0.1.vsix) that can be installed directly from VS Code.
Usage
- Open a supported image from the VS Code Explorer.
- The Image Information custom editor opens by default.
- Use the toolbar to zoom, enable the color picker, toggle the info panel, or compare with another image.
Main command:
- Image Information: Open with Details
Available commands
- Image Information: Open with Details
- Image Information: Zoom +
- Image Information: Zoom -
- Image Information: Zoom 100%
- Image Information: Zoom Fit
- Image Information: Set Comparison Image
Keyboard shortcuts
Active when the Image Information custom editor is focused:
- Ctrl/Cmd + = or Numpad Add: zoom in
- Ctrl/Cmd + - or Numpad Subtract: zoom out
- Ctrl/Cmd + 0: reset zoom to 100%
Webview shortcut:
Detailed features
Zoom and navigation
- Incremental zoom with + and - controls
- Press-and-hold on + and - for continuous zoom
- Panning when zoom exceeds visible area
- Rectangle-based zoom selection
- Fit / Reset 100%
- Rotate left/right by 90 degrees from the toolbar
- Mirror image horizontally or vertically from the toolbar
- Optional persistence of rotate/mirror edits to the original file (
imageInspector.saveEditsToOriginalFile)
Info panel
- Draggable metadata panel
- Local persistence for panel visibility and position
- Overview minimap of visible image area
Color picker
- Reads pixel color under cursor
- Magnified loupe around pointer
- Live display of coordinates (x, y) and picked color
Before/after comparison
- Pick a comparison image from the toolbar or dedicated command
- Interactive split slider
- Vertical/horizontal split orientation
- Dedicated side-by-side mode in the toolbar
- Automatic difference region detection with visual bounding boxes
- Difference navigation controls (previous/next, one region at a time)
- Difference overlay target control (left image, right image, both)
- Optional auto-center on selected difference
- Safety check: comparison requires matching width and height
ICO handling
- ICO entry parsing support
- Variant gallery when ICO internal entries are PNG payloads
- Variant selection updates the main preview
Configuration
Available user settings:
- imageInspector.toolbarPosition
- Values: top, bottom, left, right
- Default: top
- imageInspector.themeAccentColor
- Format: #RRGGBB
- Default: #00C86E
- imageInspector.saveEditsToOriginalFile
- Type: boolean
- Default: true
- When enabled, rotate/mirror actions overwrite the original file on disk
- imageInspector.pipetteLoupeDiameter
- Default: 96
- Min/Max: 48 / 256
- imageInspector.pipetteLoupeVirtualResolution
- Default: 25
- Min/Max: 5 / 101
- imageInspector.pipetteLoupeZoomAtMinImageZoom
- imageInspector.pipetteLoupeZoomAtMaxImageZoom
Project architecture
- src/extension.ts
- Extension activation
- Custom editor and command registration
- Image metadata extraction via sharp
- Runtime preview conversion for specific formats
- Bounded runtime caches (converted previews and ICO data)
- src/webview/htmlBuilders.ts
- media/imageDetails.js
- UI interactions (zoom, picker, comparison, minimap, overlay)
- media/imageDetails.css
Development
Prerequisites:
- Node.js (version compatible with project dependencies)
- VS Code 1.90.0+
Scripts:
npm run compile
npm run watch
npm run lint
Recommended flow:
- npm install
- npm run compile
- Press F5 in VS Code to start Extension Development Host
Build the VSIX package:
npx @vscode/vsce package
This runs npm run compile (via vscode:prepublish) and generates image-information-<version>.vsix at the project root.
License
This project is distributed under the MIT License. See LICENSE.
Image Information est une extension VS Code qui ouvre les images dans un éditeur personnalisé pour inspecter visuellement les fichiers et leurs métadonnées.
Points forts
- Aperçu image intégré dans un custom editor VS Code
- Métadonnées principales: dimensions, taille, format, espace colorimétrique, canaux, alpha, DPI
- Zoom avancé: boutons, raccourcis clavier, molette, fit, zoom de sélection
- Contrôles de rotation (horaire/antihoraire, pas de 90°)
- Contrôles de miroir (horizontal et vertical)
- Outil pipette avec loupe pixel et informations en direct (coordonnées + couleur)
- Mini-carte (overview) avec rectangle de viewport et recentrage par clic/glisser
- Mode comparaison avant/après avec séparateur interactif
- Mode comparaison côte à côte avec détection visuelle des différences
- Support ICO avancé: galerie des variantes internes quand disponibles
- Rafraîchissement automatique du webview lors de la modification du fichier image
- Paramètres de personnalisation (position toolbar, couleur d'accent, réglages de loupe)
- Galerie de navigation pour les images d'un même dossier
Extensions prises en charge:
- png
- jpg
- jpeg
- webp
- gif
- bmp
- tif
- tiff
- avif
- ico
- svg
- heic
- heif
Notes de compatibilité:
- Les fichiers tif/tiff/heic/heif sont convertis en PNG pour l'aperçu webview.
- Le décodage HEIC/HEIF dépend des bibliothèques natives disponibles pour sharp selon l'environnement.
Installation
Depuis les sources
- Cloner le dépôt:
git clone https://github.com/DonaldTrump-coder/ImageInformation.git
cd image-information
- Installer les dépendances:
npm install
- Compiler:
npm run compile
- Lancer en mode développement dans VS Code avec F5.
Depuis un package VSIX local
Le projet contient aussi un package VSIX local (exemple: image-information-0.0.1.vsix) qui peut être installé via VS Code.
Utilisation
- Ouvrir une image supportée depuis l'explorateur VS Code.
- L'éditeur personnalisé Image Information s'ouvre (priorité par défaut).
- Utiliser la toolbar pour zoomer, activer la pipette, afficher/masquer le panneau info, ou comparer deux images.
Commande principale:
- Image Information: Open with Details
Commandes disponibles
- Image Information: Open with Details
- Image Information: Zoom +
- Image Information: Zoom -
- Image Information: Zoom 100%
- Image Information: Zoom Fit
- Image Information: Set Comparison Image
Raccourcis clavier
Actifs quand le custom editor Image Information est focus:
- Ctrl/Cmd + = ou Numpad Add: zoom avant
- Ctrl/Cmd + - ou Numpad Subtract: zoom arrière
- Ctrl/Cmd + 0: zoom 100%
Raccourcis dans le webview:
Fonctionnalités détaillées
Zoom et navigation
- Zoom progressif avec boutons + et -
- Press-and-hold sur + et - pour zoom continu
- Pan (déplacement) dans l'image quand le zoom dépasse la zone visible
- Zoom de sélection via rectangle
- Fit / Reset 100%
Outils d'édition
- Rotation gauche/droite par pas de 90° depuis la toolbar
- Miroir horizontal ou vertical depuis la toolbar
- Persistance optionnelle des modifications rotation/miroir dans le fichier d'origine (
imageInspector.saveEditsToOriginalFile)
- Panneau draggable affichant les métadonnées
- Mémorisation locale de la visibilité et de la position du panneau
- Aperçu mini-carte de la zone visible (overview map)
Pipette
- Lecture couleur pixel sous le curseur
- Loupe zoomée autour du curseur
- Affichage en direct de la position (x, y) et de la valeur couleur
Comparaison avant/après
- Sélection d'une image de comparaison depuis la toolbar ou la commande dédiée
- Slider de séparation interactif
- Orientation verticale ou horizontale
- Mode côte à côte dédié dans la toolbar
- Détection automatique des zones de différences avec encadrement visuel
- Navigation des différences (précédente/suivante, une zone à la fois)
- Cible d'affichage des différences (image gauche, image droite, les deux)
- Option d'auto-centrage sur la différence sélectionnée
- Vérification de sécurité: dimensions identiques requises entre image principale et image de comparaison
Gestion ICO
- Détection des entrées ICO
- Galerie des variantes quand les entrées internes sont en PNG
- Sélection de variante avec mise à jour de l'aperçu
Configuration
Paramètres utilisateur disponibles:
- imageInspector.toolbarPosition
- Valeurs: top, bottom, left, right
- Défaut: top
- imageInspector.themeAccentColor
- Format: #RRGGBB
- Défaut: #00C86E
- imageInspector.saveEditsToOriginalFile
- Type: booléen
- Défaut: true
- Quand activé, les actions rotation/miroir écrasent le fichier original sur disque
- imageInspector.pipetteLoupeDiameter
- Défaut: 96
- Min/Max: 48 / 256
- imageInspector.pipetteLoupeVirtualResolution
- Défaut: 25
- Min/Max: 5 / 101
- imageInspector.pipetteLoupeZoomAtMinImageZoom
- imageInspector.pipetteLoupeZoomAtMaxImageZoom
Architecture du projet
- src/extension.ts
- Activation de l'extension
- Enregistrement du custom editor et des commandes
- Lecture des métadonnées image via sharp
- Conversion d'aperçu pour certains formats
- Mise en cache bornée (aperçus convertis et données ICO)
- src/webview/htmlBuilders.ts
- Construction HTML du webview
- media/imageDetails.js
- Interactions UI (zoom, pipette, comparaison, minimap, overlay)
- media/imageDetails.css
Développement
Prérequis:
- Node.js (version compatible avec les dépendances du projet)
- VS Code 1.90.0 ou plus
Scripts:
npm run compile
npm run watch
npm run lint
Cycle recommandé:
- npm install
- npm run compile
- F5 dans VS Code pour ouvrir un Extension Development Host
Générer le package VSIX:
npx @vscode/vsce package
Cette commande lance npm run compile (via vscode:prepublish) et génère image-information-<version>.vsix à la racine du projet.
Licence
Ce projet est distribué sous licence MIT. Voir LICENSE.
| |
