画像 Base64 変換
画像を data URI に変換して、CSSやHTMLに直接埋め込める形にします。素のBase64・data URI・CSS・HTML の4つの形をそのままコピーでき、元のサイズと埋め込み後のサイズを並べて確認できます。data URI を貼り付ければ画像に戻すこともできます。処理はすべてこの端末のブラウザ内——画像はどこにも送信されません。
よくある質問
画像はどこかに送られますか？
送られません。読み込みから変換・コピー・ダウンロードまで、すべてブラウザの中だけで処理します。サーバーとの通信はログイン状態の確認・匿名の利用計測・エラー報告のみで、画像そのものが端末の外に出ることはありません。
どんなときに画像を埋め込むとよいですか？
アイコン・区切り線・小さなロゴのように、数KB程度までの画像に向きます。埋め込むと画像1本ぶんの通信が消えるので、画像だけ表示が一瞬遅れてレイアウトがガタつくことがなくなります。いっぽう大きな画像を埋め込むと、HTMLやCSSそのものが太ります。画像ファイルのままなら2回目以降はブラウザの控え（キャッシュ）が効きますが、HTMLやCSSに溶かし込んだ画像はそのページを開くたびに毎回読み直しになります。写真のように数十KB以上ある画像は、埋め込まずファイルのまま置くほうが表示は速くなります。画面には元のサイズと埋め込み後のサイズを両方出しているので、その数字を見て決められます。
Base64にすると、なぜサイズが増えるのですか？
Base64は3バイトのデータを4文字の英数字に置き換える方式だからです。4÷3で約1.33倍、つまり33%ほど大きくなります。加えて末尾の端数を = で埋める分と、data:image/png;base64, という前置きの分が乗るため、数百バイトの小さなアイコンでは1.37倍前後になります。増えるのはあくまで文字列としての長さで、画像の中身は1バイトも変わりません。元のバイト列をそのままBase64にしているので、戻せば元のファイルと完全に同じデータになります。
SVGも変換できますか？
できます。SVGはPNGなどに描き直さず、ファイルのバイト列をそのままBase64にしているので、拡大しても輪郭がぼやけない図形データのまま埋め込めます。日本語の文字を含むSVGもそのまま扱えます。JPG・PNG・GIF・WebP・ICO も同じく、元のバイト列をそのまま変換します——画像を作り直さないので、画質が変わったり容量が増えたりすることはありません。