使い方
- WebP ファイルをドロップエリアにドロップするか、クリックして選択するか、画像を貼り付けます。PNG や JPEG のファイルも使えます。
- 別の形式から WebP を作成するには、「変換形式」で WebP を選び、「品質」を設定します。
- 必要に応じて「最大幅」を設定し、元のサイズとエンコード後のサイズを比べます。
- data URI、Base64 文字列のみ、HTML の img タグ、CSS の背景画像、Markdown のいずれかの出力を、コピーまたはダウンロードします。
WebP とは
WebP は、Google が 2010 年に公開した画像形式です。VP8 動画コーデックをベースにした非可逆圧縮、独立したロスレスモード、アルファチャンネル、アニメーションを 1 つの形式で備えています。MIME タイプは image/webp で、ファイルが RIFF コンテナであるため、Base64 の出力は UklGR で始まります。Google によると、同程度の画質で比べた場合、ロスレス WebP は PNG より約 26%、非可逆 WebP は JPEG より 25～34% 小さくなります。
WebP が data URI に向いている理由
Base64 はどのファイルにも同じく 3 分の 1 を上乗せするため、元のファイルが小さいほど文字列は短くなります。その点で WebP はうってつけです。透過 PNG のアイコンを WebP に変換すれば、透過を保ったまま通常は小さくなり、JPEG の写真も同程度の見た目の品質でサイズが減ります。ただし品質を非常に高く設定すると、最適化済みの元ファイルより大きくなることがあるため、コピーする前にエンコード後のサイズを確認してください。
アニメーション WebP は、そのままエンコードすればすべてのフレームが保持されます。変換やリサイズを行うと、1 フレームだけが描画し直されます。
ブラウザとクライアントの対応状況
現行の主要ブラウザ（Chrome、Edge、Firefox、Opera、Safari 14 以降）はすべて WebP を表示できます。対応していないのは Internet Explorer などのごく古いブラウザだけです。メールは事情が異なり、Windows 版 Outlook をはじめ、いくつかのデスクトップ向けメールクライアントは WebP を表示しません。メールのテンプレートには PNG または JPEG を使いましょう。
JavaScript で WebP の data URI を作成する
// ユーザーが選択したファイルを読み込む
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// canvas を品質 80% の WebP として再エンコード
const uri = canvas.toDataURL('image/webp', 0.8);ブラウザが WebP のエンコードに対応していない場合、toDataURL は何も通知せずに PNG にフォールバックします。結果が data:image/webp で始まっているか確認してください。
よくある質問
ここで PNG や JPEG を WebP の Base64 に変換できますか？
はい。画像を読み込み、「変換形式」で WebP を選んで「品質」を設定してください。変換にはブラウザに組み込まれたエンコーダーが使われ、結果は data:image/webp としてエンコードされます。
Base64 にしても WebP のアニメーションは保たれますか？
はい。変換を選択せず、「最大幅」も設定していなければ保たれます。その場合、Base64 文字列にはすべてのフレームを含む元のファイルがそのまま入ります。
data:image/webp の画像はすべてのブラウザで表示されますか？
現在の主要なブラウザであれば表示できます。Chrome、Edge、Firefox、Opera、Safari は、いずれも現行バージョンで対応しています。表示できないのは、Internet Explorer と、バージョン 14 より前の古い Safari だけです。