0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
設定
画像を Base64 に変換して HTML、CSS、または JSON に埋め込むか、Base64 文字列を画像にデコードします。PNG、JPEG、GIF、WebP、SVG、BMP をサポートしています。
画像をドラッグするか、クリックして選択してください
PNG、JPEG、GIF、WebP、SVG、BMP
仕組み
画像を Data URI 形式（data:image/…;base64,…）の Base64 文字列に変換します。別ファイルや追加の HTTP リクエストなしで、HTML や CSS に直接埋め込めます。
結果は元のファイルより約 33% 大きくなるため、小さな画像（アイコン、ロゴ、パターン、プレースホルダー）に使うのが望ましいです。
デコードモードでは、Base64 文字列または完全な Data URI を受け付け、最初のバイトから画像の種類を判別し、ダウンロード可能なプレビューを表示します。
例
logo.pngdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…接頭辞 data:image/png;base64, は種類を示します。符号化された PNG はすべて iVBORw0KGgo で始まり、これはそのファイルシグネチャに対応します。background-image: url("data:image/png;base64,iVBORw0KGgo…");Data URI は CSS ルール内でそのまま使え、外部ファイルなしで画像を埋め込めます。ユースケース
- data URI を使って小さなアイコンやロゴを CSS/HTML に埋め込み、余分なリクエストを避ける。
- 画像を JSON、設定ファイル、データベースの中に保存する。
- テキストしか受け付けない API やメール（MIME）で画像を送る。
- Base64 文字列や Data URI から画像を復元してプレビューする。
よくある質問
すべての画像を Base64 に変換すべきですか？
いいえ。サイズが約 33% 増え、ブラウザーは画像を個別にキャッシュできません。小さな画像には最適ですが、大きな画像にはほぼ常に別ファイルのほうが良いです。
どの画像形式に対応していますか？
符号化時はいずれも対応します（PNG、JPEG、GIF、WebP、BMP、SVG）。デコード時は、ファイルの最初のバイトから種類を自動判別します。
なぜ Data URI はこんなに長いのですか？
Base64 は 3 バイトごとに 4 文字で表すため、テキストは元のバイナリより約 33% 大きくなります。特に画像では普通のことです。
私の画像はサーバーにアップロードされますか？
いいえ。画像はすべてブラウザー内で読み込まれ符号化され、コンピューターから外に出ることはありません。