JPEG XL / HEIC / SVG の選び方 — 用途別の画像フォーマット判断

最大の特徴: JPEG からのロスレス再エンコード

JPEG XL は 既存の JPEG ファイルを ロスレスで JXL に変換でき、サイズを 20% 程度削減できる。`JPEG に戻す逆変換も可能』 で、アーカイブや配信の置き換えにリスクが低い。`大量の JPEG 資産を持つメディア企業 / 印刷業界』 で特に有効。

圧縮率

非可逆では AVIF とほぼ同等(JPEG 比 50% 程度削減)。可逆では PNG より大幅に小さい(40〜60% 削減)。`画像をプリプレス用に保管する場合』 『 RAW 風に編集可能性を残したい場合』 に強い。

プログレッシブ表示

` 部分的にダウンロードしながら徐々に画質が上がる』 表示が AVIF より得意。`大きな画像を遅い回線で見せる』 体験で優位。

ブラウザ対応の混乱

2022 年 Chrome が一度サポートを撤退、2024 年に方針転換して `フラグ付きで再対応』。Safari 17+ / Firefox(フラグ付き)は対応するが、Chrome / Edge は 2026 年時点でフラグなしのデフォルト対応はまだ。`Web 配信用には時期尚早』 が現状の評価。

iPhone の撮影標準

iPhone 7 / iOS 11 以降は カメラ設定が `高効率(HEIC)』 がデフォルト。JPEG 比 50% 程度の小ささで同等画質を実現。iCloud 容量節約に直結。

Apple 製品では完全対応

` iOS / iPadOS / macOS / Safari』 は完全対応。`iPhone 撮影 → Mac で表示 → Safari で Web 閲覧』 までシームレス。

非 Apple 環境では弱い

Android / Windows / Chrome / Firefox は標準では HEIC 未対応。Windows 11 は Microsoft Store で `HEIF 画像拡張機能』 をインストールすれば対応するが、デフォルトでは不可。`HEIC ファイルを送られて開けない』 トラブルが頻発する。

特許とライセンス

HEVC ベースなので 商用利用にライセンス料が発生する可能性。これが Web 配信で広く採用されない最大の理由。`Apple は契約済み』 『 個人利用は問題なし』 だが、`サービス側で配信する場合』 は要確認。

無限スケール

ベクター(数式)で描画されるため、どんなサイズに拡大しても劣化しない。Retina ディスプレイや 4K モニタでも常にシャープ。`ロゴ / アイコン / 図表』 で圧倒的に有利。

ファイルが小さい

` シンプルな図形 / アイコン』 ではファイルサイズが数 KB と JPEG / PNG より圧倒的に軽い。`複雑な写真』 は逆に巨大になるので不向き。

CSS / JS で操作可能

` 色を CSS で変える』 『 JavaScript でアニメーション』 『 マウスホバーでパーツを光らせる』 が SVG なら自然にできる。インタラクティブな図表 / グラフで力を発揮。

セキュリティリスク

SVG は XML の中に JavaScript を埋め込めるため、ユーザーアップロードの SVG をそのまま表示すると XSS リスク。`DOMPurify』 や `SVGO』 で清浄化 + `Content-Security-Policy』 でスクリプト無効化が必須。詳しくは サニタイズ・エスケープ・バリデーション も参照。

表示方法は 3 通り

`<img src="logo.svg">`(最も安全、JS 無効)、`<object data="logo.svg">` `<embed>`(JS 有効、SVG が他リソースを読める)、HTML にインライン埋め込み(JS 有効、CSS で色操作可、JS フルアクセス)。用途で使い分ける。

アイコンライブラリ

` Heroicons / Lucide / Material Symbols / Tabler Icons』 のような SVG ベースアイコンライブラリがデファクト。`必要なアイコンだけ tree-shaking でバンドル』 することで、`大きなアイコンフォント(FontAwesome 全部)』 より軽量になる。

SVG スプライト

` 複数の SVG を 1 ファイルにまとめて <use> で参照』 する SVG スプライト。HTTP リクエスト削減になる古典的最適化技法だが、HTTP/2 / HTTP/3 が普及した現代では効果が薄い。`個別 SVG + CDN キャッシュ』 で十分。

最適化(SVGO)

`SVGO』 で メタデータ削除 / パス簡略化 / コメント除去。Figma / Illustrator 書き出し SVG は冗長なメタデータが含まれるので、本番投入前に SVGO を通すのが定石。`30〜50% 削減』 されることが多い。

中間形式として有用

` iPhone で撮影 → iCloud に保存 → Mac で編集 』 までは HEIC のまま使うと容量効率が良い。Apple 製品間の中間形式として優れる。

Web 配信前に変換

` Web に公開するときは AVIF / JPEG / WebP に変換』 が定石。Android / Windows ユーザーへの配信を考えると HEIC は非対応すぎる。`Cloudflare / Cloudinary などで自動変換』 も可能。

SNS / メッセージング

` LINE / Slack / Discord / Twitter / Instagram などはサーバ側で HEIC を JPEG / WebP に自動変換』 する。`ユーザーが投稿 → サービス側で変換 → 配信』 が標準フロー。`自社サービスを作る場合も同じ設計』 が安全。

変換ツール

`Sharp / ImageMagick / heif-convert』 のような OSS で HEIC 読み込み + 出力変換が可能。`libheif』 ライブラリが core。商用利用の場合は HEVC ライセンスの扱いを法務確認すべし。

原則 SVG

` シンプルな線 / 形 / テキストで構成されるロゴ』 は SVG 一択。スケーラブル、軽量、CSS で色操作可。Retina ディスプレイでも常にシャープ。

複雑なロゴは PNG / WebP / AVIF

` グラデーション + テクスチャ + 写真合成のような複雑なロゴ』 は SVG にすると ファイルが巨大化するため、ラスターのほうが軽い。`複雑ロゴは PNG (透過必要) / WebP lossless』 が良い。

favicon / アプリアイコン

`favicon』 は `多サイズ ICO + SVG fallback + PNG fallback』 を `<link rel="icon">` で複数指定するのが現代の標準。アプリアイコンは PNG / WebP の高解像度版を OS が要求するので SVG ではない。

SVG の劣化リスク

` 古い IE / 古い OS / メールクライアント』 では SVG が表示されないことがある。`重要なロゴ (メール署名・印刷物)』 は PNG / JPEG fallback を併用するのが安全。