画像 Base64 変換
CSS や HTML にそのまま貼れるデータ URI に
ブラウザ内で処理
画像
結果
結果
まだ画像がありません
画像をドロップすると、ここに Base64 の結果が表示されます。
Base64 はデータを約33%大きくします。小さい画像にのみお使いください。
小さな画像をデータ URI として埋め込むと、ネットワークリクエストが1つ減ります。全ページに出るアイコンでは効果があります。ただし数キロバイトを超えると割に合いません。Base64 はデータを約3分の1大きくし、単独でキャッシュもできないからです。
使い方
- 1 画像をドロップします。小さなアイコンが最適です。
- 2 データ URI 全体か、Base64 部分だけかを選びます。
- 3 結果をコピーして CSS や HTML に貼り付けます。
よくある質問
どんなときに画像を埋め込むべきですか。
4KB 程度まで、しかもほぼ全ページで使う画像に限ります。それを超えると、サイズの増加とキャッシュが効かなくなる不利が、リクエスト削減の利点を上回ります。
なぜファイルが大きくなるのですか。
Base64 はバイナリ3バイトを ASCII 4文字で表すため、必ず33%増えます。加えて URI の前置きの分も増えます。バイナリをテキストファイルに埋め込むための代償です。
データ URI はキャッシュされますか。
それを含むファイル全体の一部としてのみキャッシュされます。埋め込んだアイコンを1つ変えるだけで、スタイルシート全体を再ダウンロードすることになります。大きな画像の埋め込みが裏目に出るのはこのためです。