画像からBase64

HTML または CSS に埋め込むために、任意の画像を Base64 でエンコードされたデータ URI に変換します。

画像をアップロード

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

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

画像をBase64に変換

このツールは、画像ファイルを Base64 でエンコードされたデータ URI 文字列に変換します。この文字列を HTML または CSS に直接埋め込むことができるため、個別の画像ファイル リクエストの必要がなくなります。

Base64 エンコードではデータ サイズが約 33% 増加するため、大きな写真ではなく、アイコンやロゴなどの小さな画像に使用するのが最適です。

ファイルはブラウザ内でローカルに読み取られます。画像はサーバーにアップロードされず、安定した動作のため入力は 1 枚、最大 2MB に制限されています。

使用方法

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

HTMLへの画像の埋め込み

Base64 データ URI を HTML img タグで直接使用できます: <img src="data:image/png;base64,...">

CSS では、背景画像にデータ URI を使用できます。background: url('data:image/png;base64,...')

Pythonで変換する

Python を使用して画像を Base64 に変換します。

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 へのリンクを返します。