{"id":249681,"date":"2024-07-16T03:00:23","date_gmt":"2024-07-16T10:00:23","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=249681"},"modified":"2024-07-02T14:38:36","modified_gmt":"2024-07-02T21:38:36","slug":"making-visual-studio-a-bit-more-visual","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/making-visual-studio-a-bit-more-visual\/","title":{"rendered":"Making Visual Studio a bit more visual"},"content":{"rendered":"<p>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\u2019t show us what the image looks like. Until now.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/01\/image-hover-preview-hero.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-246586\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/01\/image-hover-preview-hero.png\" alt=\"Image image hover preview hero\" width=\"624\" height=\"241\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/01\/image-hover-preview-hero.png 624w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/01\/image-hover-preview-hero-300x116.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/a><\/p>\n<p>The feature request <a href=\"https:\/\/developercommunity.visualstudio.com\/t\/An-option-to-preview-images-when-they-ar\/10419941?ftype=idea&amp;stateGroup=active&amp;page=5\">An option to preview images when they are hovered<\/a> 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 <a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/working-with-images-just-got-easier-in-visual-studio\/\">community experiment<\/a> to figure it out.<\/p>\n<p>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\u2019ll see the size in pixels and the file size in bytes.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/image-hover-preview-v1.gif\"><img decoding=\"async\" class=\"alignnone size-full wp-image-249682\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/image-hover-preview-v1.gif\" alt=\"Image image hover preview v1\" width=\"696\" height=\"564\" \/><\/a><\/p>\n<p>The participants of the experiment were very excited about the feature. Here\u2019s what some of them said:<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/Picture2.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-249683\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/Picture2.png\" alt=\"Image Picture2\" width=\"290\" height=\"61\" \/><\/a><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/Picture3.png\"> \u00a0<img decoding=\"async\" class=\"alignnone size-full wp-image-249684\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/Picture3.png\" alt=\"Image Picture3\" width=\"216\" height=\"70\" \/>\u00a0\u00a0<\/a><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/Picture4.png\"><img decoding=\"async\" class=\"alignnone size-full wp-image-249685\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/Picture4.png\" alt=\"Image Picture4\" width=\"624\" height=\"71\" srcset=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/Picture4.png 624w, https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2024\/07\/Picture4-300x34.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/a><\/p>\n<p>We identified some important questions in need of an answer:<\/p>\n<ol>\n<li>What are the must-have image file types to support?<\/li>\n<li>Which image reference syntaxes and formats are most used?<\/li>\n<li>Which additional features could be important?<\/li>\n<\/ol>\n<p>The experiment helped us answer these questions. Let\u2019s go over them.<\/p>\n<h2>Supported file types<\/h2>\n<p>The most common image files used by participants of the experiment are (in order):<\/p>\n<ul>\n<li><strong>PNG<\/strong> \u2013 53%<\/li>\n<li><strong>JPG<\/strong> \u2013 21%<\/li>\n<li><strong>SVG<\/strong> \u2013 15%<\/li>\n<li><strong>ICO<\/strong> \u2013 4%<\/li>\n<li><strong>WebP <\/strong>\u2013 4%<\/li>\n<li><strong>GIF<\/strong> \u2013 2%<\/li>\n<li>Other file types like <strong>BMP<\/strong>, <strong>TIFF<\/strong>, <strong>DDS<\/strong><\/li>\n<\/ul>\n<p>The only format not directly supported by WPF is SVG, so we must convert those to a bitmap format WPF can render. That\u2019s why SVG support didn\u2019t make it into the first version, but we hope to have it ready soon.<\/p>\n<h2>Reference syntaxes<\/h2>\n<p>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:<\/p>\n<ul>\n<li><strong>Relative URL<\/strong>\u00a0(.\/, ..\/, and \/)<\/li>\n<li><strong>File path<\/strong>\u00a0(c:\\, c:\/, \\, and \/)<\/li>\n<li><strong>Data URI<\/strong>\u00a0(data:image\/png;base64,&#8230;)<\/li>\n<li><strong>Pack URI<\/strong>\u00a0(pack:\/\/application:,,,\/Images\/MyImage.png)<\/li>\n<li><strong>Image monikers <\/strong>(KnownMonikers.StatusWarning)<\/li>\n<\/ul>\n<h2>Additional features<\/h2>\n<p>The community suggested two features beyond simply showing the image preview.<\/p>\n<ol>\n<li><a href=\"https:\/\/github.com\/madskristensen\/ImagePreview\/issues\/5\">Zoom in on the preview\n<\/a>This is a cool feature and one that would be great to investigate further for a future update. However, it is <strong>out of scope<\/strong> for now.<\/li>\n<li><a href=\"https:\/\/github.com\/madskristensen\/ImagePreview\/issues\/11\">Click preview image to open\n<\/a>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.<\/li>\n<\/ol>\n<p>That was the story of how the image hover preview feature made it to Visual Studio. To try it yourself, <a href=\"https:\/\/visualstudio.microsoft.com\/downloads\/\">install the latest version<\/a> of Visual Studio 2022 (v17.10 or newer) and give it a go.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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, [&hellip;]<\/p>\n","protected":false},"author":642,"featured_media":246586,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[6879],"class_list":["post-249681","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-editor"],"acf":[],"blog_post_summary":"<p>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, [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/249681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/642"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=249681"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/249681\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/246586"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=249681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=249681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=249681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}