画像フォーマット完全解説：JPEG、PNG、WebP、AVIF、その先へ
By Artur1分で読めます
ウェブ上の画像には、すべてフォーマットがある。JPEG、PNG、WebP、AVIF。それぞれ圧縮のやり方が違うし、得意なことも違う。
フォーマット選びを間違えると、画像が無駄に大きくなる。ページの読み込みが遅くなって、訪問者は待ちきれずに離脱してしまう。
逆に正しいフォーマットを選べば、見た目はきれいなまま、ファイルサイズをぐっと小さくできる。
このガイドでは、主要な画像フォーマットをひとつずつ解説していく。それぞれ何が得意で、どんな場面で使うのがベストなのか。読み終わる頃には、自分のプロジェクトに最適なフォーマットがわかるはずだ。
画像フォーマットとは、画像がファイルとして保存される方法のことだ。
これによって決まるのは、ファイルサイズ、見た目の品質、そして透過やアニメーションなどの機能。つまり、フォーマット選びがそのまま画像の使い勝手に直結する。
圧縮には大きく2種類ある。
ひとつは非可逆圧縮（ロッシー圧縮）。人の目では気づかないデータを捨てて、ファイルを小さくする方法だ。JPEGがこの代表格。WebPやAVIFもこの方式を使える。
もうひとつは可逆圧縮（ロスレス圧縮）。1ピクセルの情報も失わずに、ファイルだけを縮小する。PNGがこの方式だ。WebPにもロスレスモードがある。
フォーマットの選択が実際に影響するポイントを見てみよう。
圧縮の仕組みをもっと詳しく知りたいなら、画像圧縮の完全ガイドを読んでみてほしい。
JPEGは、世界でいちばん広く使われている画像フォーマットだ。1992年に生まれて、あらゆるデバイス、ブラウザ、アプリで対応している。どこでも確実に表示される、安心感のあるフォーマットだ。
仕組みとしては、画像を小さな8x8ピクセルのブロックに分けて、見えにくい細部を削除する。品質設定が80〜95%なら、劣化はまず目に見えない。設定を下げすぎると、ブロック状のノイズが出てくる。
JPEGが向いている場面：
JPEGが向かない場面：
品質設定は0〜100で選べる。ウェブ向けなら75〜85がベストバランスだ。90を超えても、見た目はほぼ変わらないのにファイルだけが大きくなる。
JPEGは今でも写真の安全なデフォルトだ。でも2026年のウェブでは、もっと賢い選択肢がある。WebPなら同じ品質で30%小さいファイルになる。わざわざJPEGで配信する理由は、もうほとんどない。
PNGは可逆圧縮を使う。すべてのピクセルがそのまま維持されるから、画像の情報は一切失われない。
だから、精密さが大事な画像にはPNGが最適だ。スクリーンショット、ロゴ、図表、UI要素、テキストやシャープなラインが含まれるもの。エッジがくっきりしたまま保存できる。
もうひとつの大きな特徴が、透過への対応。透明な背景のロゴや、どんな背景色にもなめらかに馴染むグラフィックが作れる。JPEGにはこれができない。
ただし、トレードオフがある。それはファイルサイズだ。
写真をPNGで保存すると、JPEGの3〜10倍になることも珍しくない。写真には何百万もの微妙に違う色があって、ロスレス圧縮ではそこまで小さくできないからだ。
PNGが向いている場面：
PNGが向かない場面：
ちなみにPNGには2種類ある。PNG-8は256色限定で、シンプルなグラフィックなら非常に軽い。PNG-24は何百万色とフル透過に対応していて、ほとんどのツールはこちらをデフォルトで出力する。
最近では、ウェブグラフィックのPNGはWebPやSVGに置き換わりつつある。WebPのロスレスならPNGと同じ品質で25〜30%小さくなるし、ロゴやアイコンならSVGのほうがさらに軽い。
WebPは、Googleが2010年に作ったモダンフォーマットだ。ひとことで言うと、JPEGとPNGのいいとこ取りを、もっと小さいファイルサイズで実現してくれる。
非可逆も可逆もどちらもOK。透過にも対応。アニメーションもできる。以前はJPEG、PNG、GIFと使い分けていたケースを、WebPひとつでカバーできるようになった。
具体的な数字を見てみよう。
ブラウザ対応もほぼ完璧だ。Chrome、Firefox、Safari、Edge、主要なモバイルブラウザ、全部対応している。全世界のユーザーの97%以上がWebPをそのまま表示できる。
2026年のウェブ画像なら、まずWebPを選んでおけば間違いない。互換性の心配なしに、しっかりファイルサイズを減らせる。
技術的な詳細が気になる人は、こちらのガイドへ：WebP圧縮：なぜJPEGより優れているのか
WebPファイルはJPEGより同品質で25-35%小さい。WebP圧縮の仕組み、ブラウザサポート、変換方法を解説。
AVIFとWebPを徹底比較。ファイルサイズ、ブラウザ対応状況、エンコード速度、画質の違いを実データで解説。あなたの画像に最適なフォーマットが見つかります。
非可逆圧縮と可逆圧縮の違いを解説。画質を保つ方法とファイルサイズを最も小さくする方法を紹介します。
TinyPNG、Squoosh、CompressIMGを徹底比較。一括処理、対応フォーマット、画質調整、料金、APIの違いを分かりやすく解説します。
AVIFは、いま注目されている最新の画像フォーマットだ。AV1動画コーデックがベースで、Google、Apple、Mozilla、Netflixなどが開発に関わっている。
圧縮効率はWebPをさらに上回る。同じ見た目の品質で、WebPより20〜30%小さい。JPEGと比べると50%小さくなることもある。
とくに得意なのが、滑らかなグラデーションや肌の色合い、微妙な色の変化がある写真だ。かなり圧縮してもクリーンな見た目を保てる。JPEGやWebPだとアーティファクトが出始めるようなレベルでも、AVIFはまだきれいに見える。
各フォーマットを比べてみよう。
| フォーマット | JPEGとの一般的なサイズ比 | 透過 | アニメーション | ブラウザ対応 |
|---|---|---|---|---|
| JPEG | 基準 | 非対応 | 非対応 | 100% |
| PNG | 3〜10倍大きい | 対応 | 非対応 | 100% |
| WebP | 25〜35%小さい | 対応 | 対応 | 97%以上 |
| AVIF | 40〜50%小さい | 対応 | 対応 | 93%以上 |
じゃあ弱点は？ エンコード速度だ。AVIFはWebPの5〜20倍遅い。リアルタイム処理や大量の画像を一気に変換するときは、この差が効いてくる。ブラウザ対応も約93%で、ほとんどカバーしているものの、まだ完全ではない。
もっと詳しく比較したい人は、AVIF vs WebP：どちらの圧縮が優れている？をチェックしてみてほしい。
主要4フォーマット以外にも、特定の用途で活躍するフォーマットがある。簡単に紹介しよう。
GIFはアニメーション画像の元祖だ。256色しか使えないから写真には向かないけど、シンプルなアニメーションやミーム、リアクション画像なら問題なし。
ファイルサイズはモダンフォーマットと比べると大きめ。アニメーションWebPやAVIFのほうが、品質もサイズも優秀だ。でもGIFはどこでも確実に動くし、メッセージ文化に深く根付いている。なくなることはないだろう。
GIFの出番： SNSやメッセージで共有する簡単なアニメーション。それ以外ならアニメーションWebPを選ぼう。
SVGは、ここで紹介している他のフォーマットとは根本的に違う。ベクターフォーマットだからだ。
ピクセルの色を保存するんじゃなくて、形や線、曲線を数学的に記述する。だからどれだけ拡大しても品質が落ちない。16pxでも1600pxでも、同じようにシャープだ。
しかもシンプルなグラフィックなら驚くほど軽い。PNGで50KBのロゴが、SVGなら3KBで済むこともある。
SVGの出番： ロゴ、アイコン、イラスト、チャート、形状とテキストで構成されるグラフィック。写真には使わない。
JPEG XLは、JPEGの正式な後継を目指して設計されたフォーマットだ。
圧縮性能はWebPやAVIFを超える。非可逆も可逆もOK。HDRや広色域にも対応。さらに既存のJPEGファイルを品質を一切落とさずに20%小さくできる、というユニークな機能もある。
スペック上は、歴代最強の画像フォーマットと言っていい。ただ、現実には課題がある。Chromeが2023年にサポートを打ち切ってしまった。Chromeなしでは、ウェブでの普及は厳しい。Safariは対応済み、Firefoxは実験的に対応している状態だ。
写真のアーカイブ用途では活躍するかもしれない。でもウェブ向けなら、今はWebPとAVIFで十分だ。
シンプルな判断ツリーを紹介しよう。迷ったらここを見てほしい。
ロゴ、アイコン、シンプルなグラフィック？ SVGがベスト。SVGが使えないなら、PNGかWebPロスレスで。
ウェブ向けの写真？ まずWebP。フォーマットネゴシエーションができるなら、AVIFをメインにしてWebPをフォールバックにすると最強だ。
共有用や印刷用の写真？ JPEGを使おう。どこでも確実に動く。
透過が必要？ WebPかPNG。互換性を最優先にするならAVIFは避けたほうが無難だ。
アニメーション？ 品質重視ならWebP。互換性重視ならGIF。
スクリーンショットやテキスト画像？ PNGかWebPロスレス。非可逆圧縮はテキスト周辺にノイズが出やすい。
ほとんどのウェブサイトなら、こんなシンプルな戦略でうまくいく。
アクセスが多いサイトで、もっとファイルサイズを削りたいなら、AVIFも加えよう。対応ブラウザにはAVIFを配信して、それ以外にはWebPにフォールバックする形だ。
圧縮設定の選び方については、ロッシー vs ロスレス圧縮の違いも参考になるはずだ。
トレンドはシンプルだ。画像の品質は保ったまま、圧縮性能はどんどん良くなっている。
AVIFはまだ普及の途中だ。エンコード速度が改善されて、ブラウザ対応がもう少し広がれば、数年後にはデフォルトの座を取る可能性が高い。
JPEG XLは、Chromeが方針を変えるか、Appleエコシステムのような大きな後押しがあれば、復活の道もあるかもしれない。
面白いのは、AIベースの圧縮が台頭してきていること。ニューラル画像コーデックは、画像データのパターンを学習して、AVIFよりもさらに効率的に圧縮できる。まだ実験段階だけど、将来的に画像圧縮のあり方を根本から変える可能性を秘めている。
今の段階で覚えておけばいいことはシンプルだ。ウェブのデフォルトはWebP。余裕があればAVIFを追加。特定のケースでJPEGとPNGを使い分ける。これだけでOKだ。
画像は、ページの重さの大部分を占めている。正しいフォーマットを選ぶだけで、その重さを半分にできる。
CompressIMGなら簡単に試せる。画像をアップロードして、最適なフォーマットで圧縮して、違いを自分の目で確かめてみよう。登録不要ですぐ使える。
CompressIMG
画質を落とさず画像を圧縮。無料で高速、ブラウザで完結します。