画像からBase64

1 つの画像をローカルで Base64 データ URI に変換し、HTML、CSS、JSON、またはテキスト ファイルにコピーできます。

画像をアップロード

ここに画像ファイルをクリックまたはドラッグしてアップロードします

画像1枚・最大2MB
出力
0 文字

小さな画像をデータ化 URI

画像から Base64 は、ブラウザー内で 1 つの画像を読み取り、完全な data: URI を返します。 個別の画像ファイルを使いにくい場合に、HTML、CSS、JSON、その他のプレーンテキストへ貼り付けられます。

Base64 は圧縮ではありません。通常、エンコードされたデータが約 33% 増加し、さらに data:image/png;base64, などの MIME プレフィックスが増加します。大きな写真ではなく、小さなアイコン、プレースホルダー、自己完結型のスニペットとして保存してください。

ファイルはローカルで読み取られ、予測可能なパフォーマンスを実現するために最大 2MB の 1 つのイメージに制限されます。埋め込みデータ URI を使用すると、個別のリクエストを回避できますが、HTML/CSS のキャッシュと編集が難しくなります。

使用方法

  1. 画像ファイルをアップロード領域にドラッグ アンド ドロップするか、クリックして選択します。
  2. Base64 でエンコードされたデータ URI が下のテキスト エディターに表示されます。
  3. コピー を使用して結果をコピーするか、保存 を使用してテキスト ファイルとしてダウンロードします。

画像 Base64 をいつ使用する必要がありますか?

Image Base64 は、単一の HTML、CSS、JSON、またはテキスト ファイル内で移動する必要がある小さなアセットに役立ちます。

ブラウザが個別にキャッシュできるように、大きなアセットには通常の画像ファイルを使用します。 Base64 はデータを拡張し、エンコードされたバイト内に画像メタデータを保持するため、埋め込む前にサイズとプライバシーを確​​認してください。

Pythonで変換する

プログラムによる変換は画像バイトを読み取り、Base64 エンコードして、正しいデータ URI プレフィックスを追加します。

import base64
from PIL import Image

with open('image.png', 'rb') as f:
    encoded = base64.b64encode(f.read())
data_uri = 'data:image/png;base64,' + encoded.decode()

MCP 連携

MCP (Model Context Protocol) により、AI エージェントやアプリは Coding.Tools のユーティリティを発見し、変換、整形、ハッシュ、生成ワークフローで実行できます。

MCP ツール名: image-to-base64

MCP エンドポイント: https://coding.tools/mcp

まず tools/list を呼び出してください。各ツールには inputSchema、outputSchema、examples が含まれるため、AI エージェントやクライアントは推測せずに有効な引数を作成できます。

tools/call では、表示用の値は result.content[0].text、機械処理用の値は result.structuredContent を読みます。ツール単位の失敗は isError: true、プロトコル単位の失敗は JSON-RPC error を返します。

tools/call リクエスト例:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"image-to-base64","arguments":{"input":{"url":"https://coding.tools/assets/img/photo2pixel-demo.png"}}}}'

image-to-base64 では、公開画像 URL を input.url として渡します。非公開のローカルファイルは Web UI を使うか、ファイルのバイト列を Base64 に変換して options.mimeType で画像形式を指定してください。

ほとんどのテキストおよびデータツールは input 文字列と任意の options を受け取ります。ブラウザの画像 API が必要な画像ツールは発見用に公開され、必要に応じて Web UI へのリンクを返します。