画像をBase64に変換するツール — 無料オンラインツール

description: 任意の画像をBase64データURIに瞬時に変換。PNG、JPEG、GIF、SVG、WebP、BMPをサポート。無料、プライベート、ブラウザ内でのみ動作。
date: 2026-05-17

Base64画像エンコーディングとは？

Base64エンコーディングは、バイナリ画像データを文字、数字、+、/、=で構成されたテキスト文字列に変換します。MIMEタイプの接頭辞と組み合わせると、データURIが作成され、HTML、CSS、JSONに直接埋め込むことができる自己完結型の文字列になります。

たとえば、外部ファイルへのリンクではなく：

<img src="logo.png" alt="Logo" />  

このように画像をインラインで埋め込むことができます：

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo" />  

画像をBase64に変換する理由

ベネフィット	説明
HTTPリクエストの削減	小さな画像を埋め込むことで、別ファイルのダウンロードを削除
メールテンプレート	複数のメールクライアントが外部画像をロードしない場合があるため、Base64はインラインで動作
単一ファイルアプリ	アイコンやアセットを1つのHTMLファイルにバンドルして、簡単に共有
APIペイロード	マルチパートアップロードなしにJSONに画像を文字列として送信
オフラインドキュメント	サーバー不要で動作する自己完結型のHTMLレポート

サポートされる画像フォーマット

フォーマット	MIMEタイプ	拡張子
PNG	image/png	.png
JPEG	image/jpeg	.jpg, .jpeg
GIF	image/gif	.gif
SVG	image/svg+xml	.svg
WebP	image/webp	.webp
BMP	image/bmp	.bmp

最大ファイルサイズ：10 MB。

出力フォーマット

このツールは4つの出力フォーマットを提供します：

1. データURI — 完全なdata:image/...;base64,...文字列。src属性やCSSのurl()に直接使用可能。
2. Base64のみ — データURI接頭辞なしの生のBase64文字列。APIペイロードに有用。
3. HTMLタグ — src、alt、width、heightを含む完全な<img>要素。
4. CSS背景 — すぐに使用可能なbackground-image: url(...)宣言。

使い方

1. 画像をアップロード — ドロップ領域にドラッグ＆ドロップ、またはファイルを選択。
2. 画像をプレビュー — アップロードされた画像とファイル情報（名前、サイズ、タイプ、サイズ）を確認。
3. 出力フォーマットを選択 — データURI、Base64のみ、HTMLタグ、CSS背景のいずれかを選択。
4. コピーまたはダウンロード — クリップボードへのコピーまたはテキストファイルとしてのダウンロード。

Base64を使うべきケース（使わないべきケース）

適切な使用例：

• 小さなアイコンやUI要素（10 KB未満）
• メールニュースレターの画像
• 単一ファイルHTMLプロトタイプ
• マルチパートが利用できないJSON APIペイロード

避けるべきケース：

• 大きな写真やヒーロー画像（ファイルサイズが約33％増加）
• 画像が多いサイト（インラインデータにブラウザキャッシュが適用されない）
• 複数ページに同じ画像を使用する場合（Base64は個別にキャッシュできない）

プライバシーとセキュリティ

すべての処理はブラウザ内のみで行われます。画像はサーバーにアップロードされません。Base64変換はFileReader APIを使用してクライアントサイドで実行されます。

よくある質問

Base64はファイルサイズを増やす？
はい。Base64エンコーディングは元のファイルサイズを約33％増加させます。3 KBのPNGはBase64で約4 KBになります。

Base64を画像に戻すことはできる？
はい。データURIをブラウザのアドレスバーに貼り付けることで画像を表示できます。またはBase64デコードツールを使用してファイルとして保存することも可能です。

ファイルサイズ制限はある？
このツールは10 MBまでの画像をサポートしています。より大きなファイルが必要な場合は、Linux/macOSのbase64コマンドラインツールをご利用ください。

SVGファイルにも対応？
はい。SVGファイルはラスター画像と同様にBase64に変換されます。ただし、SVGの場合、HTMLに直接SVGマークアップをインラインで埋め込むことでパフォーマンスが向上します。