このギャラリーの内容
このギャラリーでは、2 つの新しい WebP モードを紹介するサンプル画像をいくつか紹介します。 アルファ付き WebP-lossless および WebP-lossy（透明性サポート）。
並べて比較
下の表は PNG 画像（pngcrush と pngout で圧縮）を示しています。 WebP の可逆画像と WebP 非可逆画像（アルファ版による Side-by-Side） あります画像は、通常と同様に、チェック柄の背景に重ねて表示されます。 画像処理ソフトウェアで行われます
なお、Google では、アルファ版と WebP 形式の WebP 非可逆圧縮形式の WebP 画質 90 を 画像の品質をデフォルト品質に変換できます。詳しくは、 詳細については、画像の再現セクションをご覧ください。
PNG に変換されていない WebP 画像が表示されます。これは、 WebP をレンダリングできます対応ブラウザをお持ちの場合は、 WebP ファイルへのリンクは下記をご覧ください。また、このページの画像は 縮小されています。画像をクリックするとフルサイズで表示されます 説明します。
この表には、各モードで取得される画像サイズも記載されています。
PNG | WebP ロスレス | WebP-lossy（アルファ版あり） |
|---|---|---|
| "イエローローズ"1 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG で最適化されたファイルサイズ: 110.7 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP 可逆ファイルサイズ: 79.9 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy（アルファ版）ファイルサイズ: 17.7 KB |
| 「ユーザー用のベビータキスのページ」 2 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG で最適化されたファイルサイズ: 38.1 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP 可逆ファイルサイズ: 27.0 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy（アルファ付き）ファイルサイズ: 13.8 KB |
| "PNG の透明度のデモ" 3 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG で最適化されたファイルサイズ: 213.5 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP 可逆ファイルサイズ: 149.0 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy（アルファ付き）ファイルサイズ: 51.6 KB |
| "グレゴール メンデル生誕 189 周年" 4 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG で最適化されたファイルサイズ: 49.2 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP 可逆ファイルサイズ: 33.2 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy（アルファ付き）ファイルサイズ: 18.3 KB |
| 「オーバーレイ用の透明なコンパス カード」 5 | ||
<ph type="x-smartling-placeholder"></ph>
 PNG で最適化されたファイルサイズ: 126.8 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP 可逆ファイルサイズ: 97.1 KB |
<ph type="x-smartling-placeholder"></ph>
 WebP-lossy（アルファ付き）ファイルサイズ: 57.3 KB |
以下は WebP ファイルへのリンクです（Chrome 22 以降で表示可能）。
| "Yellow Rose": | <ph type="x-smartling-placeholder"></ph> WebP-lossless ファイル（80.1 KB） | <ph type="x-smartling-placeholder"></ph> WebP-lossy（アルファ版）ファイル（18.4 KB） |
| "ユーザー用の baby tux のページ": | <ph type="x-smartling-placeholder"></ph> WebP-lossless ファイル（27.0 KB） | <ph type="x-smartling-placeholder"></ph> WebP-lossy（アルファ版）ファイル（14.1 KB） |
| 「PNG トランスペアランスのデモ」: | <ph type="x-smartling-placeholder"></ph> WebP-lossless ファイル（149.1 KB） | <ph type="x-smartling-placeholder"></ph> WebP-lossy（アルファ版）ファイル（52.6 KB） |
| グレゴール・メンデル生誕 189 周年 | <ph type="x-smartling-placeholder"></ph> WebP-lossless ファイル（33.3 KB） | <ph type="x-smartling-placeholder"></ph> WebP-lossy（アルファ版）ファイル（19.0 KB） |
| "透明なコンパス カード オーバーレイ用": | <ph type="x-smartling-placeholder"></ph> WebP-lossless ファイル（97.1 KB） | <ph type="x-smartling-placeholder"></ph> WebP-lossy（アルファ版）ファイル（57.3 KB） |
画像クレジット
このページの画像は、さまざまな情報源から提供されています。クレジット: 上の画像は、この順番でここにリストされています。
| 1 |
「高解像度の無料のストックフォト - イエロー ローズ 3 - 花」 画像の作成者: Jon Sullivan このファイルはパブリック ドメインにあります。 <ph type="x-smartling-placeholder"></ph> JPEG ソース |
| 2 |
「ユーザーページ用の赤ちゃんのタキス」 画像の作成者: Fizyplankton このファイルはパブリック ドメインにあります。 <ph type="x-smartling-placeholder"></ph> PNG ソース |
| 3 |
「PNG 透明度のデモ」 画像の作成者: POV-Ray ソースコード 写真は <ph type="x-smartling-placeholder"></ph> クリエイティブ・コモンズ <ph type="x-smartling-placeholder"></ph> Attribution-Share Alike 3.0（移行対象外）ライセンスが必要です。 <ph type="x-smartling-placeholder"></ph> PNG ソース |
| 4 |
「グレゴール メンデル生誕 189 周年」 画像の作成者: Google Doodle チーム この画像の作成は Google Doodle チームに感謝します。 <ph type="x-smartling-placeholder"></ph> PNG ソース |
| 5 |
「オーバーレイ用の透明なコンパス カード」 画像の作成者: Denelson83 このファイルは <ph type="x-smartling-placeholder"></ph> クリエイティブ・コモンズ <ph type="x-smartling-placeholder"></ph> Attribution-Share Alike 3.0（移行対象外）ライセンスが必要です。 <ph type="x-smartling-placeholder"></ph> PNG ソース |
画像の再現
再現性のため、および一部の WebP の使用を説明するために 必要な処理については、このモジュールで このギャラリーの画像を生成しています
ツール
PNG 再圧縮では、pngcrush 1.8.13 と ZopfliPNG 1.0.3 が最適です。 使用されます。以下のコマンドライン オプションを使用します。
Pngcrush:
pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png
ZopfliPNG：
zopflipng --lossy_transparent input.png output-candidate.png
すべてのフィルタを含む ZopfliPNG:
zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png
大きなソース画像（表示専用）の一部を再スケーリングするために、
ImageMagick のツール（convert）の最新バージョン（次の URL から入手できます）
https://www.imagemagick.org.正確なコマンドラインは次のとおりです。
convert image.png -resize 240x image_resized.png
WebP ロスレスへの圧縮
「ロスレス」モデルを使用しました。PNG を WebP に変換するための cwebp ツールのオプション できます。出力を最小限に抑えるために、使用したコマンドラインは 次のとおりです。
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
WebP ロスレスのレンダリング
レンダリングには dwebp ツールを使用して、WebP 可逆画像を PNG に戻しました。 使用した具体的なコマンドラインは次のとおりです。
dwebp webp_lossless.webp -o output.png
WebP-lossy への圧縮（アルファ版あり）
PNG を WebP-lossy（アルファ付き）に変換するために cwebp ツールを使用しました。選択内容: WebP 品質 90（非可逆圧縮）、アルファ品質 100（可逆圧縮） です。使用した具体的なコマンドラインは次のとおりです。
cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp
WebP-lossy のレンダリング（アルファ版あり）
そこで dwebp ツールを使用して、WebP-lossy（アルファ付き）画像を PNG に戻しました。 説明します。使用した具体的なコマンドラインは次のとおりです。
dwebp webp_alpha.webp -o output.png