メインコンテンツへ移動
ToolShed
検索
⌘
K
人気
新着ツール
?
読み込み中...
🏠
探す
☰
カテゴリ
🔥
人気
?
について
ホーム
/
画像・軽量ファイル
/
フォーマット対応マトリクス
▨
フォーマット対応マトリクス
image/image-format-support-matrix
JPEG・PNG・GIF・WebP・AVIF・JPEG XLの主要ブラウザ対応状況を2列の表で比較できるリファレンス。
最終更新日
2026-07-03
・ by
yuzlrin
このツールでできること
フォーマット対応マトリクスでは、JPEG・PNG・GIF・WebP・AVIF・JPEG XLの主要ブラウザ対応状況を2列の表で比較できるリファレンス。
関連する観点として フォーマット対応マトリクス、format support、画像変換 を確認し、結果をコピーして別の作業に使えます。
項目
内容
JPEG
全ブラウザ ✓
PNG
全ブラウザ ✓
GIF
全ブラウザ ✓
WebP
2020+ 全ブラウザ ✓
AVIF
2022+ ほぼ全て ✓
JPEG XL
限定 (Chrome非対応)
使い方
表の「項目」列に画像フォーマット名、「内容」列に主要ブラウザでの対応状況が並びます。
JPEG・PNG・GIFは「全ブラウザ ✓」、WebPは「2020+ 全ブラウザ ✓」、AVIFは「2022+ ほぼ全て ✓」と、対応が広がった時期の目安も併記されています。
JPEG XLだけは「限定 (Chrome非対応)」となっているため、主要フォーマットとして採用する前にこの表で確認します。
入力例・出力例
INPUT
AVIF
OUTPUT
2022+ ほぼ全て ✓
2022年以降に主要ブラウザでの対応が広がったことを示しています。
INPUT
JPEG XL
OUTPUT
限定 (Chrome非対応)
Chromeが対応していないため、フォールバックなしで採用するとChromeユーザーに表示されません。
よくある利用シーン
サイトの画像をWebPやAVIFに置き換える前に、フォールバックが必要なブラウザがあるか確認したいとき。
JPEG XLの採用を検討する際、主要ブラウザでの対応状況を先に確認したいとき。
<picture>要素やsrcsetでのフォールバック設計を組む前に、各フォーマットの対応範囲を把握したいとき。
パフォーマンス改善の提案時に、次世代フォーマットの対応状況をクライアントや上長に説明する資料として使いたいとき。
結果確認のポイント
出力サイズ、縦横比、ファイル形式、画質が用途に合っているか確認してください。
フォーマット対応マトリクス、format support、画像変換の観点で、入力内容と出力内容がずれていないか見直してください。
コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。
注意点
重要な元画像は別に保存し、必要に応じて元データと比較してください。
結果を公開・送信する前に、用途に合う形式かを必ず確認してください。
データの扱い / プライバシー
フォーマット対応マトリクスの主要な処理はブラウザ内で実行されます。
入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。
FAQ
よくある
質問
WebP や AVIF の主要ブラウザ対応状況を一覧で比較できますか?
はい。WebP・AVIF・HEIC など次世代フォーマットについて、主要ブラウザでの表示可否をマトリクス形式で一覧化しています。導入時にどの形式が安全に使えるか、フォールバックが必要かを一目で判断できます。
AVIF と WebP のどちらを優先して使うべきか判断できますか?
対応状況の広さと圧縮効率はトレードオフです。本マトリクスで両者のブラウザ対応範囲を比較すると、対応の広い WebP を基本にしつつ、より高圧縮な AVIF を上位ソースとして併用する、といった使い分けの判断材料になります。
対応していないブラウザ向けのフォールバックはどう用意しますか?
AVIF/WebP が未対応のブラウザには JPEG/PNG を代替表示するのが定石です。マトリクスで未対応ブラウザを確認したうえで、<picture> 要素や srcset でフォールバックを組むと安全に新フォーマットを導入できます。
関連ツール
画像圧縮
画像をブラウザ上で圧縮・軽量化。JPEG/WebP出力、品質スライダーで調整。サーバーにアップロード不要で安全。
alt属性チェックリスト
装飾画像、情報画像、リンク画像、キャプション重複、125文字目安など alt 属性の判断項目を表で確認できます。
バナーサイズ一覧
Leaderboard、Medium Rectangle、Mobile Banner など代表的な広告バナー寸法を一覧表示します。
ダミー画像生成
指定サイズのダミー画像(プレースホルダー)をCanvas APIで生成。色・テキスト・フォーマット指定可能。Webデザインに。
favicon生成
1〜2文字またはアップロード画像から 16/32/48/180/192/512px の PNG favicon を canvas で生成します。
ファビコンサイズ一覧
16×16 から 512×512 までの favicon 用途、HTML link タグ、manifest icons の雛形を確認できます。
<figure>タグ生成
入力した画像 URL を src に入れ、loading と decoding を付けた figure/figcaption の雛形を生成します。
アイコンサイズ一覧
favicon、Apple Touch、Android Chrome、Windows Tile、iOS/Android アプリの代表アイコンサイズを用途別に確認できます。