Avif Preview — A Visual Studio Code extension that enables reliable preview of AVIF images in a dedicated panel, featuring zoom and panning capabilities.
✨ Features
🖼 Full AVIF preview — View *.avif files in a dedicated Webview panel via context menu.
🔍 Zoom — Scale images using the mouse wheel (from 0.5× to 10×) or click.
🖱 Panning — Drag the image with the mouse when zoomed for detailed inspection.
🌙 VS Code theme adaptation — Automatically utilizes editor colors for the background.
🔄 Automatic refresh — The image updates upon file changes.
🛡️ Secure rendering — Utilizes Webview with Content-Security-Policy.
Note: Native VS Code image preview does not support AVIF files when double-clicking (as of December 2025). This extension fills that gap.
🛠 Installation and Usage
Open VS Code → Extensions (Ctrl+Shift+X).
Search for Avif Preview and click Install.
To preview an AVIF image:
Right-click on any file with the .avif extension in the Explorer panel.
Select Open AVIF Preview from the context menu.
This opens the image in a dedicated panel with full interactive features.
🧩 Contributing
Found a bug or want to suggest an improvement?
Open an issue or pull request on GitHub.
👤 Author
Andriy Ovcharov
📧 ovcharovcoder@gmail.com
☕ Support
If you enjoy Avif Preview, consider supporting the author: Donate via PayPal
Andriy Ovcharov
📧 ovcharovcoder@gmail.com
