Base64 Image Viewer
Base64でエンコードされた画像をプレビューし、画像ファイルをBase64に変換するツールです。メールテンプレート、APIレスポンス、デバッグに必須！
or paste Base64 data below
💡 Use Cases
🔍 Debug Base64 Data
Quickly verify Base64-encoded images in your code or API responses
📧 Email Templates
Preview Base64 images embedded in HTML emails
🔄 Convert & Download
Convert Base64 back to image files for easy sharing
🧪 Testing
Test image handling in your applications
📝 Tips:
- Base64 data can start with
data:image/png;base64,or just the encoded string - Supported formats: PNG, JPEG, GIF, WebP, SVG
- Large images will result in very long Base64 strings
- Base64 encoding increases file size by ~33%
主な機能
1. Base64画像プレビュー
- Base64文字列を貼り付けると即座に画像として表示
- 画像サイズ、フォーマット、ファイルサイズ情報を確認
- 自動画像フォーマット検出 (PNG、JPEG、GIF、WebP、SVG)
2. 画像アップロード&変換
- 画像ファイルをドラッグ&ドロップまたは選択
- 自動的にBase64にエンコード
- Data URI形式で出力
3. ダウンロード
- Base64画像をファイルとして再保存
- 元のファイル名を維持
いつ使用しますか?
APIデバッグ
// APIレスポンスにBase64画像がある時
const response = await fetch('/api/user/avatar');
const data = await response.json();
console.log(data.avatar);
// "data:image/png;base64,iVBORw0KGgoAAAANS..."
// Base64 Image Viewerで貼り付けて実際の画像を確認
HTMLメールテンプレート
<!-- メールに画像を直接埋め込む -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANS..." alt="Logo" />
<!-- Base64文字列が正しいかプレビューで確認 -->
データベース保存画像
-- DBにBase64で保存された画像
SELECT avatar_base64 FROM users WHERE id = 123;
-- 結果をコピーしてBase64 Image Viewerで確認
Base64画像フォーマット
Data URI構造
data:[<mediatype>][;base64],<data>
例:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
│ │ │ │
│ │ │ └─ Base64でエンコードされた画像データ
│ │ └─ Base64エンコーディング明示
│ └─ MIMEタイプ
└─ Data URIスキーム
サポート画像フォーマット
| フォーマット | MIME Type | Base64シグネチャ |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| GIF | image/gif | R0lGOD |
| WebP | image/webp | UklGR |
| SVG | image/svg+xml | PHN2Zy |
長所と短所
✅ Base64画像の長所
-
HTTPリクエストの削減
<!-- 通常の画像: 別途HTTPリクエスト -->
<img src="/images/logo.png" />
<!-- Base64: HTMLに含まれ、追加リクエストなし -->
<img src="data:image/png;base64,iVBORw..." /> -
オフライン動作
- 画像がHTML/CSSファイルに含まれている
- ネットワーク接続なしでも表示可能
-
単一ファイル配布
- HTMLファイル1つだけ渡せばOK
- 画像ファイルを別途管理する必要 なし
-
CORS問題なし
- 外部ドメイン画像読み込み問題の解決
- Cross-origin制限の回避
⚠️ Base64画像の短所
-
ファイルサイズの増加 (~33%)
元の画像: 100 KB
Base64エンコード後: 133 KB -
キャッシング不可
- 通常の画像: ブラウザキャッシュに保存
- Base64: HTMLが変わると毎回再読み込み
-
SEOへの影響
- 検索エンジンが画像をインデックスしにくい
alt属性でのみ意味を伝達
-
処理オーバーヘッド
- エンコード/デコード時間が必要
- メモリ使用量の増加
使用のヒント
1. Base64をいつ使うか?
✅ Base64使用推奨:
- 小さなアイコン/ロゴ (< 10KB)
- メールテンプレート
- 頻繁に変更されない画像
- HTTPリクエストを最小化する必要がある時
❌ Base64使用回避:
- 大きな画像 (> 100KB)
- 頻繁に変更される画像
- SEOが重要なコンテンツ画像
- 複数のページで再利用される画像
2. パフォーマンス最適化
// 小さな画像のみBase64に変換
const MAX_BASE64_SIZE = 10 * 1024; // 10KB
function shouldConvertToBase64(fileSize) {
return fileSize < MAX_BASE64_SIZE;
}
// 大きな画像はサーバーアップロード
if (shouldConvertToBase64(file.size)) {
const base64 = await fileToBase64(file);
saveToLocalStorage(base64);
} else {
await uploadToServer(file);
}
変換ユーティリティ関数
File to Base64
function fileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
reader.readAsDataURL(file);
});
}
// 使用例
const file = document.getElementById('fileInput').files[0];
const base64 = await fileToBase64(file);
Base64 to Blob
function base64ToBlob(base64) {
const parts = base64.split(';base64,');
const contentType = parts[0].split(':')[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
// 使用例
const blob = base64ToBlob(base64String);
const url = URL.createObjectURL(blob);
関連ツール
- Base64 Encoder - テキストBase64エンコード
- Image to Base64 - 画像変換ツール
- URL Encoder - URLエンコード
💬 このツールは役に立ちましたか?
このBase64画像ビューアがお役に立ちましたら、ぜひ周りの開発者にもシェアしてください。フィードバックやご要望がございましたら、お気軽にお知らせください。
プライバシー保護
このツールは完全にクライアント側で動作します。アップロードまたは入力された画像データはサーバーに送信されず、ブラウザでのみ処理されます。あなたのデータは完全に安全です。