ImageSmith
コードが参照するその場所に画像を。パスにポインターを合わせると、画像とそのピクセル サイズ、ファイル サイズをカードで表示します。SVG は描画され、.ico に含まれるすべてのサイズがそろい、アニメーション GIF は再生されます。さらに、ソリューション エクスプローラーでも同じカードがプレビューの代わりに表示されます。
無料 · Visual Studio 2022 と 2026 · UI は 14 言語 · PNG、JPEG、GIF、BMP、TIFF、ICO、WebP、SVG
ImageSmith を選ぶ理由
名前ではなく画像を見る
/Assets/Icons/save.svg だけではほとんど何もわかりません。ImageSmith はファイルを開かずに、パスが書かれたその場所で画像そのものを表示します。XAML、Razor、CSS、C#、JSON、プロジェクト ファイル、.resx に対応しています。
SVG と .ico にも対応
Visual Studio は SVG に対して何も表示せず、アイコンも 1 つのサイズしか表示しません。ImageSmith は SVG を描画し、.ico 内のすべての画像を一覧表示し、アニメーション GIF を再生します。
見つからない画像がすぐわかる
プロジェクトにもディスク上にもない画像へのパスには波線が付き、Windows が必要とするサイズのないアプリケーション アイコンにはヒントが表示されます。ユーザーが空の画像やぼやけたアイコンを目にする前に気付けます。
無料、条件なし
サブスクリプションも「Pro」版もデータ収集もなく、出力ウィンドウや起動時のメッセージもありません。唯一お願いするのは、しばらくお使いいただいた後に、Marketplace での評価です。Visual Studio 2022 と 2026、x64 と ARM64 で動作します。
機能
- パスにポインターを合わせるとカードを表示: 市松模様の上の画像、ピクセル サイズ、ファイル サイズと形式、コードでの表示サイズ (20% で表示)、そして操作 — 開く、既定のアプリで開く、ソリューション エクスプローラーで表示、パスをコピー。
- ソリューション エクスプローラーでも同じカードを組み込みのプレビューの代わりに表示。画像をコピー 付き。
- SVG を描画。16、24、32、48 px でも表示し、ボタン上での見え方がわかります。
- .ico のすべてのサイズを色と形式と共に表示。すべてのサイズを PNG として保存、サイズごとの PNG として保存、選択したサイズをコピー。
- アニメーション GIF を再生。フレーム数と長さも表示します。
- スケール バリアントを並べて表示:
_x2、_x1_25、@2x、.scale-200、.targetsize-24、-480。 - パスの前にサムネイル。色見本のように表示されます。
- ヒント: 画像が見つからない と 標準サイズのないアイコン。
- PNG、JPEG、GIF、BMP、TIFF、ICO、WebP、SVG に対応。画像の背景は市松模様、白、黒から選べます。
コード内のカード
画像パスにポインターを合わせると、エディターのクイック ヒントにカードが開きます。プロジェクトが見つけるのと同じように、ディスク上のファイルの中身を表示します。ファイルのフォルダーまたはプロジェクトからの相対パス、プロジェクト (または wwwroot) からのルート パス、そのアセンブリのプロジェクトからの pack URI です。
| 部分 | 表示内容 |
|---|---|
| 画像 | 市松模様の上に画像を表示します (透明部分が見えます)。小さな画像はピクセルをくっきりさせたまま拡大し、大きな画像は収まるように縮小します。隅の 3 つのボタンで背景を切り替えます。 |
| サイズ バッジ | ピクセル サイズ。同じタグで Width または Height が設定されている場合は、コードでの表示サイズも: 1600 × 1000 · 20% で表示。SVG の場合: SVG · 全体表示。 |
| 情報 | ファイル名、ピクセル サイズ、ファイル サイズ、形式、DPI (96 でない場合)。SVG の場合は viewBox、図形の数、グラデーションやテキストの有無。ソリューション内のパス。 |
| 操作 | 開く (Visual Studio で)、既定のアプリで開く、ソリューション エクスプローラーで表示、パスをコピー。 |
市松模様、白、黒
白いカード上の白いロゴは見えなくなります。画像の右上にある 3 つのボタンで市松模様、白、黒を切り替えられ、選択は Visual Studio を閉じるまで保持されます。カードの最初の背景はオプションで設定できます。
パスの前のサムネイル
ファイルが存在する各パスの前に、行の高さの小さな画像が付きます。色見本のようなものです。アイコンのファイル一覧もひと目でわかります。エディターをすっきりさせたい場合はオフにします。
ソリューション エクスプローラー
ソリューション エクスプローラーで画像ファイルにポインターを合わせると、組み込みのプレビューの代わりに ImageSmith のカードが横に開きます。SVG は描画され (組み込みのプレビューは何も表示しません)、.ico はすべてのサイズを表示し (組み込みのプレビューは 1 つだけ)、画像のスケール バリアントがその下に並びます。
ポインターが項目またはカードの上にある間はカードが表示されたままなので、リンクをクリックできます。ここでは 開く、既定のアプリで開く、パスをコピー、画像をコピー です。ポインターが離れたとき、スクロール、キー操作、ツリーのクリックで閉じます。
フォルダー、コード ファイル、ImageSmith が表示しないものは、組み込みのツールチップのままです。Visual Studio の更新でソリューション エクスプローラーが変わり、ポインターの下の項目を特定できなくなった場合、ImageSmith は何もしません。
アイコン (.ico)
.ico ファイルには、サイズごとに 1 つずつ、複数の画像が含まれます。.ico のカードは、そのすべてを市松模様の上に並べて表示し (128 px を超えるサイズは 128 で表示)、各サイズ、色、BMP と PNG のどちらで保存されているか、バイト数を表に示します。
サイズをクリックすると (帯でも表でも) 選択されます。選択したサイズをコピー で、その画像をクリップボードにコピーします。
行の PNG として保存 は、そのサイズを PNG ファイルに書き出します。すべてのサイズを PNG として保存… はフォルダーを尋ね、サイズごとに 1 つの PNG を書き出します (contoso-16.png … contoso-256.png)。
SVG
SVG ファイルは SharpVectors で描画されます。コード内のカード、ソリューション エクスプローラー、サムネイルのすべてで描画されます。カードでは画像の下に 16、24、32、48 px での表示を並べ、ツール バーのボタン上での見え方がわかります。
情報は viewBox (viewBox がない場合は幅 × 高さ)、ファイル サイズ、図形の数で、ファイルに含まれていれば グラデーション と テキスト も表示されます。描画できない SVG では、画像の代わりにエラーの行が表示されます。
SVG から参照される外部ファイルや URL は一切読み込まれません。
アニメーション GIF
アニメーション GIF はカード内でループ再生され、情報にフレーム数と長さが表示されます: GIF · アニメーション、8 フレーム、0.8 秒。フレームが 1 つの GIF は静止したままです。WebP、TIFF、BMP は PNG や JPEG と同様に表示されます。
スケール バリアント
画像は高 DPI 画面向けに複数のスケールで用意されることがよくあります。ファイルが並んで置かれていれば、カードはそれらを画像の下に並べ、それぞれをスケールとピクセル サイズに比例した大きさで描画します (×2 · 64)。表示中のものは枠で囲まれます。よく使われるスケールが欠けている場合は破線の枠になります。
| 命名規則 | 例 | 欠けているときの破線の枠 |
|---|---|---|
| 倍率 (WinForms、レポート デザイナー) | 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 |
| サイズのサフィックス | icon-16.png, icon-32.png, tent-480.jpg, tent-768.jpg | — |
バリアントをクリックすると、同じカードで表示されます。この行はコード内のカードにもソリューション エクスプローラーにもあります。
認識されるもの
パスは画像ファイルの拡張子で認識されます。各言語がファイル名を書く場所で認識されます:
| 場所 | 例 |
|---|---|
| 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、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) |
| プロジェクト ファイル | <ApplicationIcon>, <Resource Include="…">, <Content Include="…">, MAUI and appxmanifest images |
| .resx | 画像への ResXFileRef と、画像パスである通常の文字列値。 |
| 形式 | PNG, JPEG, GIF, BMP, TIFF, ICO, WebP, SVG |
ソリューション内の別のプロジェクトへの pack URI (/Contoso.Icons;component/Icons/save.svg、バージョンの有無を問わず) は、そのプロジェクトで検索されます。ms-appx:/// は UWP と WinUI の修飾付きファイルも見つけます (Logo.png に対する Logo.scale-200.png)。MAUI の logo.png は Resources/Images/logo.svg を見つけます。
意図的に表示しないもの: URL と data: URI、バインディングとリソース ({Binding …}、{StaticResource …})、補間文字列や変数から組み立てたパス、MSBuild プロパティ、ワイルドカード、pack://siteoforigin:、C# のファイル名だけの指定 ("logo.png" は何を指すかわかりません)。
ヒント
SmithWorks ファミリ共通の 2 種類のヒントです。各テキストは ImageSmith: で始まり、ツールチップには この種類のヒントを表示しない があり、LensSmith があれば行末にもヒントが表示されます。
| ヒント | 表示される条件 | テキスト |
|---|---|---|
| 画像が見つからない | プロジェクトにもディスク上にもない画像へのパス (波線)。URL、変数を含むパス、コード内のファイル名だけの指定はチェックされません。 | ImageSmith: /Assets/banner-old.png is not in the project. |
| 標準サイズのないアイコン | 16、32、48、256 px のいずれかがないアプリケーションまたはトレイの .ico (灰色の点)。Windows が別のサイズを拡大縮小するため、ぼやけて見えます。favicon はチェックされません。 | ImageSmith: tray.ico has no 16 × 16 image — Windows will scale a larger one. |
種類ごとに、設定の エディターのヒント で、またはヒントから直接オフにできます。
設定
ツール › オプション › SmithWorks › ImageSmith。各オプションに、何をするかの短い説明があります。
| オプション | 既定値 |
|---|---|
| ホバー時のプレビュー | オン |
| ソリューション エクスプローラーのカード | オン |
| パスの前のサムネイル | オン |
| プレビューの背景 | 市松模様 |
| ヒント: 画像が見つからない | オン |
| ヒント: 標準サイズのないアイコン | オン |
| Marketplace での評価をお願いする | オン |
設定は %LocalAppData%\ImageSmith に保存されます。既定値に戻す ですべてがオンに戻ります。
よくある質問
パスにポインターを合わせても何も開きません。なぜですか?
ImageSmith は、ディスク上で見つかったファイルに対してのみカードを表示します。パスが画像の拡張子で終わっていて、変数、バインディング、URL から組み立てられていないか確認してください (それらは表示されません)。ファイルがない場合は、代わりにパスに 画像が見つからない の波線が付くはずです。C# のファイル名だけの指定 ("logo.png") は意図的にスキップされます。C# ではフォルダーを含むパスか pack URI だけが読み取られます。
avares://OtherAssembly/… に何も表示されないのはなぜですか?
avares:// や pack URI はアセンブリを指定します。そのアセンブリが開いているソリューションのプロジェクトであれば、ImageSmith はそのプロジェクトを探します。NuGet パッケージや参照された DLL のものであれば、画像はその中にコンパイルされていてディスク上のファイルではないため、表示するものがなく、ImageSmith は見つからないとも報告しません。
SVG の名前空間が間違っているか、ありません。描画されますか?
はい。xmlns="http://w3.org" で保存されたファイルや名前空間のないファイルはよくあります。ImageSmith は描画の直前に SVG の名前空間を設定するので、カードには画像が表示されます。ただしブラウザーはそのようなファイルを拒否することがあるため、修正しておくことをお勧めします。
カードに SVG を描画できないと表示されます。どうすればよいですか?
カードにはエラーの最初の行が表示されます (たとえば行と列を含む XML エラー)。ファイルを修正して、もう一度パスにポインターを合わせてください。変更されたファイルは読み直されます。
ソリューション エクスプローラーの組み込みのプレビューを使い続けられますか?
はい。設定で ソリューション エクスプローラーのカード をオフにしてください。コード内のカードはそのまま使えます。
大きな画像でエディターが遅くなりませんか?
いいえ。画像はバックグラウンド スレッドで、カードに必要なサイズでのみデコードされます。サムネイルは小さくデコードされます。256 MB を超えるファイル (SVG は 8 MB、ICO は 16 MB を超えるもの) は、画像なしで情報だけを表示します。
ImageSmith はどこかに何かを送信しますか?
いいえ。お使いのコンピューター上でソリューションの画像ファイルを読み取るだけで、それ以外は何もしません。テレメトリも通信もなく、SVG がインターネットから何かを読み込むこともありません。
問題の報告や機能の提案はどこでできますか?
GitHub の Feedback リポジトリで Issue を作成してください。バグ、アイデア、認識されないパス用のフォームがあります (非公開の名前は変更してください)。Marketplace の Q&A タブもご利用いただけます。
変更履歴
1.1.0
- SmithWorks ファミリー共通のスタイルで描いた新しいアイコン。
1.0.0
- 最初のリリース: XAML、Razor と HTML、CSS、C#、JSON、プロジェクト ファイル、.resx の画像パスにポインターを合わせたときのカード。スケール バリアント付きのソリューション エクスプローラーのカード。SVG の描画、.ico のすべてのサイズ、アニメーション GIF。パスの前のサムネイル。ヒント「画像が見つからない」と「標準サイズのないアイコン」。1 回限りの評価のお願い。