画像をBase64に変換
画像を、CSSやHTMLにそのまま貼り付けられるBase64文字列またはdata URIに変換します。
またはここに画像をドロップ
最大 30 MB画像はブラウザの中で処理され、アップロードされることはありません- 1選択
画像を選択します。
- 2調整
出力形式を選びます。Base64のみ、data URI、CSSのbackground、HTMLのimgタグから選べます。
- 3ダウンロード
ワンクリックでコピーします。
「画像をBase64に変換」の使い方
貼り付ける形を選ぶ
data URIは src="…" やCSSの url() にそのまま入ります。素のBase64はJSONや設定ファイル向きです。CSSのbackground-image、HTMLの<img>は、そのまま貼れば動く1行がほしいときのためのものです。選んだものはワンクリックでコピーできます。
小さいものに限って使う
Base64は元のファイルより3割ほど大きくなり、別ファイルとしてキャッシュされずHTMLやCSSの中に居座ります。割に合うのは、小さなアイコンやプレースホルダー、スペーサーなど10 KB以下のものです。50 KBを超えると警告が出ます。ページの読み込みが目に見えて遅くなるからです。
知っておきたい代替手段
SVGはBase64にするよりマークアップとして貼るほうがたいてい優れています。編集でき、CSSで色も変えられ、圧縮も効きます。また複数のページに出てくる画像は、ブラウザが一度キャッシュして使い回せる普通の画像ファイルのままにしておくほうが得です。
よくある質問
写真はサーバーにアップロードされますか？
いいえ。すべての処理はブラウザの中で行われるため、写真が端末の外に出ることはありません。タブを閉じれば、何も残りません。
Base64にするなら、どのくらいのサイズまでが適切ですか？
目安は10 KB未満です。Base64にすると元のファイルより約33%大きくなるため、大きな画像をインライン化するとページの表示が遅くなります。