連載Index（読む順・公開済リンクが最新）: S00_門前の誓い_総合Index
画像フォーマットは、何となくPNGやJPGで決めがち。
一度表示できると、それ以上は深く考えずに採用してしまう。
ただ、その選び方のままだと、拡大表示で輪郭がにじむ／写真が重い／配布サイズが増える。
画像フォーマットは「見た目」だけでなく、配布サイズや高DPI時の見え方、運用の手間まで左右する。
このページでは、PNG/JPG/SVG/BMPの選び方と特徴を、用途から迷いなく決まる形で整理する。
1. このページで手に入るもの
- 画像フォーマットを「好み」ではなく「用途と制約」で決める順番が分かる
- 写真/UI/拡大表示で、PNG/JPG/SVG/BMPの第一候補を言い切れる
- SVGを選ぶ前に「描画手段」を先に決める観点を持てる
- BMPを使う範囲と、配布へ出さない判断が言語化できる
- 画像フォーマット選定フロー（mermaid）を、そのまま貼って運用にできる
- コピペで使える「画像フォーマット選定関数」を持てる（用途と理由を返す）
- 高DPIでボケる/にじむ/重くなる流れを、画像フォーマット選定の段階で減らせる
2. 先に逆引き（症状 -> 原因 -> 対策）
| 症状 | ありがちな原因 | 最短の対策 | 第一候補 |
|---|---|---|---|
| UIの輪郭がにじむ | UIアイコンにJPGを使った | UIは可逆の画像フォーマットへ切り替える | PNG |
| 写真が重い/配布物が太い | 写真をPNGで抱えた | 写真は圧縮効率優先へ切り替える | JPG |
| 拡大表示でボケる | 低解像度PNGを拡大している | 必要サイズを用意するか、図形へ切り替える | SVG または PNG |
| SVGを入れたのに描けない | WinForms標準で描ける前提だった | 描画手段を決める（変換/ライブラリ） | SVG（条件つき） |
| メモリが増える/起動が重い | 高解像度画像を大量に展開している | サイズ/枚数/読み込みタイミングを見直す | PNG/JPG（用途別） |
| 配布が太る | BMPが混在している | 配布に出す画像フォーマットを決める | PNG/JPG |
3. 最短フロー（用途だけで決める）
ここでは、用途と制約から画像フォーマットを決める分岐を1枚にまとめる。
「写真か」「UIか」「拡大表示が前提か」「SVGを描けるか」を順に当てるだけで決まる。
4. 最短テンプレ（コピペ）：画像フォーマット選定をコードに残す
ここでは、レビューコメントや設計メモに貼れる「画像フォーマット選定の戻り値」を用意する。
画像フォーマット名だけでなく「理由」も一緒に返すと、後から見直した時に迷いが戻りにくい。
public enum ImageFormatChoice
{
Jpg,
Png,
Svg,
Bmp
}
public static class ImageFormatPicker
{
/// <summary>
/// 画像の用途と制約から、画像フォーマットの第一候補と理由を返す。
/// </summary>
/// <remarks>
/// 貼る場所：設計メモ、レビューコメント、素材受け入れ基準、リソース追加手順。
/// 使い方：用途を先に真偽で切る（写真/透過/UI/拡大表示/SVG描画可否）。
/// </remarks>
public static (ImageFormatChoice choice, string reason) Pick(
bool isPhoto,
bool needsTransparency,
bool isUiIconOrShape,
bool needsScaleWithoutBlur,
bool canRenderSvgInWinForms,
bool mustShipWithoutExtraSvgRenderer)
{
if (isPhoto)
{
if (needsTransparency)
return (ImageFormatChoice.Png, "写真でも透過が要るためPNG（可逆＋透過）");
return (ImageFormatChoice.Jpg, "写真はJPG（圧縮効率が高く配布が軽くなりやすい）");
}
if (isUiIconOrShape)
{
if (needsScaleWithoutBlur)
{
if (mustShipWithoutExtraSvgRenderer || !canRenderSvgInWinForms)
return (ImageFormatChoice.Png, "拡大表示が要るがSVG描画手段が無いためPNG（必要サイズを用意）");
return (ImageFormatChoice.Svg, "図形/アイコンで拡大表示が前提のためSVG（輪郭が崩れにくい）");
}
return (ImageFormatChoice.Png, "UIの輪郭を綺麗に出すためPNG（可逆）");
}
return (ImageFormatChoice.Png, "迷ったらPNG（互換性が高く扱いが安定しやすい）");
}
}
5. 整理：どこで迷いが生まれるか（考え方 -> 見る順 -> 詰まりポイント）
画像フォーマットは、名前を覚えるより「見る順番」を持つ方が楽。
写真・UI・拡大表示で、気にする点が変わる。
5-1. まず押さえる軸（写真 / UI / 拡大表示）
| 対象 | まず効くもの | 起きやすい困りごと |
|---|---|---|
| 写真 | 配布サイズ | PNGにすると太りやすい |
| UI（線・文字・アイコン） | 輪郭の綺麗さ | JPGだとにじみが出やすい |
| 拡大表示（高DPI/ズーム） | ボケにくさ | 小さいPNGを拡大してボケる |
| 図形（SVG） | 拡大耐性 | 描画手段が未決定で止まる |
5-2. 見る順番（迷ったらここへ戻る）
- 写真か、UIの線や文字か
- 透過が要るか
- 拡大表示が前提か（高DPI/ズーム）
- SVGを描く手段が決まっているか（WinForms側）
- 配布サイズと、素材更新のしやすさ（運用）
5-3. フォーマット選定が効いてくる所（見た目以外）
| 起きること | どうして起きるか | 先に打てる手 |
|---|---|---|
| UIがにじむ | JPGの圧縮ノイズが線や文字に乗りやすい | UIはPNGにまとめる |
| 配布サイズが増える | 写真をPNGで抱えると圧縮が効きにくい | 写真はJPGにまとめる |
| メモリが増える | 表示時は「展開後サイズ」が効く | サイズ/枚数/読み込みタイミングを見る |
補足：画像ファイルが軽くても、表示時に展開されると増える。
例：1920×1080を32bitで扱うと、展開後は約8MB程度になる。
5-4. SVGだけは先に決めることがある
SVGは便利だが、WinForms標準ではそのまま描けない。
使うなら「描く手段」までセットで決める。
- SVG -> PNGへ変換して同梱する
- SVGレンダラー（外部ライブラリ）を組み込む
- SVGを見送り、PNGの複数サイズで運用する
6. 判例（悪い例 -> 直す -> ポイント）
ここでは、実務で起きやすい選択ミスを「直し方」までセットで並べる。
一覧で眺めて該当パターンに当てるだけで、次の手が決まる形にする。
| 状況 | 悪い例 | 直す | ポイント（読みの芯） |
|---|---|---|---|
| UIアイコンの輪郭がにじむ | ボタン/ツールバーのアイコンをJPGで用意する | PNGへ切り替える（透過が要るなら特にPNG） | UIは輪郭が主役になりやすく、圧縮ノイズが目立ちやすい |
| 写真で配布サイズが増える | 写真素材を全部PNGで同梱する | JPGへ切り替える（透過が必要な写真だけPNG） | 写真は圧縮効率が支配的になり、PNGは太りやすい |
| 拡大表示でPNGがボケる | 小さいPNGをそのまま拡大して表示する | 必要サイズを用意する、またはSVGへ切り替える（描画手段まで決める） | 拡大表示が前提なら、素材の準備も前提に含める |
| SVGで実装が止まる | SVGを置けば描ける前提で進める | 変換（SVG -> PNG）かレンダラー導入かを先に決める | SVGは「採用」だけでは終わらず、描画手段まで含む |
| BMPが混在して配布が太る | BMPをそのままリソースへ入れる | 配布に出す素材はPNG/JPGへ切り替える（BMPは限定用途に閉じる） | BMPは配布サイズと展開後メモリが増えやすい |
6-1. 補足（必要になった時だけ読む）
表だけだと「なぜそうなるか」が抜けやすい。
迷いが戻りそうな所だけ、理由を短く足す。
- UIの「にじみ」は、圧縮ノイズが線や文字に乗ることで目立ちやすい
- 写真の「重さ」は、同じ見た目でも圧縮方式で大きく変わる
- 拡大表示は、素材のサイズ準備か図形採用（SVG）かの二択に寄る
- SVGは、WinFormsでの描画手段が決まるまで実装が進みにくい
- BMPは、限定用途に閉じないと配布とメモリの両方が太りやすい
7. チェックリスト（レビューで見る所）
| 観点 | 確認ポイント |
|---|---|
| 用途 | 写真 / UI / 図形 のどれかが文章で残っている |
| JPG | UIの文字・線・アイコンに使っていない |
| PNG | 写真を無制限にPNGへしていない（理由と範囲がある） |
| 拡大表示 | 拡大表示が前提の素材は、サイズ準備かSVG採用のどちらかになっている |
| SVG | WinFormsでの描画手段が決まっている（変換/ライブラリ） |
| BMP | 配布に出る範囲が限定され、理由が残っている |
8. セルフチェック（5問）
- 写真とUIで、第一候補がJPG/PNGに分かれる理由が言えるか
- 透過が要る素材で、JPGを選ばない理由が言えるか
- 拡大表示が前提のUI素材で、PNG複数サイズとSVG採用の分かれ道が言えるか
- SVGを使う時に、先に決めるべき「描画手段」が言えるか
- BMPを配布へ出さない判断を、配布サイズとメモリで説明できるか
回答の目安
- 1：写真は圧縮効率、UIは輪郭の見え方が効く
- 2：透過が扱えず、圧縮ノイズが輪郭に出やすい
- 3：拡大する前提なら、素材準備（複数サイズ）か図形採用（SVG）を選ぶ
- 4：変換で同梱するか、レンダラーを入れるかを先に決める
- 5：配布が太りやすく、展開後メモリも増えやすい
9. 関連トピック
連載Index（読む順・公開済リンクが最新）: S00_門前の誓い_総合Index