WebP → Base64 変換ツール
最大 10 MB。アップロードは行われず、ファイルが端末から出ることはありません。
<img src> 属性や CSS の url() でそのまま使えます。
data: プレフィックスなし。JSON のペイロードや API 向けです。
ファイルのプライバシーを保護
この変換はすべてブラウザー内で行われます。画像がアップロードされることはなく、ここでエンコードした内容が当社のサーバーや第三者に渡ることもありません。
WebPからBase64への変換について
WebP はもともと小さいほうです。PNG なら 40 KB になるファイルが、WebP では 15 KB 前後に収まることも珍しくありません。つまり Base64 が上乗せする 33% は、他のどの形式よりも実数として軽く済みます。そのため WebP は埋め込みの候補として際立って優秀です——サイズとは無関係の落とし穴が一つあることを除けば。
WebPをBase64に変換する手順
- 1 .webp ファイルをアップロード欄にドロップします。
- 2 エンコード後の各形式が、変換前後のサイズとともにすぐ表示されます。
- 3 用途に合う形式をコピーしてください。データURI、生の文字列、CSS ルールのいずれかです。
埋め込みはフォールバックを奪う
WebP を配信する通常のやり方は、picture 要素で WebP を先に、JPG や PNG を後に並べ、各ブラウザーに理解できるほうを取らせる方法です。データURIはそれができません。単一のメディアタイプを持つ 1 本の文字列でしかなく、WebP をデコードできないブラウザーでは何も表示されません。今日では対応範囲がきわめて広いため、一般のウェブでこれが問題になることはまれです。しかしメールソフト、古い組み込みブラウザー、旧式エンジンで HTML を描画するデスクトップアプリでは、確実に問題になります。
よく合う場面
実行環境を自分で押さえられ、WebP がデコードされると分かっている場所すべてです。社内ダッシュボード、管理パネル、ブラウザー拡張、Electron アプリ、モダン環境のみを想定したデザインシステムなど。こうした場では、WebP の圧縮と追加リクエストなしを同時に得られます。埋め込みが到達しうるほぼ最良の状態です。一方、数パーセントに満たない訪問者もなお重要な公開マーケティングページでは、picture 要素と通常のファイルを選んでください。
より大きな損失はやはりキャッシュ
WebP のファイルは小さいため、つい何枚も埋め込みたくなります。第二の代償が積み重なるのはまさにそこです。埋め込まれた画像はすべてスタイルシートの中に住んでいるので、CSS を 1 行変えただけで全部が一度に無効になり、訪問者はひとそろい丸ごと再ダウンロードします。小さな画像を 10 枚埋め込むのは、キャッシュされた 10 個のファイルより悪くなりがちです。枚数は少なく、1 枚 1 枚は本当に小さく保ち、残りはブラウザーがキャッシュしてページをまたいで使い回せる通常のファイルのままにしておきましょう。