画像のBase64とは？使い方と向き不向き

Base64とは

Base64は、画像を構成するバイト列のようなバイナリデータを、プレーンテキストの文字列に変換する符号化方式です。名前の由来は、64種類の文字（大文字、小文字、数字、 +、/）だけであらゆるデータを表現するところにあります。

つまり、どんな画像ファイルでも次のような長いテキストに変換できるということです。

この形式は データURI （データURL）と呼ばれます。外部ファイルを指し示す代わりに、URL自体がテキスト化された画像の中身を運びます。ブラウザはこの文字列を読み取り、追加のHTTPリクエストなしでそのまま画像として表示します。

データURIの構造

画像のデータURIは、いずれも同じ形をしています。

各部分の意味は次のとおりです。

• data: — スキームを示す固定の接頭辞
• [MIMEタイプ] — 画像の形式。たとえば image/png, image/jpeg, image/svg+xml、image/gif
• ;base64, — 中身がBase64で符号化されていることを示す
• [エンコードされたデータ] — 画像のバイナリをテキストに変換した長い文字列

ここで押さえておきたいのは、Base64にすると データ量がおよそ33%増えるという点です。3 KBの画像は約4 KBの文字列になります。同じバイト数を表すのに、より多くの文字が必要になるためです。

HTMLでのBase64の使い方

HTMLでBase64画像をそのまま表示するには、データURIを src 属性に指定します。使うタグは通常どおり <img>：

ブラウザはこの要素を通常の画像とまったく同じように扱います。CSSを当てたり、幅や高さを指定したり、 <img> が使える場所ならどこでも利用できます。

CSSでのBase64の使い方

CSSでは、データURIは主に背景画像の指定に使われます。

この方法がとくによく使われるのは、CSSから色を動的に変えたい 小さなSVGアイコン や、ライブラリの再利用コンポーネントに含まれる背景画像です。

Base64を使う場面・避ける場面

Base64と外部ファイルのどちらを選ぶかは、主に画像のサイズと使い方で決まります。代表的なケースを表にまとめました。

場面	おすすめ	理由
小さなアイコン・スプライト（2 KB未満）	✅ Base64が向く	容量への影響はほぼなく、HTTPリクエストを1つ減らせる
CSSに埋め込むファビコン	✅ Base64が向く	手軽で、外部ファイルに依存しない
プレースホルダーやスケルトン表示	✅ Base64が向く	HTMLと同時に即表示され、ちらつきが出ない
HTMLメール	✅ Base64が向く	外部画像をブロックするメールソフトが多い
本文の画像（写真、バナー）	❌ 避ける	HTMLが重くなり、ブラウザのキャッシュも効かない
5 KBを超える画像	❌ 避ける	33%の増加分が表示速度に響く
複数ページで使い回す画像	❌ 避ける	外部ファイルはキャッシュされるが、Base64はページごとに再取得される

画像をBase64にする利点

使いどころを選べば、Base64にははっきりした利点があります。

• HTTPリクエストが増えない — 画像がHTMLやCSSそのものに含まれるため、ファーストビューの重要な画像で待ち時間が減ります。
• オフラインやメールでも表示される — 外部サーバーに依存しないので、通信のないオフラインアプリでも、外部コンテンツを遮断するメールソフトでも画像が出ます。
• そのまま持ち運べる — Base64画像を含むHTMLは1ファイルで完結するため、送付しても保管しても画像が欠けません。
• 表示のタイミングがずれない — HTML要素が描画された瞬間に画像も現れるため遅れがなく、UIアイコンのレイアウトのちらつきを防げます。

欠点と限界

一方で、Base64には見過ごせない代償もあります。

• サイズが33%増える — テキスト化すると転送量は必ず増えます。大きな画像では、何の見返りもないまま数キロバイトが上乗せされます。
• ブラウザのキャッシュが効かない — 外部ファイルの画像はキャッシュされ、ページをまたいで再利用されます。HTMLに埋め込まれたBase64は文書と一体なので、訪問のたびに読み込み直しになります。
• 保守がしにくい — 画像を差し替えるたびに変換をやり直し、長い文字列をHTMLやCSSに貼り直す必要があり、手間もミスも増えます。
• コードが読みにくくなる — 長いBase64文字列がCSSやHTMLに混ざると、読むのもレビューするのも難しくなります。
• gzipがあまり効かない — gzipやBrotliは繰り返しの多いテキストに強いのですが、Base64の文字列はランダム性が高く、バイナリの画像ファイルほど圧縮の恩恵を受けられません。

Base64とサイトの表示速度（PageSpeed）

Base64が速度に与える影響は、何を符号化するかで決まります。小さなアイコンであれば、HTTPリクエストが1つ減ることで体感上の Time to First Byte が改善し、同時接続の数も抑えられます。これはCore Web Vitalsの指標、とくにページの主要素が埋め込みアイコンである場合の LCP（Largest Contentful Paint）に良い形で表れます。

逆に大きな画像をBase64で埋め込むと、HTML文書そのものが重くなり、描画の開始が遅れます。Google PageSpeed Insightsも、HTMLが重すぎるページを低く評価しがちです。写真やバナーは、必ず最適化した外部ファイルで扱ってください。

Web用に画像を最適化するなら、まずは圧縮と、効率のよい形式への変換から始めます。ImageToolsの 圧縮 なら、ファイルをどのサーバーにも送らず、ブラウザ内で処理できます。

画像をBase64に変換する方法

画像からBase64の文字列をつくる方法はいくつかあります。

• オンラインツール — 単発の作業ならこれが一番早い方法です。ImageToolsの 画像をBase64にを使えば、どんな画像でもブラウザ内で変換し、コピーするだけのコードが手に入ります。
• ターミナル（Linux／macOS） — 次のコマンド base64 image.png で符号化された文字列が得られます。データURIの形にするには次のようにします。 echo "data:image/png;base64,$(base64 -w 0 image.png)".
• ブラウザ上のJavaScript — FileReader APIを使えば、利用者が選んだファイルを非同期でBase64に変換できます。
• Webpackなどのバンドラー — Webpack、Vite、Rollupには、ビルド時に指定サイズ以下のファイルを自動でインラインのBase64に変換するプラグインがあります。

よくある質問