Image Details
A powerful VS Code extension that displays comprehensive image metadata, EXIF data, and provides tools to clean metadata from images.
Screenshots
Demonstration of copying metadata values to clipboard:
✨ Features
You can click any metadata value to copy it to clipboard.
Works with all common image formats:
- PNG (
.png)
- JPEG (
.jpg, .jpeg)
- GIF (
.gif)
- WebP (
.webp)
- BMP (
.bmp)
- SVG (
.svg)
- ICO (
.ico)
Usage
Quick Start
- Open any image file in VS Code (supports PNG, JPG, GIF, WebP, BMP, SVG, ICO)
- The extension automatically activates and displays the Image Details Viewer
- View comprehensive metadata in the resizable sidebar on the right
- Click any metadata value to instantly copy it to your clipboard
- Use zoom controls to inspect images in detail
Interacting with Images
Advanced Zoom Controls
- Buttons: Use the visual
+, -, ⟲, and ⊡ buttons in the toolbar
- Keyboard: Press
+ to zoom in, - to zoom out, 0 to reset
- Mouse Wheel: Hold
Ctrl (Windows/Linux) or Cmd (Mac) and scroll
- Click: Click anywhere on the image to toggle 2× zoom
- Fit to Screen: Click the fit button to auto-adjust image size
EXIF Data Management
- Remove EXIF Metadata: One-click button to strip all EXIF data from images
- Automatic Backup: Creates a backup file (
_backup) before removing metadata
- Format Support: Works with JPEG/JPG and PNG images
- Smart Detection: Button only appears when image contains EXIF data
- Safe Operation: Confirmation dialog prevents accidental removal
- Error Recovery: Automatically restores from backup if operation fails
- Real-time Update: Interface refreshes automatically after metadata removal
Internationalization (i18n)
- Multi-language Support:
- 🇺🇸 English (default)
- 🇧🇷 Português (Brasil)
- Automatic Detection: Uses your VS Code language settings
- Easy to Extend: Add your own language (see I18N.md)
- Resize: Drag the left edge of the panel to adjust width (250-600px)
- Copy Values: Click any metadata value to copy it to clipboard
- Scroll: Panel stays sticky on the right while scrolling large images
Alternative Ways to Open
- Context Menu: Right-click any image file in Explorer → "Open with Image Details Viewer"
- Command Palette: Press
Ctrl+Shift+P / Cmd+Shift+P → Type "Reopen with" → Select "Image Details Viewer"
- Default Viewer: The extension registers as the default viewer for supported image formats
Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Image Details"
- Click Install
From Source
git clone https://github.com/NeuronioAzul/vscode-ext_img-details.git
cd vscode-ext_img-details
npm install
npm run compile
Then press F5 to run in development mode.
⚙️ Configuration
The extension provides comprehensive configuration options. See the full documentation for details.
Available Settings
imageDetails.defaultDisplayMode: Choose between accordion or list mode for metadata sectionsimageDetails.defaultSectionStates: Configure which sections are expanded by defaultimageDetails.rememberSectionStates: Enable/disable session persistence
For more details, see the Configuration Guide.
🤝 Contributing
Contributions are welcome! Please read our Contributing Guide for details on:
- Reporting bugs
- Suggesting features
- Adding translations
- Submitting pull requests
📚 Documentation
Complete documentation is available in the docs/ folder:
📄 License
This project is licensed under the MIT License - see the LICENSE file for details.
🐛 Known Issues
None at the moment. If you find a bug, please report it!
🗺️ Roadmap
See TODO.md for planned features and improvements.
📝 Changelog
See CHANGELOG.md for a detailed version history.
💬 Feedback & Support
Have feedback or suggestions? We'd love to hear from you!
🔗 Resources
🙏 Acknowledgments
💖 Support the Project
If you find this extension useful, consider supporting its development:
Your support helps maintain and improve this extension. Thank you! 🙏
Made with 🧠 neurons by NeuronioAzul
Enjoy the extension? Give it a ⭐ on GitHub!
