ファイルを Data URI にエンコードしてインライン埋め込みする
小さな画像、フォント、ファイルを data: URI に変換すると、別々の HTTP リクエストなしで HTML、CSS、Markdown に直接埋め込めます。
- 1
Data URI(data:[<mime>][;base64],<data>)は、ファイルの内容を URL に直接埋め込みます。ブラウザはネットワークリクエストなしでインライン表示します。HTML/CSS の小さなアイコン、フォント、スプライトに便利です。
- 2 Base64 エンコーダー →
ファイルのバイトをアップロードまたは貼り付けます。ツールは改行のない Base64 文字列を出力します。
- 3 Base64 画像プレビュー →
ファイルが画像の場合、ここでプレビューして、埋め込む前に Base64 が正しくレンダリングされることを確認します。
- 4 MIME タイプリファレンス →
ファイルの正しい MIME タイプ(例:image/png、font/woff2、text/css)を調べて、Data URI のプレフィックスに使います。
- 5
URI を組み立てます:data:<mime>;base64,<base64>。<img src="..."> や CSS の url("...") に貼り付けてください。Data URI は約 32 KiB 以下に保ってください。それより大きいとパース性能が低下し、ブラウザによっては制限があります。
よくある質問
- Data URI と通常のファイルはどう使い分けますか?
- 小さくて変更頻度の低いアセット(アイコン、小さなスプライト)には Data URI を使います。HTTP リクエストの削除が、Base64 の約 33% のサイズ増加を上回るからです。大きなファイルや頻繁に変わるアセットは、キャッシュヘッダー付きの個別ファイルとして配信してください。
- なぜ Data URI が表示されないのですか?
- よくある原因:MIME タイプの欠落または誤り、バイナリデータに ;base64 フラグがない、Base64 文字列内の改行。Base64 は改行のない単一の行である必要があります。
このタスクを解決するワークフロー
Ascii85 から Base64 へ変換
Ascii85 をデコードし、より広い互換性のために Base64 として再エンコードする。 パイプライン
Base2048 から Base64 へ変換
Base2048（絵文字）をデコードし、標準転送のために Base64 として再エンコードする。 パイプライン
Base32 から Base64 へ変換
Base32 エンコード文字列を生バイトにデコードし、よりコンパクトな表現のために Base64 として再エンコードする。 パイプライン
Base58 から Base64 へ変換
Base58 をデコードし、標準互換性のために Base64 として再エンコードする。 パイプライン
Base64 エンコード後デコードのラウンドトリップ検証
テキストを Base64 にエンコードし、デコードしてラウンドトリップが元のデータを保持することを検証する。 パイプライン
Blowfish 暗号化後に Base64 エンコード
Blowfish で暗号化し、テキストセーフな転送のために Base64 エンコードする。 パイプライン
DES 暗号化後に Base64 エンコード
DES で暗号化し、レガシー互換性のために Base64 エンコードする。 パイプライン
URL 転送用の JSON ペイロードのエンコード
JSON ドキュメントを URL パラメータ用に準備する: 整形、Base64 エンコード、パーセントエンコード — ネストされたパラメータデコードチェーンの正確な逆順。 パイプライン
AES 暗号化後に Base64 エンコード
平文を AES で暗号化し、テキストセーフな転送のために暗号文を Base64 としてエンコードする。 パイプライン
コンテンツのハッシュと Base64 エンコード
入力のハッシュを計算し、コンパクトな転送のためにハッシュダイジェストを Base64 としてエンコードする。 パイプライン
Hex から Base64 へ変換
Hex 文字列を生バイトにデコードし、コンパクトな転送のために Base64 として再エンコードする。 パイプライン
HMAC 署名後に Base64 エンコード
HMAC 署名を生成し、API 認証ヘッダーのために Base64 エンコードする。 パイプライン
Morse エンコードと Base64 転送
テキストを Morse 符号としてエンコードし、デジタル転送のために Base64 エンコードする。 パイプライン
RC4 暗号化後に Base64 エンコード
RC4 で暗号化し、転送のために Base64 エンコードする。 パイプライン
RIPEMD-160 ハッシュ後に Base64 エンコード
RIPEMD-160 ハッシュを計算し、転送のために Base64 エンコードする。 パイプライン
テキストシャッフルと Base64 エンコード
テキスト文字をシャッフルし、その後結果を Base64 エンコードする。 パイプライン
Unicode エスケープと Base64 エンコード
テキストを Unicode エスケープし、ASCII セーフな転送のために Base64 エンコードする。 パイプライン
URL エンコード後 Base64 二重エンコード
URL エンコードし、API ペイロードの二重エンコードのために Base64 エンコードする。 パイプライン
UUencode 後 Base64 エンコード
テキストを UUencode し、その後結果を Base64 エンコードして二重エンコードする。 パイプライン
UUID 生成と Base64 エンコード
UUID を生成し、コンパクトな保存のために Base64 エンコードする。 パイプライン
関連ツール
Base64 エンコーダー
Encode text or binary data to Base64 online。無料、プライベート、100%クライアントサイド。 ツール
Base64 画像プレビュー
Preview Base64 image and show metadata。無料、プライベート、100%クライアントサイド。 ツール
Base64 からファイルへの変換
Decode Base64 data URL to downloadable file。無料、プライベート、100%クライアントサイド。 ツール
MIME タイプリファレンス
Reference table of common MIME types mapped to file extensions with descriptions。無料、プライベート、100%クライアントサイド。 ツール