WebP はファイルを生成します PNG より 25 ～ 35% 小さい 同じ画像でも、PNG で有名な透明な背景が維持されます。この 1 つの事実が、なぜ Google が WebP を構築したのか、そしてなぜ最近のほとんどの Web サイトが WebP を現在提供しているのかを説明しています。 PNG の反論は範囲内です。PNG は、WebP について聞いたことのないソフトウェアも含め、これまでに作成されたすべてのプログラムで開かれます。つまり、WebP が明らかに優れているため、選択はどの形式が技術的に優れているかということではありません。最新の Web サイトに最適化するのか、どこでも互換性を保証するために最適化するのかが重要です。このガイドでは、圧縮、透明度、品質モード、ブラウザのサポート、アニメーション、ページ速度の面で 2 つを詳細に比較し、選択するための明確なルールを示します。

WebP とは何か、そして Google がそれを作った理由

WebP は、Google が 2010 年にリリースした画像形式で、VP8 ビデオコーデックの圧縮技術に基づいて構築されています。目標は単純で、Web 画像を小さくしてページの読み込みを速くするというものでした。 Google は、画像がページの重量の大部分を占めており、すべての画像を 3 分の 1 削減すればウェブの速度が大幅に向上することを知るデータを持っていました。 WebP は、最初から 3 つのフォーマットを一度に置き換えるように設計されており、 PNG の透明度、JPG の写真圧縮、GIF のアニメーション 単一のコンテナで。その野心があるからこそ、PNG ではできないことができるのです。

PNG とは何か、そしてそれが存続する理由

PNG は、ロスレス DEFLATE 圧縮を使用し、完全なアルファチャネルを追加する、特許フリーの GIF の代替として 1996 年に登場しました。これは、ロゴ、アイコン、スクリーンショット、およびシースルーの背景を必要とするグラフィックの標準となりました。約 30 年にわたる普遍的なサポートがその堀となっています。すべてのブラウザ、オペレーティングシステム、電子メールクライアント、オフィススイート、および画像エディタは、セットアップなしで PNG を読み取ります。どうしても画像を未知の場所で開かなければならない場合、PNG は絶対に失敗しない形式です。

ファイルサイズ: WebP の方が明らかに優れています

WebP は、基本的にすべてのシナリオで PNG よりも圧縮率が高くなります。透明性のある一般的なロゴまたは UI グラフィックの場合、 25 ～ 35% の削減 PNG から WebP へロスレスで移行します。 WebP の非可逆モードに移行すると、アルファチャネルを維持したまま、節約率が大幅に増加し、多くの場合 60 ～ 70% 増加します。 PNG には損失を伴うオプションがまったくないため、ローエンドで競争することはできません。数十の画像アセットを含むサイト全体では、その差はページ読み込みごとに数百キロバイトに増加します。

このギャップは、よりスマートな圧縮によって生まれます。 PNG の DEFLATE アルゴリズムは ZIP から借用した汎用メソッドで、文字通りの繰り返しを見つけるのに優れています。 WebP は、画像専用に構築された予測コーディングを使用し、各ブロックを近隣ブロックから推測し、差分のみを保存します。この画像を意識したアプローチにより、DEFLATE では認識できない節約が見出されます。これが、2010 年のフォーマットが 1996 年のフォーマットを一貫して上回る理由です。

透明性: どちらも透明性を備えていますが、WebP ではさらに優れた機能を備えています

JPG とは異なり、どちらの形式でも完全なアルファチャネルが含まれるため、どちらの形式でもロゴは透けて見えます。しかし、WebP は、PNG が一致できないものを追加します。 非可逆モードでの透明性。 PNG の透明度には可逆圧縮のみが適用されるため、半透明のグラフィックは完全な可逆ウェイトで保存する必要があります。 WebP を使用すると、透明な背景と強力な圧縮を同時に実現できます。これはまさに重い PNG ロゴに必要なものです。軽量でありながら透明性を維持する必要がある UI アセットと製品のカットアウトの場合、この組み合わせが WebP の最も強力な主張です。

品質: 可逆モードと非可逆モード

WebP は両方のモードを提供するため、PNG にはない柔軟性が備わっています。

ロスレスWebP は、ピクセル単位で PNG と正確に一致し、より小さいファイルを生成します。品質のトレードオフはなく、サイズだけが重要です。
非可逆 WebP JPG と同様に細部を破棄し、ファイルをさらに縮小します。JPG とは異なり、透明度を維持できます。

PNG はロスレスのみを提供するため、サイズが大きくなります。完璧なコピーが必要な場合は、ロスレス WebP を使用すると、より小さいコピーが得られます。目に見えない損失を許容できるのであれば、非可逆 WebP のサイズは数分の一になります。いずれにしても、PNG を上回る WebP 設定があります。

ブラウザとソフトウェアのサポート

これが PNG の唯一の本当の利点ですが、その利点は狭まりつつあります。 最新のブラウザはすべて WebP をサポートしています、Chrome、Firefox、Safari、Edge を含むため、オープン Web では互換性の問題は基本的に解決されています。ギャップは他の場所にも存在します。一部の古いデスクトップソフトウェア、特定の電子メールクライアント、古いバージョンの Office、および従来のプラットフォームは依然として WebP を拒否しています。アップロードフォームはもう 1 つの罠です。多くの場合、JPG と PNG のみが受け入れられ、WebP ファイルは完全に拒否されます。

つまり、正直にまとめると、WebP は Web サイトにとっては安全ですが、未知のシステムに渡すファイルにとっては危険です。 PNG は、ユーザーの制御を離れるものに対する普遍的なフォールバックのままです。

アニメーション: WebP も GIF に置き換わります

PNG にまったく欠けている機能の 1 つはアニメーションです。標準 PNG は 1 つのフレームを保持し、APNG 拡張機能は存在しますが、サポートには常に一貫性がありませんでした。 WebP のサポート フルアルファによるネイティブアニメーション、GIF 256 の代わりに数百万色を表示しながら、同等の GIF よりもはるかに小さいファイルを生成します。短いループグラフィックの形式のどちらかを選択する場合、WebP は PNG と GIF の両方に決定的に勝ります。

WebP が Web サイトを高速化する理由

ページの重みが直接入力される 最大のコンテンツ豊富なペイント、Google の Core Web Vitals の 1 つであり、ランキングシグナルとして確認されています。通常、画像はページ内で最も重いものであるため、各画像を 3 分の 1 に削減すると、読み込み時間、LCP スコア、直帰率に目に見える影響が生じます。高速なページは変換効率も向上するため、パフォーマンスの作業には 2 倍の費用がかかります。

ほとんどのサイトで使用されている実際のパターンは進歩的です。つまり、WebP をサポートするブラウザに WebP を提供し、残りの部分では PNG または JPG にフォールバックします。最新の HTML は、picture 要素を使用してこれを自動的に処理し、ほとんどのコンテンツ管理システムとイメージサービスがこれを実行します。古いクライアントに対しては何も中断することなく、スピードを向上させることができます。

各形式をいつ使用するか

使用する WebP Web サイトの画像、特に透明度のあるロゴやアイコンの場合、ファイルが小さいほどページが高速になります。
使用する WebP 透明性と小さいサイズが必要な場合。これは両方を提供する唯一の一般的な形式であるためです。
使用する PNG 古いソフトウェアや電子メールクライアントなどのプログラムでイメージを開く必要がある場合。
使用する PNG 受け入れられる形式を明示的にリストし、WebP を省略するアップロードフォームとシステムの場合。
使用する PNG 永久に保存するファイルのサイズよりもユニバーサルサポートが重要であるため、アーカイブマスターとして使用できます。

PNG を WebP に変換する方法

変換にはインストールは必要ありません。私たちのを開きますコンバーター、PNG を追加し、WebP をエクスポートする透明性を維持するオプションを選択します。処理は HTML5 Canvas API を通じてローカルで実行されるため、何もアップロードされず、複数のファイルを一度にバッチ処理できます。透明な背景はそのまま残りますが、ファイルは大幅に明るくなります。完全なウォークスルーは、 PNG から WebP へのガイド。

AVIFはどうですか？

文脈として知っておく価値があります: AVIF は、WebP よりもさらに圧縮率が高く、多くの場合さらに 20% 小さくなる新しい形式で、透明性とアニメーションもサポートしています。ブラウザのサポートは良好ですが、WebP にはわずかに遅れており、ソフトウェアのサポートはさらに遅れています。今日のほとんどのサイトにとって、WebP はコスト削減とサポートのバランスが最適な実用的な選択肢であり、AVIF の導入が進むにつれて注目する価値があります。 PNG は両方の場合でもフォールバックのままです。

判決

WebP は、ファイルサイズの小ささ、ロスレスモードとロッシーモードの両方での透過性、アニメーション、最新のブラウザの完全なサポートなど、技術的なメリットで総合的に優れています。 PNG は、依然として重要な 1 つの点で勝利を収めています。それは、疑いなくどこでも開かれているということです。 Web サイトには WebP を使用し、未知の場所に送信するものには PNG を使用し、両方が必要な場合は PNG フォールバックで WebP を提供します。ワイドフォーマットの画像の場合、 PNG と JPG のガイド写真が収まる場所をカバーします。

実際のサイズの例

抽象的なパーセンテージは実際の数値よりも役に立ちません。そのため、一般的な資産におけるギャップは次のようになります。

あ 500×500ピクセルのロゴ 透過あり: PNG-24 として約 45 KB、可逆 WebP として約 30 KB、アルファチャネルがそのままの非可逆 WebP として 12 KB 以下。
あ 全幅のヒーローグラフィック ソフトシャドウの場合: 多くの場合、PNG として 400 KB 以上、可逆 WebP として約 260 KB、非可逆 WebP として 100 KB 未満になります。
あ UIアイコンセット 20 個の小さなグラフィックス: セット全体は、損失の多いチューニングを行う前に、損失なしで約 200 KB から 130 KB に減少する可能性があります。

ヒーローの例を 12 ページにまたがると、低速接続でのロード時間が数秒短縮されます。これは、まさに Core Web Vitals が測定する種類の違いです。

既存の PNG ライブラリの変換

ほとんどのサイトはクリーンな状態で開始されません。彼らはすでに数百の PNG を展開しています。設定に応じて 3 つのアプローチが機能します。サイトが最新のフレームワークまたは CMS で実行されている場合、画像パイプラインはおそらく WebP を自動的に変換して提供するため、ファイルではなく設定を変更します。 CDN またはイメージサービスを使用している場合、ほとんどのサービスでは 自動フォーマットネゴシエーション、それを受け入れるブラウザには WebP を配信し、受け入れないブラウザには PNG を同じソースファイルから配信します。ファイルを手動で管理している場合は、アセットのバッチ変換と参照の更新が機能しますが、最も手間がかかります。

どちらのルートを選択する場合でも、元の PNG は保持してください。これらはあなたのマスターであり、後で WebP を拒否するシステムに必要になる場合があります。

避けるべきWebPの一般的な間違い

WebP に移行する人々にはいくつかの罠があります。

アーカイブマスターを変換する: デスクトップソフトウェアでは WebP サポートの範囲が狭いため、配信用にコピーを変換し、PNG オリジナルを保持します。
テキストグラフィックスで非可逆 WebP を使用する: 非可逆圧縮は、JPG と同様に鮮明な文字を汚します。スクリーンショットやテキストの多い画像にはロスレス WebP を使用します。
フォールバックをスキップする: PNG や JPG の代替を使用せずに WebP を提供すると、古いクライアントや一部の電子メールコンテキストのイメージが壊れます。
WebP を送信してフォームをアップロードする: 多くの場合、JPG と PNG のみを受け入れ、ファイルを完全に拒否します。

これらはいずれも WebP を避ける理由にはなりません。 They are reasons to use it where it belongs, which is delivery to modern browsers, while keeping PNG for masters and for anything leaving your control.

ブラウザが実際に形式を選択する方法

2 つのフォーマットを提供することは複雑に思えますが、メカニズムはシンプルで自動です。すべてのブラウザは、各画像リクエストとともに、理解できる形式をリストした Accept ヘッダーを送信します。サーバーまたは CDN はそのヘッダーを読み取り、同じ URL からサポートをアドバタイズするブラウザーには WebP を返し、サポートをアドバタイズしないブラウザーには PNG を返します。 HTML では、最初に WebP ソースをリストし、次に PNG フォールバックをリストすることで、picture 要素を使用して同じことを明示的に行うことができます。ブラウザは読み取れる最初のものを選択し、残りは無視します。いずれにしても、 訪問者は壊れた画像を見ることはありません、最新のブラウザは静かに小さいファイルを取得しますが、古いブラウザは互換性のあるファイルを取得します。

よくある質問

WebP は PNG よりも優れていますか?

技術的にはそうです。 WebP ファイルは 25 ～ 35% 小さくなります、透明度を維持し、PNG にはない非可逆モードとアニメーションモードを追加します。 PNG はユニバーサル互換性のみで勝利します。

WebP は PNG のような透明度をサポートしていますか?

はい、そしてさらに。 WebP は、可逆モードと非可逆モードの両方でアルファチャネルを維持します、一方、PNG は可逆圧縮による透明性のみを提供します。

WebP は PNG に比べてどれくらい小さいですか?

通常、 ロスレスで 25 ～ 35% 小型化、非可逆モードでは透明度を維持しながら 60 ～ 70% 小さくなります。

すべてのブラウザは WebP をサポートしていますか?

最新のブラウザはすべて WebP をサポートしています、Chrome、Firefox、Safari、Edge を含みます。一部の古いデスクトップソフトウェアやアップロードフォームは依然としてこれを拒否します。

どの形式が透明性とアニメーションをサポートしていますか?

WebP は両方を実行します。 PNG には透明度がありますが、信頼できるアニメーションはありません。GIF はアニメーションしますが、透明度は 256 色に制限されています。

Web サイトには WebP と PNG のどちらが適していますか?

WebP、スピード重視。 ファイルが小さいほど最大コンテンツフルペイントが向上します、Core Web Vitals ランキングシグナル。古いクライアントに対して PNG フォールバックを提供します。

WebP または AVIF を使用する必要がありますか?

とりあえずWebP。 AVIF は圧縮率が約 20% 優れていますが、サポート範囲は狭いですしたがって、WebP は今日、節約と互換性の実用的なバランスを保っています。

WebP ファイルをフォームにアップロードできますか?

そうでないこともよくあります。 多くのアップロードフォームは JPG と PNG のみを受け入れますしたがって、システムが受け入れられる形式をリストし、WebP を省略する場合は、それらのいずれかに変換します。

既存の PNG ファイルを WebP に変換する必要がありますか?

マスターではなく、配信用にコピーを変換します。 オリジナルの PNG を保持する、デスクトップソフトウェアとアップロードフォームでは WebP のサポートが狭いためです。

非可逆 WebP はテキストを含むスクリーンショットに適していますか?

いいえ。 非可逆圧縮により鮮明な文字が汚れる、JPGとまったく同じです。テキストの多いグラフィックやスクリーンショットにはロスレス WebP を使用します。

WebP を使用した PNG フォールバックはまだ必要ですか?

最大限の安全性を確保するには、はい。 最新のブラウザはすべて WebP を読み取りますただし、古いデスクトップソフトウェア、一部の電子メールクライアント、および多くのアップロードフォームではまだ対応していません。

ブラウザは WebP と PNG のどちらをロードするかをどのようにして判断するのでしょうか?

を通じて すべてのリクエストで送信される Accept ヘッダーに、サポートされている形式のリストを示します。サーバーと CDN はそれを読み取り、WebP または PNG フォールバックを自動的に返します。