DevToolBox

Base64 Encoder / Decoder

テキストをBase64にエンコード・デコードします。全てブラウザ内で処理。

How to Use the Base64 Encoder / Decoder

This free online Base64 tool lets you encode any text to Base64 format or decode Base64 strings back to readable text. Simply paste your input, choose your mode, and click the button. Everything runs in your browser with no server communication.

What is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data as a string of printable ASCII characters. It is commonly used to embed images in HTML or CSS, transmit binary data in JSON or XML, encode email attachments (MIME), and store complex data in URLs or cookies.

When to Use Base64

Base64 encoding is useful when you need to transmit binary data through text-based protocols. Common use cases include embedding small images directly in HTML, sending binary attachments via email, and encoding authentication tokens. Note that Base64 increases data size by approximately 33%, so it should not be used for large files.

UTF-8 Support

This tool fully supports UTF-8 characters including accented letters, Asian characters, and emoji. The encoding process first converts the text to UTF-8 bytes, then encodes those bytes to Base64, ensuring accurate round-trip conversion.

Base64エンコード・デコードツールについて

このツールはテキストをBase64形式にエンコードしたり、Base64文字列を元のテキストにデコードできます。UTF-8に完全対応しており、全ての処理はブラウザ内で完結するためデータがサーバーに送信されることはありません。メール添付やHTML埋め込み画像、認証トークンの確認などに便利です。

実務での活用例

1. Basic認証ヘッダーの生成・解析

HTTP Basic認証は username:password をBase64エンコードした文字列をAuthorization: Basic ... ヘッダーに載せます。例えばadmin:secret なら YWRtaW46c2VjcmV0。 Authorizationヘッダーの中身を素早く確認する用途で重宝します。

2. 画像のData URI化

小さなアイコン画像をCSSに埋め込む場合は data:image/png;base64,... の形式で記述します。 画像をBase64化したい場合はImage to Base64を使うと ファイルを直接変換できます。

3. よくあるハマりどころ

  • 改行混入: メールヘッダー等のBase64は76文字ごとに改行が入ります。デコード前に改行を除去してください
  • URL-safe variant: JWTやOAuthは +/ の代わりに -_ を使うBase64URLを使用します。通常のBase64デコーダーでは失敗することがあります
  • パディング省略: Base64URLでは末尾の = が省略される場合があります。デコード時に4の倍数になるよう = を補完する必要があります
  • UTF-8の文字化け: btoa / atob はLatin-1のみ対応。日本語を扱う場合は必ず encodeURIComponent を通してから処理してください(本ツールは対応済み)

4. 関連ガイド

Base64URLを含むJWTトークンの扱いについてはJWTの有効期限切れを確認する方法で解説しています。

よくあるエラーと対処 / Common Errors and Fixes

Base64 デコードで遭遇しやすいエラーパターン。

Patterns commonly seen when decoding Base64.

症状 / Symptom原因 / Cause対処 / Fix
InvalidCharacterError (atob)URL-safe Base64 (-_) が混入
URL-safe Base64 contains -/_
-+_/ に置換
Replace - with +, _ with /
長さが 4 の倍数でない
Length not a multiple of 4
パディング = の省略
Padding = was stripped
末尾に = を補完(4 の倍数になるまで)
Pad with = until length is a multiple of 4
日本語が文字化け
Garbled Japanese output
btoa/atob は Latin-1 限定
btoa/atob only handle Latin-1
UTF-8 を経由: TextEncoder/TextDecoder を使う
Use TextEncoder/TextDecoder for UTF-8 round-trip
改行や空白でエラー
Whitespace breaks decode
MIME 形式で 76 文字ごとに改行
MIME wraps every 76 chars
デコード前に /\s/g を除去
Strip whitespace with /\s/g first
JWT の署名部だけ復号できない
JWT signature segment fails to decode
Base64URL かつバイナリ
Base64URL-encoded binary
Base64URL 用関数で decode してバイナリ表示
Use Base64URL decoder; treat as binary, not UTF-8

言語別コード例 / Code Examples by Language

JavaScript (UTF-8 safe)

// Encode
const b64 = btoa(String.fromCharCode(...new TextEncoder().encode(text)));
// Decode
const text = new TextDecoder().decode(
  Uint8Array.from(atob(b64), c => c.charCodeAt(0))
);

Python

import base64

# Encode
b64 = base64.b64encode(text.encode("utf-8")).decode("ascii")

# Decode
text = base64.b64decode(b64).decode("utf-8")

# URL-safe
url_b64 = base64.urlsafe_b64encode(data).rstrip(b"=")

Shell

# Encode
echo -n "$text" | base64

# Decode
echo "$b64" | base64 -d

# URL-safe decode (GNU coreutils)
echo "$b64" | tr '_-' '/+' | base64 -d

Go

import "encoding/base64"

b64 := base64.StdEncoding.EncodeToString([]byte(text))
data, _ := base64.StdEncoding.DecodeString(b64)

// URL-safe, no padding
b64u := base64.RawURLEncoding.EncodeToString(data)

Before / After 実例 / Before & After

例1: Basic 認証ヘッダー / HTTP Basic auth header

admin:secret   →   YWRtaW46c2VjcmV0
Authorization: Basic YWRtaW46c2VjcmV0

例2: 日本語 UTF-8 / Japanese UTF-8

こんにちは   →   44GT44KT44Gr44Gh44Gv

例3: Base64URL → Base64 変換 / Base64URL to standard Base64

eyJhbGciOiJIUzI1NiJ9-  ←  Base64URL (no padding)
eyJhbGciOiJIUzI1NiJ9=  ←  Standard Base64 (padded)

JWT の各セグメントは Base64URL。-_+/ に置換し、長さ 4 の倍数まで = を補完。

JWT segments are Base64URL. Replace -_ with +/ and pad with = to a multiple of 4.

Why browser-only? / なぜブラウザ完結か

The text you decode with Base64 tools is often an Authorization header, a session cookie, or the payload of a JWT — credentials by any practical definition. A server-side decoder receives that material in its access logs. DevToolBox callsbtoa/atob locally; verify with DevTools → Network.

Base64 ツールにかける文字列は Authorization ヘッダーやセッション Cookie、JWT ペイロードなど、 実質的に認証情報であることが多い。サーバ型のデコーダはそれらをアクセスログに残します。 DevToolBox は btoa/atob をローカル実行。DevTools → Network で通信が無いことを確認できます。

関連ガイド / Related Guides

開発をもっと効率的に

PR