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 を併用するのが安全。