連載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