画像 → Base64
このコンバーターは画像ファイルを Base64 データ URL — data:image/…;base64, で始まり、ファイル全体を埋め込んだ 1 本の自己完結した文字列 — に変換します。ブラウザの FileReader API(readAsDataURL)を使うため、エンコードは端末内で完結し、画像がアップロードされることはありません。画像をドロップまたは選択し、プレビューで正しいファイルが読み込まれたことを確認して、文字列全体をワンクリックでコピーしてください。 データ URL は、別ファイルを用意するのが面倒な場面で真価を発揮します。HTTP リクエストを節約するために HTML や CSS にインライン化する小さなアイコンやロゴ、JSON ペイロードやメール署名に埋め込む画像、1 ファイルで完結するドキュメント、素早いプロトタイプなどです。ただしトレードオフも明確です。Base64 は 3 バイトを 4 文字で表すためサイズが約 33% 増え、文字列はページとは別にキャッシュされず、マークアップも肥大化します — 数十 KB までのアセットに限定し、大きな写真は通常のファイルとして配信しましょう。
ここに画像をドラッグ&ドロップ
またはクリックして選択使い方
- 画像をドロップ領域にドラッグするか、クリック(または Enter キー)して選択します — ブラウザが認識できる画像形式ならすべて受け付けます。
- プレビューで正しい画像が読み込まれたことを確認します。その横に完全なデータ URL が表示されます。
- コピーボタンで文字列全体を一度にコピーします。
- 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 では画像の参照先として  のように使えます。ただし一部のエディターやリンターは極端に長い行を嫌うため、巨大なデータ URL は扱いづらいことがあります。
このテーマのガイド
関連ツール
Data URI パーサー & デコーダー
data: URI をデコードして MIME タイプ・エンコーディング・サイズ・デコード内容をブラウザ上で確認します。
Base64 エンコーダー / デコーダー
テキストを Base64 にエンコード、または Base64 をテキストにデコード。
Lorem Picsum URL ビルダー
picsum.photos からプレースホルダ画像 URL を生成 — 寸法・グレースケール・ぼかし・安定画像用シード・特定画像 ID。
QR コード生成
テキストや URL からカスタム QR コードを作成してダウンロード。
画像圧縮
JPEG・PNG・WebP 画像をブラウザで圧縮・リサイズ。
画像リサイズ
画像を任意のサイズに変更し PNG・JPEG・WebP で書き出し — すべてブラウザ内で完結。