Base64 から WebP へ変換

Base64 を WebP に変換する手順

1. Base64 か、data:image/webp;base64,... 形式の URI 全体を貼り付けます。CSS の url() や <img> タグのように、URI を含むコードのままでもかまいません。
2. ステータス行に 検出 WebP と表示されることを確認し、プレビューとその上の寸法を確かめます。アニメーション WebP はプレビューで再生されます。
3. ファイルをダウンロード を押します。拡張子は webp に設定されます。

WebP の 3 つの種類

WebP は RIFF コンテナで、WEBP タグの直後に 3 種類のチャンクのいずれかが続きます。タグは固定のオフセットにあるため、種類は Base64 でも決まった位置に現れます。

UklGR と XRUJQ の間の 6 文字はファイルサイズを表し、ファイルごとに変わります。（WEBP に由来する）XRUJQ は常に 12〜16 文字目に、（VP8 に由来する）VlA4 は 17〜20 文字目にあります。注目すべきは 21 文字目で、I、T、W のいずれかです。

種類によって、ファイルを変換したときの結果が変わります。可逆 WebP は PNG の代わりとして十分使えます。非可逆 WebP はすでに細部が失われているので、PNG に変換してもファイルが大きくなるだけで画質は戻りません。拡張形式のファイルは複数のフレームを持てますが、静止画形式に変換すると最初のフレームしか残りません。

コードで WebP の種類を判別する

Python で同じ判定をするには、チャンクのタグと、拡張形式ならフラグのバイトを読みます。

import base64

def webp_kind(b64: str) -> str:
    data = base64.b64decode(b64.split(",", 1)[-1])
    if data[:4] != b"RIFF" or data[8:12] != b"WEBP":
        return "not WebP"
    chunk = data[12:16]
    if chunk == b"VP8 ":
        return "lossy"
    if chunk == b"VP8L":
        return "lossless"
    flags = data[20]
    parts = ["extended"]
    if flags & 0x10:
        parts.append("alpha")
    if flags & 0x02:
        parts.append("animated")
    return ", ".join(parts)

Pillow で書き出した WebP ファイルに対しては、lossy、lossless、透過付き非可逆画像なら extended, alpha、アニメーションなら extended, animated を返します。詳しくは Python での Base64 をご覧ください。

RIFF が WebP とは限らない

UklGR が意味するのは「RIFF」だけです。WAV 音声や AVI 動画も同じように始まり、違いは 8〜11 バイト目のタグにあります。デコーダーはこのタグを確認するので、ここに WAV を貼り付けると「これは WebP ではなく WAV のようです。」と表示され、.wav として保存するボタンが出ます。再生するには Base64 から音声へ を使ってください。

WebP の Base64 が使われる場面

• Canvas の書き出し：toDataURL("image/webp", quality) を使った場合です。結果は必ず確認してください。WebP エンコーダーを持たないブラウザは黙って PNG を返します。
• 画像 API や CDN：WebP を受け付けるクライアントには WebP を返します。ブラウザが取得した画像なら、thumbnail_jpg という名前のフィールドにも WebP が入っていることがあります。
• インラインのプレースホルダーやアイコン：HTML や CSS では、WebP のほうが PNG や JPEG より短い文字列になります。
• チャットのスタンプ：WebP であることが多く、アニメーションの場合もあります。

古いプログラムが保存したファイルを受け付けない場合は、ここに表示される SHA-256 と、プログラムが受け取ったファイルのハッシュを比べてください。一致するなら、そのプログラムが WebP を読めないということなので、PNG か JPEG のコピーを渡すのが解決策です。

よくある質問