画像→Base64変換

画像をコードに貼り付けられるBase64文字列に変換。

ブラウザ内で動作します。ファイルが端末から出ることはありません。

画像をBase64に変換する方法

  1. ここに画像をドロップするか、「ファイルを選択」をタップします。
  2. データURL、Base64のみ、またはすぐ使えるCSSかHTMLのコードをコピーします。
  3. コードに貼り付けます。

エンコードの仕組み

Base64は画像の3バイトごとに4つの文字に変換します。使われるのはA〜Z、a〜z、0〜9、プラス記号、スラッシュの64文字で、RFC 4648で定められた標準的な文字セットです。

data URLは、そのテキストの前にdata:image/png;base64のような短い接頭辞を付けたもので、別ファイルがなくてもブラウザやアプリがすぐに中身を認識できます。

元のファイルBase64テキスト（約37%増）
5KBのアイコン約6.9KB
20KBのロゴ約27KB
100KBの写真約137KB

このオーバーヘッドがあるため、data URLは写真全体ではなく小さいグラフィック向きです。

data URLが使われる場面

  • CSSのbackground-imageの中。小さいアイコンを別リクエストなしでスタイルシートと一緒に読み込めます。
  • HTMLのimg src属性やインラインのSVGマークアップの中。
  • 画像をテキストとして保存するJSON APIのレスポンスやデータベースのフィールド。
  • メールのHTML。一部のメールクライアントはリンク画像をブロックしますが、インラインのデータは許可することがあります。

通常のファイルのままにしておくべき場面

data URLはそれを含むページと切り離してキャッシュされないため、10ページで使う写真は1回ではなく10回ダウンロードされてしまいます。小さいアイコンより大きい画像には、ブラウザキャッシュが効く通常の画像ファイルの方が高速です。

画像→Base64のFAQ

Base64のデータURLとは何ですか？

画像のバイトデータをテキストとして書き出したもので、別ファイルを用意せずに画像をそのままHTML、CSS、JSONに貼り付けられます。

Base64にするとファイルは大きくなりますか？

はい、約37%大きくなります。画像の3バイトごとに4文字のテキストへ変換されるためです。

ファイルの代わりにdata URLを使うべき場面は？

小さいアイコンやシンプルな図形など、ページサイズよりも通信回数を減らすことが重要な場合です。写真には通常の画像ファイルを使いましょう。

画像はどこかにアップロードされますか？

いいえ。エンコードはブラウザ内で行われるため、画像が端末の外に出ることはありません。

Base64に変換すると画質は変わりますか？

いいえ。ピクセルデータ自体には手を加えず、テキストとして書き出すだけなので、デコードすれば元とまったく同じバイトに戻ります。

data URLのサイズに上限はありますか？

ブラウザ側の厳密な上限はありませんが、長いdata URLは単独でキャッシュできず解析も遅くなるため、小さいアイコンや図形にとどめましょう。

すべてのブラウザがdata URLに対応していますか？

はい。data URLはInternet Explorer 8以降のすべての主要ブラウザで動作し、現在のモバイルブラウザもすべて対応しています。

ファビコンに使えますか？

小さいファビコンならHTMLのheadにdata URLとして埋め込めますが、通常はfavicon.icoファイルとPNGサイズを用意する方が一般的です。

関連ツール