ImageSmith
Bilder genau dort, wo der Code sie nennt: Lassen Sie den Mauszeiger auf einem Pfad ruhen, und eine Karte zeigt das Bild, seine Pixelgröße und Dateigröße. SVG wird gezeichnet, jede Größe in einer .ico ist da, animierte GIFs laufen – und dieselbe Karte ersetzt die Vorschau im Projektmappen-Explorer.
Kostenlos · Visual Studio 2022 und 2026 · 14 UI-Sprachen · PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG
Warum ImageSmith
Das Bild sehen, nicht seinen Namen
/Assets/Icons/save.svg sagt wenig. ImageSmith zeigt das Bild selbst, genau dort, wo der Pfad steht – in XAML, Razor, CSS, C#, JSON, Projektdateien und .resx –, ohne die Datei zu öffnen.
SVG und .ico inklusive
Visual Studio zeigt für SVG nichts und von einem Symbol nur eine Größe. ImageSmith zeichnet das SVG, listet jedes Bild in einer .ico auf und spielt animierte GIFs ab.
Fehlende Bilder fallen auf
Ein Pfad zu einem Bild, das weder im Projekt noch auf dem Datenträger ist, wird geschlängelt unterstrichen, und ein Anwendungssymbol ohne die Größen, die Windows braucht, erhält einen Hinweis – bevor ein Benutzer ein leeres Bild oder ein unscharfes Symbol sieht.
Kostenlos, ohne Haken
Kein Abo, keine „Pro“-Version, keine Datensammlung, keine Meldungen im Fenster „Ausgabe“ oder beim Start. Das Einzige, worum wir je bitten werden – nachdem Sie es eine Weile genutzt haben –, ist eine Bewertung im Marketplace. Läuft unter Visual Studio 2022 und 2026, x64 und ARM64.
Funktionen
- Eine Karte beim Daraufzeigen auf einen Pfad: das Bild auf einem Schachbrett, seine Pixelgröße, Dateigröße und sein Format, wie groß der Code es anzeigt (angezeigt mit 20 %), und Aktionen – Öffnen, In Standard-App öffnen, Im Projektmappen-Explorer anzeigen, Pfad kopieren.
- Dieselbe Karte im Projektmappen-Explorer statt der integrierten Vorschau, mit Bild kopieren.
- SVG gezeichnet, auch mit 16, 24, 32 und 48 px – so, wie es auf einer Schaltfläche aussehen wird.
- Jede Größe einer .ico mit ihren Farben und ihrem Format; Alle Größen als PNG speichern, Als PNG speichern pro Größe, Ausgewählte Größe kopieren.
- Animierte GIFs laufen in der Karte, mit der Anzahl der Frames und der Dauer.
- Skalierungsvarianten nebeneinander:
_x2,_x1_25,@2x,.scale-200,.targetsize-24,-480. - Miniaturansichten vor den Pfaden, wie Farbmuster.
- Hinweise: Bild nicht gefunden und Symbol ohne die üblichen Größen.
- PNG, JPEG, GIF, BMP, TIFF, ICO, WebP und SVG; ein Schachbrett, ein weißer oder dunkler Hintergrund hinter dem Bild.
Die Karte im Code
Lassen Sie den Mauszeiger auf einem Bildpfad ruhen, und die Karte öffnet sich in der QuickInfo des Editors. Sie zeigt, was in der Datei auf dem Datenträger steht, so wie das Projekt sie finden würde: ein relativer Pfad vom Ordner der Datei oder vom Projekt aus, ein Stammpfad vom Projekt (oder von wwwroot) aus, ein Pack-URI vom Projekt dieser Assembly aus.
| Teil | Was er zeigt |
|---|---|
| Bild | Das Bild auf einem Schachbrett (Transparenz ist sichtbar), kleine Bilder mit scharfen Pixeln vergrößert, große eingepasst. Drei Schaltflächen in der Ecke wechseln den Hintergrund. |
| Größenangabe | Die Pixelgröße und, wenn dasselbe Tag Width oder Height setzt, wie groß der Code es anzeigt: 1600 × 1000 · angezeigt mit 20 %. Bei einem SVG: SVG · eingepasst. |
| Angaben | Dateiname, Pixelgröße, Dateigröße, Format und DPI (wenn nicht 96); bei einem SVG die viewBox, die Anzahl der Formen und ob es Verläufe oder Text enthält; der Pfad in der Projektmappe. |
| Aktionen | Öffnen (in Visual Studio), In Standard-App öffnen, Im Projektmappen-Explorer anzeigen, Pfad kopieren. |
Schachbrett, weiß oder dunkel
Ein weißes Logo auf einer weißen Karte verschwindet. Die drei Schaltflächen oben rechts am Bild wechseln zwischen Schachbrett, Weiß und Dunkel; die Wahl gilt, bis Visual Studio geschlossen wird. Mit welchem Hintergrund eine Karte beginnt, ist eine Option.
Miniaturansichten vor Pfaden
Jeder Pfad, dessen Datei existiert, erhält davor ein winziges Bild, so hoch wie die Zeile – wie ein Farbmuster. Eine Dateiliste von Symbolen lässt sich auf einen Blick lesen. Schalten Sie sie für einen ruhigeren Editor aus.
Projektmappen-Explorer
Lassen Sie den Mauszeiger im Projektmappen-Explorer auf einer Bilddatei ruhen: Die ImageSmith-Karte öffnet sich daneben statt der integrierten Vorschau. SVG wird gezeichnet (die integrierte Vorschau zeigt nichts), eine .ico zeigt jede Größe (die integrierte Vorschau zeigt eine), und die Skalierungsvarianten des Bildes stehen darunter aufgereiht.
Die Karte bleibt, solange der Mauszeiger über dem Element oder über der Karte ist, damit ihre Links angeklickt werden können – hier sind es Öffnen, In Standard-App öffnen, Pfad kopieren und Bild kopieren. Sie schließt sich beim Verlassen, beim Scrollen, bei einer Taste oder einem Klick in die Struktur.
Ordner, Codedateien und alles, was ImageSmith nicht anzeigt, behalten die integrierte QuickInfo. Ändert ein Visual Studio-Update den Projektmappen-Explorer so, dass das Element unter dem Mauszeiger nicht gefunden werden kann, hält sich ImageSmith heraus.
Symbole (.ico)
Eine .ico-Datei enthält mehrere Bilder, eines pro Größe. Die Karte einer .ico zeigt sie alle nebeneinander auf dem Schachbrett (Größen über 128 px werden mit 128 angezeigt) und eine Tabelle mit jeder Größe, ihren Farben, ob sie als BMP oder PNG gespeichert ist, und ihren Bytes.
Klicken Sie auf eine Größe – im Streifen oder in der Tabelle –, um sie auszuwählen. Ausgewählte Größe kopieren legt dieses Bild in die Zwischenablage.
Als PNG speichern in einer Zeile schreibt diese Größe in eine PNG-Datei; Alle Größen als PNG speichern… fragt nach einem Ordner und schreibt eine PNG pro Größe (contoso-16.png … contoso-256.png).
SVG
SVG-Dateien werden gezeichnet – in der Karte im Code, im Projektmappen-Explorer und in den Miniaturansichten – mit SharpVectors. Unter dem Bild zeigt die Karte es mit 16, 24, 32 und 48 px: so, wie es auf einer Symbolleistenschaltfläche aussehen wird.
Die Angaben sind die viewBox (oder Breite × Höhe, wenn es keine viewBox gibt), die Dateigröße und die Anzahl der Formen, mit Verlauf und Text, wenn die Datei sie enthält. Ein SVG, das nicht gezeichnet werden kann, zeigt statt eines Bildes die Zeile des Fehlers.
Externe Dateien und URLs, auf die ein SVG verweist, werden nie geladen.
Animiertes GIF
Ein animiertes GIF läuft in der Karte in einer Schleife, und die Angaben nennen die Anzahl der Frames und die Laufzeit: GIF · animiert, 8 Frames, 0,8 s. Ein GIF mit einem Frame bleibt still. WebP, TIFF und BMP werden wie PNG und JPEG angezeigt.
Skalierungsvarianten
Bilder gibt es oft in mehreren Skalierungen für Bildschirme mit hoher DPI. Liegen die Dateien nebeneinander, reiht die Karte sie unter dem Bild auf, jede proportional mit ihrer Skalierung und Pixelgröße gezeichnet (×2 · 64); die angezeigte ist umrandet. Eine übliche Skalierung, die fehlt, ist ein gestrichelter Platz.
| Benennung | Beispiel | Gestrichelter Platz, wenn sie fehlt |
|---|---|---|
| Faktor (WinForms, Berichtsdesigner) | Chart.png, Chart_x2.png, Chart_x1_25.png, Chart_x1.5.png | ×1, ×2 |
| @2x (Web, iOS, React Native) | Chart.png, Chart@2x.png | ×1, ×2 |
| scale- (UWP, WinUI, MSIX) | Logo.scale-100.png, Logo.scale-200.png | 100, 200 |
| targetsize- (UWP, WinUI, MSIX) | Square44x44Logo.targetsize-24.png | 16, 24, 32, 48 |
| Größensuffix | icon-16.png, icon-32.png, tent-480.jpg, tent-768.jpg | — |
Klicken Sie auf eine Variante, um sie in derselben Karte zu sehen. Die Reihe gibt es in der Karte im Code und im Projektmappen-Explorer.
Was erkannt wird
Ein Pfad wird an der Erweiterung einer Bilddatei erkannt, an den Stellen, an denen die jeweilige Sprache Dateien nennt:
| Wo | Beispiele |
|---|---|
| XAML (WPF, WinUI, MAUI, Avalonia) | Source="/Assets/logo.png", pack://application:,,,/Contoso;component/Icons/save.svg, /Contoso.Icons;component/…, ms-appx:///Assets/hero.jpg, avares://Contoso.App/Assets/logo.png |
| Razor, Blazor und HTML | <img src="~/images/tent.jpg">, srcset, <link rel="icon">, style="background: url(…)" |
| CSS, SCSS, LESS | url("../images/hero.webp"), url(…) without quotes, image-set(…) |
| C# | "Assets/hero.jpg", @"Assets\splash.png", new Uri("pack://…"), Path.Combine("Assets", "logo.svg") |
| JSON | "icon": "images/icon-192.png" (appsettings.json, manifest.json) |
| Projektdateien | <ApplicationIcon>, <Resource Include="…">, <Content Include="…">, MAUI and appxmanifest images |
| .resx | Ein ResXFileRef auf ein Bild und ein einfacher Zeichenfolgenwert, der ein Bildpfad ist. |
| Formate | PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG |
Pack-URIs auf ein anderes Projekt der Projektmappe (/Contoso.Icons;component/Icons/save.svg, mit oder ohne Version) werden in diesem Projekt gesucht. ms-appx:/// findet auch die qualifizierten Dateien von UWP und WinUI (Logo.scale-200.png für Logo.png); ein MAUI-logo.png findet Resources/Images/logo.svg.
Absichtlich nicht angezeigt: URLs und data:-URIs, Bindungen und Ressourcen ({Binding …}, {StaticResource …}), interpolierte Zeichenfolgen und aus Variablen gebaute Pfade, MSBuild-Eigenschaften, Platzhalter, pack://siteoforigin: und bloße Dateinamen in C# ("logo.png" könnte alles sein).
Hinweise
Zwei Arten von Hinweisen, gemeinsam mit der SmithWorks-Familie: Jeder Text beginnt mit ImageSmith:, seine QuickInfo hat Diese Art von Hinweis nicht anzeigen, und mit LensSmith erscheint der Hinweis auch am Zeilenende.
| Hinweis | Wann | Text |
|---|---|---|
| Bild nicht gefunden | Ein Pfad zu einem Bild, das weder im Projekt noch auf dem Datenträger ist (eine Wellenlinie). URLs, Pfade mit Variablen und bloße Dateinamen im Code werden nicht geprüft. | ImageSmith: /Assets/banner-old.png is not in the project. |
| Symbol ohne die üblichen Größen | Eine .ico einer Anwendung oder des Infobereichs ohne 16, 32, 48 oder 256 px (graue Punkte): Windows skaliert eine andere Größe, und es wirkt unscharf. Favicons werden nicht geprüft. | ImageSmith: tray.ico has no 16 × 16 image — Windows will scale a larger one. |
Jede Art lässt sich unter Hinweise im Editor in den Einstellungen abschalten oder direkt am Hinweis.
Einstellungen
Extras › Optionen › SmithWorks › ImageSmith. Jede Option hat eine kurze Beschreibung ihrer Wirkung.
| Option | Standard |
|---|---|
| Vorschau beim Daraufzeigen | ein |
| Karte im Projektmappen-Explorer | ein |
| Miniaturansichten vor Pfaden | ein |
| Hintergrund der Vorschau | Schachbrett |
| Hinweise: Bild nicht gefunden | ein |
| Hinweise: Symbol ohne die üblichen Größen | ein |
| Um eine Bewertung im Marketplace bitten | ein |
Die Einstellungen werden in %LocalAppData%\ImageSmith gespeichert. Auf Standard zurücksetzen schaltet alles wieder ein.
FAQ
Ich lasse den Mauszeiger auf einem Pfad ruhen, und nichts öffnet sich. Warum?
ImageSmith zeigt eine Karte nur für eine Datei, die es auf dem Datenträger findet. Prüfen Sie, ob der Pfad mit einer Bilderweiterung endet und nicht aus Variablen, einer Bindung oder einer URL gebaut ist (diese werden nie angezeigt). Fehlt die Datei, sollte der Pfad stattdessen eine Wellenlinie Bild nicht gefunden haben. Bloße Dateinamen in C# ("logo.png") werden absichtlich übersprungen – dort werden nur Pfade mit einem Ordner oder einem Pack-URI gelesen.
Warum gibt es nichts für avares://OtherAssembly/…?
Ein avares://- oder Pack-URI nennt eine Assembly. Ist diese Assembly ein Projekt der geöffneten Projektmappe, sucht ImageSmith in diesem Projekt. Stammt sie aus einem NuGet-Paket oder einer referenzierten DLL, ist das Bild hineinkompiliert und keine Datei auf dem Datenträger – es gibt also nichts zu zeigen, und ImageSmith meldet es auch nicht als fehlend.
Mein SVG hat einen falschen oder fehlenden Namespace. Wird es gezeichnet?
Ja. Dateien, die mit xmlns="http://w3.org" oder ganz ohne Namespace gespeichert wurden, sind häufig; ImageSmith setzt den SVG-Namespace direkt vor dem Zeichnen, sodass die Karte das Bild zeigt. Browser lehnen eine solche Datei eventuell trotzdem ab, daher lohnt es sich, sie zu korrigieren.
Die Karte meldet, dass dieses SVG nicht gezeichnet werden kann. Was nun?
Die Karte zeigt die erste Zeile des Fehlers (zum Beispiel einen XML-Fehler mit Zeile und Spalte). Korrigieren Sie die Datei und lassen Sie den Mauszeiger erneut auf dem Pfad ruhen – eine geänderte Datei wird neu gelesen.
Kann ich die integrierte Vorschau im Projektmappen-Explorer behalten?
Ja – schalten Sie Karte im Projektmappen-Explorer in den Einstellungen aus. Die Karte im Code bleibt.
Verlangsamt ein großes Bild den Editor?
Nein. Bilder werden in einem Hintergrundthread decodiert und nur in der Größe, die die Karte braucht; Miniaturansichten werden klein decodiert. Dateien über 256 MB (SVG über 8 MB, ICO über 16 MB) zeigen ihre Angaben ohne Bild.
Sendet ImageSmith irgendetwas irgendwohin?
Nein. Es liest die Bilddateien Ihrer Projektmappe auf Ihrem Computer und sonst nichts – keine Telemetrie, keine Anfragen, und ein SVG lädt nie etwas aus dem Internet.
Wo melde ich ein Problem oder schlage eine Funktion vor?
Erstellen Sie ein Issue im Repository Feedback auf GitHub – dort gibt es Formulare für Fehler, Ideen und Pfade, die nicht erkannt werden (bitte ändern Sie vertrauliche Namen). Sie können auch die Registerkarte „Q&A“ im Marketplace verwenden.
Änderungsprotokoll
1.1.0
- Ein neues Symbol, gezeichnet im einheitlichen Stil der SmithWorks-Familie.
1.0.0
- Erste Version: die Karte beim Daraufzeigen auf Bildpfade in XAML, Razor und HTML, CSS, C#, JSON, Projektdateien und .resx; die Karte im Projektmappen-Explorer mit Skalierungsvarianten; gezeichnete SVGs, jede Größe einer .ico, animierte GIFs; Miniaturansichten vor Pfaden; die Hinweise „Bild nicht gefunden“ und „Symbol ohne die üblichen Größen“; eine einmalige Bitte um eine Bewertung.