隨手 ツール

画像 Base64 変換

画像を Base64 の文字列に変換し、HTML・CSS・JSON・メールテンプレートに直接埋め込めるようにします。変換はブラウザ内で完結し、画像はアップロードされません。

出力形式

画像はブラウザ内で変換され、サーバーにアップロードされることはありません。

画像 Base64 変換の使い方

  1. 点線の枠をクリックして画像を選ぶか、ファイルをドロップします。Ctrl/Cmd + V でスクリーンショットを貼り付けることもできます。
  2. プレビューと、その下に表示されるファイルサイズの注意を確認します。埋め込みは 10 KB 以下の小さなアイコンに向いています。
  3. 「出力形式」で Data URI、Base64 のみ、CSS 背景、HTML img のいずれかを選びます。
  4. 「結果をコピー」でコードに貼り付けるか、「.txt でダウンロード」でテキストファイルとして保存します。

Base64 と Data URI スキームとは

Base64 は、画像などのバイナリデータを A–Z、a–z、0–9、+、/ の 64 種類の文字だけで表すエンコード方式です。3 バイトが 4 文字に置き換わるため、変換後の文字列は元のファイルより約 33% 大きくなります。暗号化ではないので、誰でも元の画像に戻せます。

Data URI スキームは、Base64 の前に「data:image/png;base64,」のような見出しを付けた形式です。ブラウザはこれをそのまま画像として扱うため、追加の通信なしで表示できます。img の src、CSS の url()、ファビコンの link など、画像の URL を書ける場所ならどこでも使えます。

Base64 で埋め込むべき画像、避けるべき画像

向いているのは、ページ内の小さなアイコンやローディングアニメーション、1 つの HTML ファイルで完結させたい資料やモックアップ、JSON で画像を送る API リクエスト、添付ファイルを置きにくい設定ファイルやテストデータなどです。目安は 10 KB 以下です。

写真や大きなメインビジュアル、複数ページで使い回す画像には向きません。HTML や CSS が重くなって初回表示が遅れるうえ、画像を単独でキャッシュできなくなります。HTTP/2 以降はリクエスト数の負担が小さいので、圧縮した通常の画像ファイルを長めにキャッシュさせるほうが速いことがほとんどです。

4 つの出力形式の使い分け

「Data URI」はもっともよく使う完全な形式で、img の src やブラウザのアドレスバーにそのまま貼り付けられます。「Base64 のみ」は data: の見出しを除いた文字列で、画像の種類を別の項目で送る API やデータベースに向いています。「CSS 背景」は background-image の宣言をそのまま出力します。「HTML img」はファイル名を alt に、実際の幅と高さを width・height に入れた img タグを作るので、読み込み中のレイアウトのずれ（CLS）を防げます。

メールで Base64 画像を使うときの注意

Gmail や一部の Outlook など、Data URI の画像を表示しないメールソフトが少なくありません。メールマガジンには、配信サービスの画像ホスティングを使うか、画像を添付して Content-ID（cid:）で参照する方法が確実です。

よくある質問

Base64 にするとファイルサイズが大きくなるのはなぜですか？

Base64 は 3 バイトを 4 文字で表すため、約 33% 大きくなります。サーバー側で gzip や Brotli 圧縮をかけると転送量の差は縮まりますが、元の画像より大きいことに変わりはありません。

HTML で Base64 画像を表示するには？

img タグの src に Data URI をそのまま入れます（<img src="data:image/png;base64,…" alt="…">）。出力形式で「HTML img」を選ぶと、width と height 付きのタグをまとめて生成できます。

SVG も Base64 に変換できますか？

できます。出力は data:image/svg+xml;base64, で始まります。SVG はもともとテキストなので、Base64 ではなく URL エンコードで埋め込むほうが短くなることもありますが、互換性は Base64 のほうが高いです。

「Data URI」と「Base64 のみ」の違いは何ですか？

Data URI はブラウザが画像として認識するための data:image/…;base64, を含む完全な形式です。「Base64 のみ」はその見出しを除いた文字列で、ファイル形式を別に指定する API などで使います。

変換できるファイルサイズに上限はありますか？

上限はありませんが、数 MB を超える画像は数百万文字になり、エディタやページの動作が重くなります。大きな画像は先に圧縮やリサイズをしておくのがおすすめです。

画像はサーバーに送信されますか？

いいえ。ブラウザの FileReader を使って端末内でエンコードするため、画像も生成した文字列もネットワークには送信されません。

最終更新： ソースコードを見る

Base64 エンコード・デコード テキストを Base64 に変換したり、Base64 を元の文字列に戻したりできます。日本語や絵文字も UTF-8 として正しく処理するので文字化けしません。 画像圧縮ツール 写真やスクリーンショットの容量を数秒で小さくします。画質と最大幅を指定して、軽くなったファイルをダウンロードするだけ。処理はブラウザ内で完結し、画像はアップロードされません。 画像形式変換 画像を JPG・PNG・WebP・AVIF に変換します。複数枚をまとめて処理でき、変換はブラウザ内で完結するため、画像が端末の外に出ることはありません。 画像リサイズ 幅と高さ、またはパーセントを指定して、画像のサイズをまとめて変更します。Instagram やストーリーズ、YouTube サムネイル、履歴書写真のサイズもワンクリックで設定できます。処理はブラウザ内で行われます。 URL エンコード・デコード 日本語をパーセントエンコードしたり、%E6%9D%B1 のような文字列を元の日本語に戻したりできます。URL を貼り付ければ、ホストやパス、クエリパラメータを 1 つずつ分解して表示します。 HTML エスケープ変換 テキストを HTML の中で安全に表示できるようにエスケープしたり、&lt; &amp; &copy; などの文字参照を元の文字に戻したりできます。よく使う HTML 特殊文字の一覧付きです。 HEIC JPG 変換 iPhone の HEIC 写真を JPG や PNG にまとめて変換し、Windows や古いソフト、各種アップロードフォームでも使えるようにします。変換は端末内で行われ、写真はアップロードされません。 画像トリミング トリミング枠をドラッグして写真の必要な部分だけを切り抜きます。インスタや YouTube、履歴書写真などでよく使う比率を選べ、回転や反転もできます。処理はすべて端末内で行われます。