Any web, desktop, or mobile developer works with images often. You reference them from C#, HTML, XAML, CSS, C++, VB, TypeScript, and even in code comments. Some images are local, and some exist online or on network shares, while others only exist as base64 encoded strings. We refer to them in numerous ways in code, but always as string values that don’t show us what the image looks like. Until now.
The feature request An option to preview images when they are hovered has gotten a lot of attention lately, so we decided to look into it. Various image previewers exist for different editors already, but they all do things a little differently. If we were to build this, we must do it in a way that feels native and natural to Visual Studio. We therefore launched a community experiment to figure it out.
The result is an editor tooltip that in the code editor. The tooltip shows the image in its original size but capped at maximum of 500 pixels wide and high. Below the preview image you’ll see the size in pixels and the file size in bytes.
The participants of the experiment were very excited about the feature. Here’s what some of them said:
We identified some important questions in need of an answer:
- What are the must-have image file types to support?
- Which image reference syntaxes and formats are most used?
- Which additional features could be important?
The experiment helped us answer these questions. Let’s go over them.
Supported file types
The most common image files used by participants of the experiment are (in order):
- PNG – 53%
- JPG – 21%
- SVG – 15%
- ICO – 4%
- WebP – 4%
- GIF – 2%
- Other file types like BMP, TIFF, DDS
The only format not directly supported by WPF is SVG, so we must convert those to a bitmap format WPF can render. That’s why SVG support didn’t make it into the first version, but we hope to have it ready soon.
Reference syntaxes
There are various ways to reference an image and depend largely on the language and app model. The most common ones we saw from the experiment were:
- Relative URL (./, ../, and /)
- File path (c:\, c:/, \, and /)
- Data URI (data:image/png;base64,…)
- Pack URI (pack://application:,,,/Images/MyImage.png)
- Image monikers (KnownMonikers.StatusWarning)
Additional features
The community suggested two features beyond simply showing the image preview.
- Zoom in on the preview
This is a cool feature and one that would be great to investigate further for a future update. However, it is out of scope for now. - Click preview image to open
The idea is that users should be able to click the preview image to have it open in their default image viewer application. It was simple to add, so we did.
That was the story of how the image hover preview feature made it to Visual Studio. To try it yourself, install the latest version of Visual Studio 2022 (v17.10 or newer) and give it a go.