使い方
- Base64 文字列または data:image/webp;base64 URI を貼り付けます。その他の画像形式にも対応しています。
- プレビュー、判別された形式、デコード後のサイズを確認します。
- 変換するには「保存形式」を WebP のままにします。デコードしたバイト列をそのまま保存するには「オリジナル」を選択します。
- .webp ファイルをダウンロードし、元のデータとサイズを比較します。
WebP データの見分け方
WebP は、WAV 音声と同じ RIFF コンテナに格納されます。ファイルは ASCII テキストの RIFF で始まるため、Base64 は UklGR で始まります。その数バイト後にある WEBP というマーカーから、中身が音声ではなく画像であることが分かります。内部の画像は、非可逆（VP8）、可逆（VP8L）、または透過・アニメーション・メタデータを追加した拡張形式（VP8X）のいずれかです。MIME タイプは image/webp です。
WebP に変換するメリット
Google の測定によると、非可逆の WebP は同程度の画質の JPEG より約 25～34% 小さく、可逆の WebP は PNG より約 26% 小さくなります。JPEG と異なり WebP はアルファチャンネルを保持できるため、透過のあるロゴやステッカーもきれいに変換できます。現在の主要なブラウザはすべて WebP を表示できます。
画像をインラインで埋め込む場合、ファイルサイズの小ささは二重に効いてきます。画像が軽くなれば、HTML、CSS、JSON 内の Base64 文字列も短くなるからです。変換後は、WebP を Base64 に変換で新しいファイルを再びエンコードできます。
結果が必ず小さくなるとは限りません。小さなアイコン、すでに十分に圧縮された写真、色数の少ないフラットなグラフィックは、かえって大きくなることがあります。その場合は PNG や JPG のほうが適しています。ここでの変換は、ビルドパイプラインを変更する前に、特定の画像でどれだけ効果があるかを手早く試す方法としても便利です。Base64 の PNG や JPEG を貼り付け、WebP をダウンロードして 2 つのサイズを比較してください。
Pillow で変換する
サーバーで一括処理する場合は、Python の Pillow ライブラリを使えば数行で同じ変換ができます。
import base64, io
from PIL import Image
img = Image.open(io.BytesIO(base64.b64decode(b64_string)))
img.save('output.webp', 'WEBP', quality=80)よくある質問
WebP は透過を保持しますか？
はい。WebP は非可逆・可逆のどちらのモードでも完全なアルファチャンネルに対応しているため、変換後も透明な部分は透明のままです。
アニメーション WebP をそのまま保存できますか？
すべてのフレームを残すには、「オリジナル」でダウンロードしてください。変換は canvas を経由するため、静止画の 1 フレームしか取り込まれません。
WebP の出力は常に入力より小さくなりますか？
いいえ。大きな写真やスクリーンショットは通常小さくなりますが、小さな画像や高度に最適化された画像は大きくなることがあります。ツールに表示されるデコード後のサイズと、ダウンロードしたファイルのサイズを比較してください。
WebP ファイルを開けないソフトウェアがあります。どうすればよいですか？
古い画像ビューアーやオフィスソフトは WebP に対応していないことがあります。同じ Base64 を貼り付けて、代わりに PNG または JPG でダウンロードしてください。