PNG と JPG と WebP — ユーザーが怒りを爆発させる前に正しいフォーマットを選ぼう

あなたはサイトを数週間かけて完璧に仕上げました。デザインは鋭く、コードもきれいですが、その後、3.8MBのPNGのヒーロー画像をホームページに配置し、Lighthouseスコアが急激に下がるのを見ます。すべての人がこれに遭遇しています。

適切な画像フォーマットを選ぶことは華やかではない作業ですが、ページ読み込み時間、コアウェブビタル、全体のユーザー体験において最も効果的な最適化の一つです。このガイドは、PNG、JPG、WebP、AVIF、あるいはGIFにいつ使うべきか、そして間違った選択がどれだけコストをもたらすかを明確に示します。

短い答え（急いでいる場合）

• 写真や複雑な画像： WebPを使用します。JPGにフォールバックします。
• ロゴ、アイコン、テキストを含むスクリーンショット： WebPを使用します。PNGにフォールバックします。
• アニメーション： WebPまたは動画を使用します。GIFは最終手段です。
• 現代ブラウザをターゲットにした先端プロジェクト： AVIFを試してください。

まだ読んでいますか？良いです。ここに完全な概要があります。

PNG vs JPG vs WebP：実際に何が違うのか？

JPG（JPEG）— ワークホース

JPEGは1992年に登場し、現在でもウェブ上で最も広く使われているフォーマットの一つです—その理由があります。それは 損失圧縮により、画像データを削除してファイルサイズを小さくしています。写真の場合、品質設定70–85の範囲では人間の目にはほとんど見えません。

JPGが崩壊する場面：テキスト、線画、ロゴ、または鋭いエッジや平坦な色を持つすべてのもの。この損失圧縮は、テキストの周りにブロック状のスムージングやアイコンのぼんやりとしたエッジを引き起こします。そのような用途では、損失なしの圧縮が必要です。

1200×800の写真の典型的なJPGファイルサイズ： 品質が良い場合、約150–250KB。

PNG — 損失なし、透過性があり、しばしば大きすぎる

PNGは 損失なし圧縮 を使用しており、すべてのピクセルが正確に保存されます。これは、ロゴ、UIスクリーンショット、平坦な色を持つイラスト、または透過背景が必要なすべての画像に適しています。 透過背景JPGは透過性を提供できません。PNGは提供できます。

問題点：損失なし圧縮はファイルサイズを大きくします。フルカラーの写真をPNGで保存すると、同等のJPGに比べて3–5倍のサイズになります。これは200×200のロゴには問題ありませんが、フルブレードのヒーロー画像には災難です。

1200×800の写真の典型的なPNGファイルサイズ： 約2–4MB。（本当にそれです。これがLighthouseスコアが泣いている理由です。）

WebP — 現代のデフォルト

グーグルが開発し、現在のすべての現代ブラウザでサポートされています。WebPは JPGと同等の視覚品質で25–35%小さいファイル を提供し、 PNGよりも26%小さい 損失なし画像を提供します。また、透過性をサポートしており、JPGとPNGの両方をほとんどの場合に置き換えることができます。

WebPは損失圧縮と損失なしモードを提供し、アニメーションをサポートしており、GIFの代替として有効です。ブラウザサポートは優れています：Chrome、Firefox、Safari（14以降）、Edge、Operaすべてがネイティブでサポートしています。

1200×800の写真の典型的なWebPファイルサイズ： 約100–180KB。同じ品質で、意味のあるサイズの縮小。

AVIF — 最先端

AVIFはAV1動画コーデックから派生しており、 圧縮効率がWebPを上回る — 同じ品質レベルでJPGよりも50%小さい。また、HDRや広色域を他のウェブフォーマットよりも優れた方法で処理できます。

欠点：ブラウザサポートは成長中ですが、まだ普遍的ではありません（Safari iOS 15以下にはない）。2025年のほとんどのプロジェクトでは、WebPが安全なデフォルトです。現代ブラウザのみをターゲットにしている場合や、効率的にエンコードできるインフラがある場合にAVIFを使用してください。

GIF — ゾンビフォーマット

GIFは256色に制限され、アニメーションでは大きなファイルを生成し、何年も前に技術的に廃れたものです。それでも、Slackチャネルや製品リリース発表の場でまだ現れています。

ウェブ上でアニメーションを必要とする場合、WebPアニメーションまたは—より良い選択肢として—ループ動画を使用してください。アニメーションGIFは、10倍小さい動画ファイルで同等に動作します。2025年にGIFを使用する唯一の正当な理由は、動画やWebPをサポートしないプラットフォーム（一部のメールクライアント、古いCMS）への互換性です。

形式比較表

ここに概要を一覧で示します：

形式	圧縮	透明性	アニメーション	最適な用途	ブラウザのサポート
画像	ロスレス	いいえ	いいえ	写真、現実的な画像	ユニバーサル
PNG	ロスレス	はい（アルファ）	いいえ	ロゴ、UI、テキストが多い画像	ユニバーサル
ウェブP	損失圧縮および損失なし	はい	はい	ほぼすべて	すべての現代ブラウザ
AVIF	損失圧縮および損失なし	はい	はい	高品質の写真、HDR	Chrome、Firefox、Safari 16以降
画像	損失なし（256色）	はい（1ビット）	はい	シンプルなアニメーション（古くからのもの）	ユニバーサル
SVGA	ベクター（スケーラブル）	はい	はい（CSS）	アイコン、ロゴ、イラスト	ユニバーサル

実際の影響：コアウェブビタル

画像フォーマットは2つのコアウェブビタルメトリクスに直接影響します：

最大コンテンツ表示（LCP）

LCPは、最も大きな可視要素—通常はヒーロー画像—が読み込まれるまでにかかる時間を測定します。モバイル接続で3MBのPNGヒーロー画像は、LCP予算を完全に吹き飛ばします。同じ画像をWebPで300KBにすると、読み込み時間は大幅に短縮されます。Googleのランキングシグナルはこの数字に注目しています。

実用ルール：ほとんどのケースではLCP画像は200KB未満でなければなりません。もし現代サイトでフル幅のヒーロー画像なら、150KB未満を目指してください。複雑な写真の場合は、 srcset を用いて、異なるビューに異なるサイズを提供してください。

累積レイアウトシフト（CLS）

CLSはフォーマットに関して直接的な影響はありませんが、ここでは述べておく価値があります：画像が明示的な width と height 属性を持たない場合、ページがその画像の到着に再構成されます。常に <img> タグにサイズを設定してください—フォーマットがどれであっても。

各フォーマットの使用タイミング：決定ガイド

JPGを使用する場合：

• 古いブラウザ、メール、古いCMSへの普遍的な互換性が必要
• 広範なアудィエンスに写真を提供し、WebPを提供できない場合
• WebPを提供できない場合に、 <picture> 要素内の信頼できるフォールバックが必要

PNGを使用する場合：

• ピクセルごとの正確な損失なし品質が必要（ドキュメント用スクリーンショット、UIモックアップ）
• 透過性が必要で、WebPを提供できない場合
• JPGのアーティファクトが明らかになるような硬いエッジ、平坦な色、またはテキストを持つ画像

WebPを使用する場合：

• 現代ウェブプロジェクトを構築している（2025年ではこれがデフォルトになるべきです）
• JPGまたはPNGよりも小さいファイルサイズを必要として、視覚品質に差がない場合
• 透過性が必要で、PNGの重さを避けたい場合
• GIFをアニメーションコンテンツに置き換える場合

AVIFを使用する場合：

• アудィエンスが現代ブラウザにアクセスしており、最大の圧縮を必要としている場合
• HDRまたは広色域の写真を提供している場合
• AVIFを即時エンコードできる画像CDNインフラを持っている場合

SVGを使用する場合：

• アイコン、ロゴ、またはスケーラブルに表示できるようにするイラストが必要な場合
• 要素をCSSでアニメーションまたはスタイル化したい場合
• ファイルサイズが重要で、パスで構成された画像（ピクセルではなく）の場合

複数フォーマットを

で提供する方法 <picture> 要素は、各ブラウザに最適なフォーマットを提供する方法を許します：

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

ブラウザは最初にサポートするフォーマットを選択します。現代ブラウザはAVIFを、やや古いブラウザはWebPを、それ以外はJPGを取得します。JavaScriptは不要です。

フォーマット間の変換

フォーマットを変換する必要がある場合、何もインストールせずに Image Converter tool iotools.cloudでPNG、JPG、WebP、AVIF、GIFなど、すべてを直接ブラウザ内で処理できます。アップロードし、ターゲットフォーマットを選択し、ダウンロードします。アカウントやウォーターマークは不要です。

これは、一時的な変換に特に有用です：クライアントのロゴPNGをページに投入する前にWebPに変換する、またはドキュメントサイトのスクリーンショットを一括変換するなど。

結論

PNGまたはJPGにすべてをデフォルトにする時代は終わりました。WebPは、圧縮、品質、互換性のバランスがほぼすべてのウェブ用途に適しており、2025年では最初の選択肢です。JPGとPNGを必要に応じてフォールバックとして保持し、AVIFのブラウザサポートが成熟するのを注視してください。

ユーザーはフォーマットに気づかないでしょう。彼らはページが2秒で読み込まれるか8秒で読み込まれるかを気付きます。彼らが怒りを爆発させる前に正しい選択をしましょう。

あなたも好きかもしれません