JPEG・PNG・WebP の違いと使い分け完全ガイド｜どれを選ぶべきか

Webサイトに画像を掲載するとき、「JPEG でいいか、PNG の方がきれいか、最近よく聞く WebP はどう使うのか」と迷う場面は多い。形式を間違えると、ページの読み込みが遅くなったり、透過が消えて背景が白く塗りつぶされたりと、見た目や Core Web Vitals に直接影響する。本記事では三つの形式の仕組みから実際の選び方、変換の手順までを実践的に整理する。

JPEG・PNG・WebP、それぞれ何が違うのか

JPEG（.jpg）

JPEG は 非可逆圧縮 を採用した形式で、人間の目が感知しにくい色差情報を間引いてファイルサイズを小さくする。写真や複雑なグラデーションとの相性が良く、品質 75〜85 程度に設定すれば視覚的な劣化をほぼ感じさせずに大幅な軽量化が可能だ。ただし 透過（アルファチャンネル）は非対応 で、保存を繰り返すたびに画質が劣化する点に注意が必要。

PNG（.png）

PNG は 可逆圧縮 を採用しており、圧縮・解凍を繰り返しても元のピクセル情報が完全に保持される。ロゴ・アイコン・スクリーンショットなど、エッジが鋭くテキストを含む画像で威力を発揮する。透過に対応 しているため、背景を透明にしたロゴをWebサイトに配置する用途では事実上の標準。その分、写真のような複雑な色変化を含む画像ではファイルサイズが JPEG より大きくなりやすい。

WebP（.webp）

WebP は Google が開発した形式で、可逆・非可逆の両モードと透過をすべてサポートする。Google の公式データ によると、非可逆 WebP は同等画質の JPEG に比べて約 25〜34% 小さく、可逆 WebP は同等の PNG より約 26% 小さい。Can I use のデータ では 2024 年時点で主要ブラウザのサポート率は 97% を超えており、実用上の互換性問題はほぼ解消されている。

どれを使うべきか：用途別の判断基準

迷ったときは次の三つの問いで絞り込める。

1. 写真か、テキスト・ロゴか？
   • 写真 → WebP（次点で JPEG）
   • テキスト・ロゴ・イラスト → WebP（次点で PNG）
2. 透過が必要か？
   • 必要 → WebP または PNG（JPEG は不可）
3. 古いシステムや特定の印刷環境など WebP 非対応の環境か？
   • 該当する → JPEG（写真）または PNG（ロゴ等）にフォールバック

比較表

結論として、新規 Web 制作で特別な制約がなければ WebP を第一候補にするのが現時点での合理的な選択だ。既存の JPEG・PNG 資産がある場合は、それらを WebP に変換することでページ速度の改善が見込める。

実際に形式を変換する方法

オンラインツールを使う場合の注意点

Smallpdf や TinyPNG、Adobe Express といった有名なオンラインツールは手軽だが、ファイルをいったんサーバーにアップロードして処理する仕組みをとっている。社外秘のスライドキャプチャや顧客データを含む画像を変換する際は、利用規約とプライバシーポリシーの確認が必要になる。

ブラウザ内で処理する方法

サーバーにファイルを送りたくない場合、画像形式変換ツール を使うとブラウザ内だけで変換が完結する。WebAssembly ベースで動作するため、ファイルは外部に送信されない。DevTools の Network タブを開いた状態で変換を実行しても、画像データの通信が発生しないことを自分で確認できる。

操作手順は次のとおりだ。

1. 画像形式変換ツール をブラウザで開く
2. 変換したいファイルをドラッグ＆ドロップ、または「ファイルを選択」からアップロード
3. 出力形式（JPEG / PNG / WebP）を選択する
4. 必要に応じて品質を調整し、「変換」を実行
5. 変換後のファイルをダウンロードする

初回ロード後は Service Worker によってキャッシュされるため、オフライン環境でも動作する。

よくある誤解と落とし穴

「PNG は常に高画質」は正確ではない

PNG は可逆圧縮なので情報の欠落はないが、ファイルサイズが大きくなりやすく、ページ速度に悪影響を与えることがある。写真を PNG で保存しても画質は上がらず、サイズだけが増える。写真は WebP か JPEG を使う方が現実的だ。

「WebP は古いブラウザで使えない」は今や過去の話

Internet Explorer の終了（2022 年 6 月）以降、主要なビジネス環境で WebP が表示できないケースは大幅に減った。社内システムが特定の旧ブラウザを強制している場合を除き、WebP の採用を躊躇う理由は薄い。

JPEG の再保存劣化は累積する

JPEG を編集・保存するたびに非可逆圧縮が適用され、画質が段階的に落ちる。マスターデータは PNG や WebP（可逆モード）で保管し、配布・公開用に JPEG や非可逆 WebP を都度書き出す運用が望ましい。

まとめ

• 写真・バナー → WebP（互換性が問題なければ）、次点で JPEG
• ロゴ・アイコン・透過が必要な画像 → WebP または PNG
• 新規 Web 制作全般 → WebP を基本とし、フォールバックが必要な場合のみ JPEG/PNG を使う
• 変換時にファイルをサーバーに送りたくない場合 → ブラウザ完結型の 画像形式変換ツール が選択肢になる

形式の選択一つで LCP（Largest Contentful Paint）や CLS（Cumulative Layout Shift）といった Core Web Vitals 指標に影響が出る。小さな意思決定の積み重ねがページ全体のパフォーマンスと SEO に効いてくる。