Base64 Encode Decode｜Data URI と Basic 認証の変換手法

Base64 Encode Data URI
結論：30秒で Base64 を使いこなす
  • 変換ツール: 下の埋め込みコンポーネントで即座に相互変換
  • JS 標準関数: btoa() (Encode) / atob() (Decode) ※日本語は TextEncoder が必要
  • 重要な注意: 暗号化ではない / サイズが約 33% 増加する

1. オンライン Base64 エンコード / デコード

入力テキストやファイルの Base64 相互変換をブラウザ内でローカル処理します。

🔄 この場でBase64デコードを試す

2. JavaScript でのエンコード/デコードコード例

① ASCII 文字列の変換 (btoa / atob)

// エンコード
const encoded = btoa("Hello World");
console.log(encoded); // "SGVsbG8gV29ybGQ="

// デコード
const decoded = atob(encoded);
console.log(decoded); // "Hello World"

② 日本語（UTF-8）の文字化け対策

btoa() は Unicode 文字列をそのまま受け取ると InvalidCharacterError を発生させます。TextEncoder を挟むのが現代の安全な手法です。

// 日本語テキストを安全に Base64 エンコード
function encodeBase64Utf8(str) {
  const bytes = new TextEncoder().encode(str);
  const binString = Array.from(bytes, (byte) => String.fromCharCode(byte)).join("");
  return btoa(binString);
}

console.log(encodeBase64Utf8("こんにちは")); // "44GT44KT44Gr44Gh44Gv"

3. 注意点（ハマりどころ）

  1. 暗号化として絶対に使わない
    • パスワードやトークンを Base64 化しただけでデータベースや通信に載せるのは重大なセキュリティリスクです。
  2. Data URI での過度な画像埋め込み
    • CSS や HTML 内に data:image/png;base64,... で画像を直埋めすると、HTTP リクエスト数が減る反面、ファイルサイズが膨らみブラウザの HTML パースをブロックします。小アイコン（数 KB 以下）のみに留めてください。