スクリーンショットにはPNGかWebP？3つのファイルを比較

再編集する予定のスクリーンショットには、PNGのオリジナルを保持してください。ウェブサイトで使用する画像には、WebPを試してから、共有する前に最も小さいテキストを確認してください。

CozyToolkitの画像変換ツールを使って、3つのサンプル画像を作成し、エクスポートしました。以下のすべての結果を確認してダウンロードできます。

3つのファイル、同じ寸法

小さなラベル付きのインターフェース、色付きテキストのコードエディタ、グラデーションポスターを描きました。それぞれ1200 × 750ピクセルです。これらは合成例であり、顧客ファイルのスクリーンショットではありません。

PNGエクスポートはブラウザのPNGエンコーダを使用します。WebPエクスポートは品質85で、リサイズやクロップは行いません。表は保存されたファイルのサイズを示しています。

グラデーションが最も大きな削減をもたらしました。そのPNGには滑らかに変化するピクセル値が多く含まれており、非可逆のWebPエンコーダはそれらをよりコンパクトに近似できます。テキストが多い2つのサンプルも小さくなりましたが、ファイルサイズだけでは、テキストがあなたの用途に十分かどうかはわかりません。

これは同等の品質比較ではありません。 ここでのPNGは可逆です。この設定のWebPは非可逆であり、ピクセルを変更する可能性があります。3つの例では、スクリーンショット全般の平均的な削減量を確立することはできません。また、別のエンコーダによる最適化されたPNGは、当社のものより小さい可能性があります。

ダウンロード前に確認すべきこと

上記の2つの形式を切り替えて、ズームインしてください。特に以下を確認してください：

• コードサンプルの色付きの句読点。細かい色付きのエッジは、大きなテキストが問題なく見えても、柔らかくなることがあります。
• インターフェースの小さな「Ready to share」ラベル。
• ポスターの滑らかな遷移。連続したグラデーションではなく、目に見えるバンドを探してください。

また、意図した表示サイズで画像を評価してください。400%で見える不完全さは、小さなプレビューでは無関係かもしれません。ヘルプ記事のぼやけたラベルは問題です。

用途に合わせて形式を選ぶ

マスターコピー、ピクセルレベルの比較、または正確に保つ必要があるテキストにはPNGを保持してください。 また、画像を受け取るアプリがWebPを受け入れない場合の使いやすい代替形式でもあります。

保存されたファイルが十分きれいに見える場合は、ウェブページやプレビューにWebPを試してください。 透明度をサポートしているため、透明な背景だけがWebPを避ける理由にはなりません。WebPは可逆と非可逆の両方のエンコーディングをサポートしていますが、このテストで使用されたブラウザの品質スライダーは、専用の可逆スイッチではありません。100に設定しても、エクスポートが可逆であるとは限りません。違いについては、GoogleのWebP形式ドキュメントを参照してください。

自分のスクリーンショットで試す

1. 画像変換ツールを開き、PNGを追加します。
2. 出力形式としてWebPを選択します。品質85から始め、寸法は変更しないでください。
3. 変換し、結果にズームインしてオリジナルと比較します。
4. 小さな詳細が劣化する場合は品質を上げます。それでも結果が正しく見えない場合は、PNGを保持します。

画像が現在の幅の半分でしか表示されない場合は、リサイズが形式変更よりも多くの容量を節約できる可能性があります。意図的に行ってください：小さい画像は同じ詳細を保持できません。

この比較の方法

2026年9月28日にmacOSのChrome 153.0.8010.53で、ツールと同じ変換関数を使用してテストしました。テスト画像はシステムフォントを使用してブラウザのキャンバスに描画されました。PNG変換ではパレット削減を使用せず、WebPは品質引数0.85のブラウザエンコーダを使用しました。

測定結果をダウンロードして、正確なバイト数とファイルハッシュを確認できます。ブラウザのエンコーダとフォントは異なる場合があるため、別のシステムで例を再実行すると異なるサイズになる可能性があります。上記のパーセンテージはこれらの特定のダウンロードを説明しており、あなたの結果を保証するものではありません。