Toolonit
  1. ホーム
  2. 画像
  3. 画像をBase64に変換

画像をBase64に変換(Data URI)

画像をdata: URI形式の文字列に変換します。

画像をドロップするか、クリックして選択

JPG・PNG・WebP・GIF・BMP・ICO・SVG・AVIF。 ファイルはブラウザ内で処理され、アップロードされません。 削除するまで、このブラウザに保存されます。

Ctrl+O選択Ctrl+V貼り付け

画像を、HTML・CSS・JSON・Markdownにそのまま埋め込めるテキストに変換します。画像を1枚または複数ドロップすると、それぞれのData URI、Base64文字列、CSSの背景指定、HTMLの<img>タグ、Markdownの画像記法が作られ、どれもワンクリックでクリップボードにコピーできます。ファイルはブラウザが読み込むだけで、端末の外に出ることはありません。無料で登録も不要です。

画像をBase64に変換する方法

  1. ページのどこかに画像をドロップするか、Ctrl+Vで貼り付けるか、クリックしてファイルを選びます。ほかの画像ツールで追加した画像は、今の状態のまま最初からここにあります。そちらでリサイズやトリミングをして適用した画像なら、編集後の画像のデータURIになります。サンプル画像を使えば、ファイルがなくても試せます。
  2. 画像の下の「Data URI」「Base64」「CSS」「HTML」「Markdown」をクリックすると、そのコードがコピーされます。Ctrl+Cでは、選択中の画像のData URIがコピーされます。
  3. 必要な場所に貼り付けるか、テキストファイルとしてダウンロードします。複数の画像がある場合は、「すべてダウンロード(ZIP)」でまとめて保存できます。

主な機能

  • 1枚ごとに5種類のコード:Data URI、Base64文字列、CSSのbackground-image、HTMLの<img>、Markdown
  • HTMLタグには幅・高さと、ファイル名から作ったaltテキストが入る
  • ワンクリックでコピー。Ctrl+Cで選択中の画像のData URIをコピー
  • 複数の画像をまとめて変換し、画像ごとの.txtファイル、またはすべてを1つのZIPで保存
  • 100KBを超える画像には、ファイルへのリンクのほうが適している場合が多いと警告
  • PNG・JPG・GIF・WebP・SVG・AVIF・BMP・ICOに対応し、ブラウザがMIMEタイプを渡さない場合も正しいタイプを設定

プライバシーは守られますか?

はい。ファイルはブラウザが読み込み、ページ上で変換します。どこにも送信されず、画像は削除するまでこのブラウザに残ります。データURIはファイルそのものなので、写真のメタデータもそのまま含まれます。GPSの位置情報などのメタデータがあるときはツールがそう知らせ、先に削除できるようEXIFビューアーを案内します。

よくある質問

Data URIはどんなときに使うべきですか?

アイコンやロゴ、小さな背景画像など、リクエストを1つ減らす意味が大きい小さな画像に向いています。また、HTMLメール、1ファイルだけのページ、JSONのフィールド、Markdown文書など、別のファイルを置けない場所でも使えます。大きな写真は、ブラウザがキャッシュできるようにファイルへのリンクにしてください。

Base64にするとファイルはどれくらい大きくなりますか?

約3分の1大きくなります。Base64は3バイトごとに4文字を使うため、30KBの画像はおよそ40KBのテキストになります。約100KBを超える場合はファイルにリンクしたほうがよいことが多く、ツールが警告を表示します。

どのコードをコピーすればいいですか?

自分で書くsrcやurl()にはData URI、そのまま使えるbackground-imageの指定にはCSS、幅・高さ・altテキスト付きの完全な<img>タグにはHTML、ドキュメントにはMarkdown、APIやJSONのフィールドがエンコードしたデータだけを求める場合はBase64です。

複数の画像をまとめて変換できますか?

はい。画像はいくつでも追加でき、それぞれにコードが作られます。「すべてダウンロード(ZIP)」で、画像ごとのテキストファイルをまとめて保存できます。

関連ツール