画像をBase64に変換

Base64画像エンコーディングとは何ですか？

画像をBase64に変換する方法

1. 1
   方向を選択

   ディスク上の画像をエンコードするには、画像 → Base64を使用します。データURL、API応答、またはCSSファイルからコピーした文字列をデコードするには、Base64 → 画像を使用します。

2. 2
   画像をドロップする

   エンコードするには、JPG、PNG、WebP、GIF、SVG、BMP、ICO、またはAVIFをアップロードエリアにドラッグするか、デバイスから選択するためにクリックします。画像は結果カードの上部にプレビューされます。

3. 3
   必要なスニペットをコピーする

   5つの貼り付け準備が整ったスニペットが生成されます：完全なデータURL、生のBase64（プレフィックスなし）、CSS背景画像、HTML <img> タグ、およびMarkdown画像。必要なものをクリックしてコピーします。

4. 4
   またはデコードするためにBase64文字列を貼り付ける

   Base64 → 画像に切り替え、完全なデータURLまたは生のBase64部分のいずれかを貼り付けます。ツールは短い文字列を自動的にパディングし、プレフィックスが欠けている場合はPNGを仮定します — プレビューするにはデコードをクリックします。

5. 5
   デコードされた画像をダウンロードする

   デコードが完了すると、プレビューカードに画像の寸法と推定ファイルサイズが表示されます。ダウンロードをクリックして、元のバイトを正しい拡張子でディスクに保存します。

Base64画像エンコーディングの仕組み

1. ブラウザのFileReader.readAsDataURL()が画像ファイルをバイナリとして読み取ります。
2. バイトを3つのチャンク（24ビット）にグループ化し、各チャンクを4つのASCII文字として再エンコードします。
3. 64文字のアルファベットはA-Z、a-z、0-9、さらに'+'と'/'（パディング用に'='）です。
4. 出力は'data:<mime>;base64,'でプレフィックスされ、使用可能なデータURLになります。
5. デコードはすべてのステップを逆にします：プレフィックスを削除し、URLセーフなバリアントを正規化し、4の倍数にパディングします。
6. デコードされたバイトはBlobにラップされ、createObjectURLを介して公開されます — またはデータURLとして直接使用されます。

参考文献: MDN — データURL

一般的なBase64画像の使用例

Base64画像を使用するタイミング

• HTTPの往復をスキップするために、CSSに小さなアイコンやスピナーをインラインで直接埋め込む。
• 単一の自己完結型HTMLファイルに画像を埋め込む（オフラインドキュメント、履歴書、図のエクスポート）。
• JSON専用のチャネルを通じて画像を送信する — REST API、チャットプロトコル、Webhookペイロード。
• GitHubの問題、Notionページ、またはMarkdownブログのドラフトにスクリーンショットをインラインで貼り付ける。
• APIまたはメールから受け取ったBase64画像をダウンロード可能なファイルにデコードする。
• CSS専用のローディングスケルトン用のプレースホルダーデータURLを生成する。
• ファイルを保存する前に、誰かが提供したデータURLの内容を監査または検査する。

関連ツール

よくある質問