本文へスキップ
AZ Tools

画像 → Base64

このコンバーターは画像ファイルを Base64 データ URL — data:image/…;base64, で始まり、ファイル全体を埋め込んだ 1 本の自己完結した文字列 — に変換します。ブラウザの FileReader API(readAsDataURL)を使うため、エンコードは端末内で完結し、画像がアップロードされることはありません。画像をドロップまたは選択し、プレビューで正しいファイルが読み込まれたことを確認して、文字列全体をワンクリックでコピーしてください。 データ URL は、別ファイルを用意するのが面倒な場面で真価を発揮します。HTTP リクエストを節約するために HTML や CSS にインライン化する小さなアイコンやロゴ、JSON ペイロードやメール署名に埋め込む画像、1 ファイルで完結するドキュメント、素早いプロトタイプなどです。ただしトレードオフも明確です。Base64 は 3 バイトを 4 文字で表すためサイズが約 33% 増え、文字列はページとは別にキャッシュされず、マークアップも肥大化します — 数十 KB までのアセットに限定し、大きな写真は通常のファイルとして配信しましょう。

ここに画像をドラッグ&ドロップ

またはクリックして選択

使い方

  1. 画像をドロップ領域にドラッグするか、クリック(または Enter キー)して選択します — ブラウザが認識できる画像形式ならすべて受け付けます。
  2. プレビューで正しい画像が読み込まれたことを確認します。その横に完全なデータ URL が表示されます。
  3. コピーボタンで文字列全体を一度にコピーします。
  4. img の src、CSS の background-image: url(…)、JSON フィールドなど、URL を書ける場所ならどこにでも貼り付けられます。別の画像でやり直すにはクリアを押してください。

よくある質問

画像はアップロードされますか?
いいえ。ファイルはブラウザの FileReader API でローカルに読み込まれ、結果はページ内に留まります。サーバーには何も送信されず、ページを離れた後に保存されるものもありません。
変換で画像が変わったり圧縮されたりしますか?
いいえ。Base64 は元のバイト列をそのまま表記し直す可逆エンコードで、文字列をデコードすれば元と同一のファイルが得られます。サイズを縮めることはないので、小さくしたい場合は先に画像をリサイズ・圧縮してから変換してください。
大きな画像をインライン化してもよい?
基本的には避けましょう。Base64 はサイズを約 33% 増やし、データは文書と別にキャッシュされず、巨大な文字列は HTML や CSS の編集をつらくします。アイコンのように小さく頻繁に再利用されるアセットだけをインライン化し、写真は通常のファイルで配信を。
どの形式が使えますか?
ブラウザが画像として読めるものなら何でも — PNG・JPEG・GIF・WebP・SVG・AVIF・ICO など。元の MIME タイプは data:image/…;base64, のプレフィックスに保持されるため、貼り付けた URL は元ファイルとまったく同じに表示されます。
CSS や Markdown でも使えますか?
はい。CSS では background-image: url(…) に貼り付け、Markdown では画像の参照先として ![alt](data:image/png;base64,…) のように使えます。ただし一部のエディターやリンターは極端に長い行を嫌うため、巨大なデータ URL は扱いづらいことがあります。

このテーマのガイド

関連ツール