# Web画像形式の4つの転換点 — GIF・JPEGからAVIF・JPEG XLまでと、いまの選び方 元のページ: サイト制作 2026.10.26 現在のWebサイトで画像形式を選ぶ基準は、ほぼ次の4つに集約されます。図形・ロゴはSVG、写真はAVIFを第一候補にWebPとJPEGのフォールバックを用意、文字を含む画像は可逆（データを捨てない圧縮）のPNGまたはWebP、長いアニメーションはGIFではなく動画。そして2026年10月、Chrome 155とFirefox 158がJPEG XLをデフォルトで解釈するようになり、写真の選択肢がひとつ増えました。 なぜこの結論になるのかは、画像形式が「容量・画質・透過・アニメーション」のどれを担ってきたかという経緯を見るとはっきりします。4つの転換点で整理します。 ## 転換点1：GIFとJPEG — 用途が分かれた（1987年・1992年） GIFは1987年にCompuServeが公開した形式です。色数は8ビットのインデックスカラー（256色のパレット）に限られ、透過は「この1色を完全に透明にする」という方式、そして複数フレームによるアニメーションを持っていました。圧縮は可逆なので、ベタ塗りの図やロゴは劣化しません。 一方、1992年にISO/IEC 10918-1として標準化されたJPEGは、DCT（離散コサイン変換）を使った非可逆圧縮（見えにくい情報を捨てて縮める圧縮）で、写真を桁違いに小さくしました。代わりに透過もアニメーションも持ちません。 ここで「写真は非可逆、図形・ロゴは可逆」という使い分けが生まれました。この軸は形式が増えた現在も変わっていません。画像形式を選ぶときに最初に問うべきは、いまも「これは写真か、図形か」です。 ## 転換点2：PNGとSVG — 透過と解像度非依存（1996年・2001年） PNGは1996年にW3C勧告となった可逆形式で、GIFの制約を2つ外しました。フルカラーを扱えること、そしてアルファチャンネル（ピクセルごとに不透明度を持つ仕組み）による半透明です。MDNも、PNGはGIFより高い色深度と完全なアルファ透過を持つと整理しています。これにより、背景の上に自然に重なる画像が初めて現実的になりました。 ただしPNGにアニメーションはなく、後発のAPNG（image/apng）が補う形になります。MDNによればAPNGはChrome 59、Firefox 3、Safari 8以降で動作し、インジケーターのような短い可逆アニメーションに向きます。 2001年に勧告されたSVGはベクター形式で、拡大しても劣化しません。高解像度ディスプレイが当たり前になった結果、アイコン・ロゴ・図版の領域では実質的にSVGが標準解になりました。ラスター形式をどれだけ改良しても、この領域は取り戻せていません。 ## 転換点3：レスポンシブとWebP — 「1枚を選ぶ」から「出し分ける」へ（2010年代） スマートフォンと高DPI画面の普及で、同じ写真を複数の解像度で用意する必要が生まれました。HTMLに`srcset`・`sizes`・`picture`が入り、ブラウザが条件に応じて候補から選ぶ仕組みが整います。これは形式の話ではありませんが、後の形式移行を可能にした土台です。フォールバックを書ける仕組みがあるからこそ、新形式を本番投入できます。 2010年にGoogleが公開したWebP（後にIETFでRFC 9649として文書化）は、非可逆・可逆・アルファ透過・アニメーションを1形式に統合しました。MDNの数値では、非可逆WebPは同等品質のJPEGより平均25〜35%小さく、可逆WebPはPNGより約26%小さくなります。GIFアニメーションの置き換え先としても使われました。 この段階で、画像の最適化は「どの形式で書き出すか」から「ビルドやCDNでどう生成・配信するか」というパイプラインの設計問題に変わりました。 ## 転換点4：動画コーデック由来の形式と、JPEG XLの合流（2019年〜2026年） AVIFはAV1動画コーデックを静止画に転用した形式で、MDNは非可逆AVIFがJPEGより約50%小さく、WebPよりも圧縮率が高いと記載しています。HDR・広色域・アルファ・アニメーションにも対応し、Chrome、Edge、Firefox、Opera、Safariが対応しています。現時点で写真の第一候補にするのは妥当です。 JPEG XL（ISO/IEC 18181）は経緯が複雑でした。Chromeは2023年に一度サポートを削除しましたが、2026年10月6日公開のChrome 155で、Rustで書き直したデコーダー「jxl-rs」とともにデフォルト有効になりました。Chromeチームの説明では、JPEGより30〜50%良い圧縮、可逆圧縮、HDR、既存JPEGの可逆トランスコードに対応します。同チームは「AVIFとJPEG XLの両方を試すこと」を勧めたうえで、JPEG XLが効くのは高忠実度・可逆の写真、または細かいプログレッシブデコード（読み込み途中から段階的に表示する仕組み）が欲しい場合だとしています。Firefoxは158（2026年10月13日）でデフォルト有効、Safariは17以降が静止画のみ対応です。 注意したいのは、ブラウザが対応したことと、環境全体が対応したことは別だという点です。インストール済みブラウザの更新には時間がかかり、CDN・CMS・画像編集ソフト・メールクライアントの対応状況もばらつきます。JPEG XLは当面、置き換えではなく上乗せの選択肢として扱うのが安全です。 ## いまのサイトで形式を選ぶ基準 歴史を踏まえると、判断は「内容」「透過」「アニメーション」「配信経路を自分で制御できるか」の4点で決まります。具体的には次のとおりです。 - ロゴ・アイコン・図版：SVG。ベクターの元データがなければPNG。 - 写真：AVIFを第一候補に、`picture`でWebP、最後に`img`のJPEGを置く。 - 透過のある写真的な画像：PNGではなくAVIFまたはWebP。可逆PNGより小さくなる。 - スクリーンショットや文字を含む画像：可逆のWebPまたはPNG。非可逆だと文字の輪郭が滲む。 - アニメーション：数秒を超えるものはMP4／WebM動画。短いUIアニメーションはWebPまたはAVIF。GIFは容量面で選ぶ理由がない。 - JPEG XL：既存JPEG資産が大量にある、写真を高品質で出す、プログレッシブ表示が効く、のいずれかに当てはまる場合に検証する。`picture`でJXL→AVIF→WebP→JPEGの順に並べる。 運用面では、形式ごとのファイルを手作業で用意しないことが前提になります。ビルド時に複数形式を生成するか、CDNのAcceptヘッダー（ブラウザが「この形式を解釈できる」と伝えるリクエストヘッダー）による自動変換に任せるかのどちらかです。あわせて`width`／`height`の明示でレイアウトシフトを防ぎ、ファーストビュー外は`loading="lazy"`にします。 新形式を入れるかどうかは、代表的な画像を3〜5枚選び、同じ見た目の品質でファイルサイズを実測して判断してください。圧縮率の一般論よりも、自社の画像（写真が多いか、イラストが多いか、文字入りか）で結果が変わります。JPEG XLについては、Edgeやその他のChromium系ブラウザ、利用中のCDNの対応が揃っているかをあわせて確認し、揃うまではフォールバックを外さないことが現実的な運用です。 画像形式の歴史は、容量・透過・アニメーション・色域をどこまで1つの形式で賄えるかを拡張してきた歴史です。いま決めるべきは単一の正解形式ではなく、`picture`と生成パイプラインで複数形式を出し分けられる状態を作ることです。その状態さえあれば、JPEG XLのような新しい選択肢が増えたときも、設定を1行足すだけで評価と採用が進められます。 ## 出典 - [Chrome for Developers: ChromeへのJPEG XL搭載について（Shipping JPEG XL in Chrome）](https://developer.chrome.com/blog/jpeg-xl-in-chrome) - [Chrome Platform Status: Chrome 155 リリースノート](https://chromestatus.com/release-notes/155) - [Mozilla: Firefox 158 リリースノート](https://www.firefox.com/en-US/firefox/158.0/releasenotes/) - [MDN Web Docs: 画像ファイル形式ガイド](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types) - [Google for Developers: WebPの圧縮技術](https://developers.google.com/speed/webp/docs/compression) - [IETF: RFC 9649 WebP画像フォーマット](https://datatracker.ietf.org/doc/html/rfc9649) - [ISO: ISO/IEC 18181-1 JPEG XL画像コーディングシステム](https://www.iso.org/standard/85066.html) - [Can I use: JPEG XLの対応状況](https://caniuse.com/jpegxl) この記事をシェア ## 最新の記事 [セキュリティ 2026.10.26](https://chot-inc.com/columns/1password-for-agents-credential-security) ### [1Password for Agentsとは何か──AIエージェントにパスワードを渡さずログインさせる仕組みと限界](https://chot-inc.com/columns/1password-for-agents-credential-security) [セキュリティ 2026.10.23](https://chot-inc.com/columns/railway-secret-rotation-incident-october-2026) ### [Railwayが全ユーザーにシークレットキーの失効・再発行を要請 — 事実関係と、鍵を回す順番](https://chot-inc.com/columns/railway-secret-rotation-incident-october-2026) [AI最新情報 2026.10.23](https://chot-inc.com/columns/arc-browser-sunset-december-22-dia-migration) ### [Arcブラウザが2026年12月22日に終了 ― 期限までにやることとDia移行の判断基準](https://chot-inc.com/columns/arc-browser-sunset-december-22-dia-migration) [コラム一覧](https://chot-inc.com/columns)