Image to Base64
Image to Base64 — ブラウザで動作します。入力は保存されません。
画像 → Base64
値を入力してから「計算する」を押してください。
プレビュー
ファイルはブラウザでのみ読み、サーバーへはアップロードされません。
使い方
- 画像ファイルでローカルファイルを選びます。
image/*だけ受けます。 - 選択直後にFileReaderがdata URLを作り、プレビューとテキスト欄が埋まります。
- 案内行にファイル名とBase64基準の推定容量(KB)が表示されます。
- コピーでdata URL全体をクリップボードに入れます。HTML
img src、CSS、Markdownに貼れます。 - リセットでファイル選択と文字列を消します。選んだファイルはこのタブメモリだけで読まれます。
- インラインに使う前に容量案内（推定KB）を見て、大きい原画像なら先にリサイズする方がよいです。選んだファイルはアップロードされません。
ポイント
画像 → Base64はローカルファイルを data:image/png;base64,... のようなdata URLに変える作業です。小さいファビコン・アイコンをHTMLにインラインしたり、JSON・Markdown下書きにサムネイルを入れるときに使います。Base64は原画像より約33%長くなり、大きい写真はHTML容量とパースコストが急増します。ファイルを選ぶとすぐ変換され、別の実行ボタンはありません。プレビューと文字列が一緒に埋まります。
読み取りは FileReader.readAsDataURL だけ使い、アップロードAPIは呼びません。MIMEが image/ でなければ案内だけ出て文字列は空です。コピーボタンはクリップボードAPIを使い、権限がなければ結果欄を自分で選べばよいです。機微なスクリーンショットもこのタブを出ません。インラインはキャッシュ・CDNなしでページに絵が埋め込まれるので、繰り返す大きい写真はファイルURLの方がよいです。
例
小さいPNGアイコンを選ぶとプレビューが出て、テキストが data:image/png;base64, で始まります。コピーを押したあと <img src="…"> に貼ると外部ファイルなしで絵が見えます。JPEGを選ぶとMIMEがjpegになり、案内行の推定KBは文字列長から見積もった値なのでディスクファイルサイズと少し違うことがあります。同じファイルを選び直すと内容が更新されるので、別アイコンを試すときはリセット後に選んでください。推定KBが大きいならHTMLインラインより静的ファイルURLを先に使う方がよいです。
関連: Base64 → 画像 · URLエンコーダ · 文字数カウント
よくある質問
画像をBase64に変換する方法は？
画像ファイルを選ぶとFileReaderがすぐdata URLを作ります。プレビューとテキスト欄が埋まり、別の変換ボタンはありません。
画像Base64をHTMLにどう入れますか？
コピーした文字列を <code>img</code> の <code>src</code> またはCSS <code>background-image: url()</code> にそのまま入れます。Markdown画像文法にも使えます。
JPG・WebP・GIFも画像to Base64できますか？
ブラウザが <code>image/*</code> と認識するファイルならdata URL MIMEがそれに合わせて付きます。画像でなければ案内だけ出ます。
大きい写真もできますか？
読み取りはできますが文字列が非常に長く、コピー貼り付けとページ容量が負担になります。アイコン・小さいサムネイルに向きます。
ファイルはサーバーにアップロードされますか？
いいえ。選んだファイルはこのページのブラウザメモリだけで読まれ、送信・アップロードされません。
コピーできないときは？
クリップボード権限を許可するか、結果欄を自分で選んでコピーしてください。案内行に成功メッセージが出ます。
最終確認日: 2026-09-04