WebP を Base64 に変換

WebP を Base64 に変換する方法

1. .webp ファイルをボックスにドロップするか、ファイル選択で選びます。
2. 形式を変えるには、変換先 で PNG か JPEG を選びます。形式を維持 のまま 最大幅 を設定すると、選んだ 品質 で WebP として再エンコードされます。
3. 出力形式 を選びます。デフォルトは data URI です。
4. 出力をコピー を押します。メーターに入力と出力のサイズの比較が表示されます。

WebP が data URI に向いている理由

Base64 はエンコードするものに約 3 分の 1 を加えるので、元が小さいほど有利です。非可逆の WebP は同程度の画質の JPEG より小さいことが多く、可逆の WebP は透過を保ったまま PNG より小さいことがよくあります。インラインで使いたいアイコン、商品のサムネイル、プレースホルダーなら、WebP はたいてい PNG や JPEG より短い文字列になります。

アニメーション WebP はそのままエンコードされます。GIF と同じく、再エンコードのオプションは最初のフレームしか描画しないので、動く画像ではこれらのオプションを使わないでください。

送り先が WebP を受け付けない場合

今も PNG や JPEG を想定しているソフトウェアは多くあります。Base64 画像を受け付ける一部の API、古いデスクトッププログラム、文書生成ツール、多くのメールクライアントなどです。ほかの場所で先にファイルを変換する代わりに、ここで 変換先 を PNG か JPEG にして、結果を直接エンコードしてください。

• PNG は透過とすべてのピクセルを保ちますが、サイズは大きくなります。
• JPEG は写真なら小さくなりますが、透過部分は白で塗りつぶされます。

HTML の <a download> や JSON の出力に入るファイル名は、新しい形式に合わせて変わります。たとえば banner.webp は banner.png になります。

ブラウザでの WebP への再エンコード

ほとんどのブラウザは canvas から WebP を書き出せるので、WebP をリサイズしたり品質を変えたりしても WebP のままです。Safari はそれができません。その場合ツールは PNG で代替してプレビューの下にそう表示しますが、写真の PNG は元の WebP の数倍の大きさになることがあります。WebP で出力したいなら Chrome、Edge、Firefox を使うか、元のファイルをそのまま使ってください。

Base64 から WebP を見分ける

WebP は、WAV 音声や AVI 動画と同じ RIFF コンテナを使います。

UklGRlAAAABXRUJQVlA4IEQAAAD...
└─┬─┘└─┬──┘│└─┬┘
 RIFF  size W EBP

UklGR が示すのは「RIFF」であることだけです。形式タグの WEBP は 8～11 バイト目にあり、12～16 文字目に XRUJQ として現れ、その後に VP8 チャンクを表す VlA4 が続きます。コードで形式を判定する場合は、両方の部分を確認してください。ほかのシグネチャは よく見る Base64 のプレフィックス に一覧があり、Base64 を WebP に で文字列をファイルにデコードできます。

よくある質問