画像 Base64 変換 — データURI・CSSを生成

このツールについて

画像ファイルのバイト列を、英字・数字と少しの記号からなるテキストに書き換えるツールです。このテキストはdata:image/png;base64,...のようなデータURIとして、HTMLやCSSにそのまま書き込めます。処理はすべてブラウザー内で行われ、逆方向のBase64から画像に戻す変換も同じページでできます。

使い方

1. 画像 → Base64を選び、画像をドロップするか選択します。1ファイル、5 MBまでです。
2. プレビューの下で、元のサイズ、Base64テキストのサイズ、増加率、サイズの目安を確認します。
3. 必要な欄（データ URI、Base64 文字列のみ、CSS background-image、HTML img タグ）でコピーを押します。長い値は先頭だけが表示されますが、コピーされるのは全体です。テキストファイルとしてダウンロードすることもできます。
4. 逆に変換するときはBase64 → 画像を選び、Base64またはデータURIを貼り付けます。プレビューと画像をダウンロードボタンが表示されます。

しくみ

• エンコード：標準のBase64（RFC 4648）で、3バイトを4文字にし、長さが4の倍数になるよう=で埋めます。テキスト文字列ではなくファイルのバイトを直接変換するので、どんな画像も元どおりにデコードできます。
• MIMEタイプ：ファイル先頭のバイト（JPEG、PNG、GIF、WebP、SVGなど）から判定し、data:の後ろに入れます。拡張子が間違っていても問題ありません。
• HTMLタグ：画像のサイズを読み取れた場合はwidthとheightを付けます。
• サイズの目安：10 KBまでは埋め込み向き、50 KBを超えたら要検討、500 KBを超えたらアップロードしてリンクするのがおすすめです。
• デコード：URLセーフなBase64（-と_）や、=の埋め草がないものにも対応します。宣言されたタイプと実際の画像が違う場合は実際のタイプを使い、そのことをお知らせします。;base64のないデータURIは読み込みません。

例

項目	値
元のファイル	2.1 KBのアイコン
Base64テキスト	約2.8 KB（+33%）
CSS	background-image: url("data:image/png;base64,...");
HTML	<img src="data:image/png;base64,..." width="16" height="16" alt="">