画像をBase64に変換
画像をBase64文字列や、そのまま貼り付けられるデータURIに変換します。どこにもアップロードしません。
入力
出力
画像をオンラインでBase64に変換
画像をBase64として埋め込むと、HTMLメール、CSSファイル、JSONのペイロード、単体で完結するHTMLページなど、テキストの中に入れて運べます。ブラウザーは文字列から直接画像を読み込むので、ホストする別ファイルも、追加のネットワークリクエストも要りません。
このページは、ファイルタブを開き、データURIのプレフィックスをオンにした状態でBase64エンコーダー・デコーダーを開きます。エンコードはすべてブラウザー内で行われます。
結果を貼り付ける場所
| 場所 | 例 |
|---|---|
| HTMLの画像 | <img src="data:image/png;base64,iVBORw0…" alt="Logo"> |
| CSSの背景 | background-image: url("data:image/svg+xml;base64,PHN2Zy…"); |
| JSONのフィールド | {"avatar": "iVBORw0KGgo…"}（通常はプレフィックスなし） |
| Markdown | （レンダラーが対応している場合） |
インライン化が向いている場合
- 数KBの小さなアイコンやロゴ：サイズの増加より、リクエストが1つ増えるコストのほうが大きい場合。
- HTMLメール：外部画像が既定でブロックされることが多いため（データURIへの対応はメールクライアントによって異なるので、事前にテストしてください）。
- 単体で完結するファイル：書き出したレポートやオフラインのデモなど。
- API：JSON内のBase64でしか画像を受け付けないもの。
向いていない場合
大きな写真はサイズが3分の1増えるうえ、それを含むページやスタイルシートと別にキャッシュできなくなるため、ページを表示するたびにダウンロードし直されます。Webサイトで約10〜20KBを超える画像なら、通常の画像ファイルのほうが速く、できればPNGをWebPに変換やJPGをWebPに変換で変換しておくのが理想です。
SVGはBase64を使わない手も
SVGはもともとテキストです。CSSではBase64の代わりにURLエンコードして埋め込めることが多く、そのほうがサイズも小さくなります。例えばurl("data:image/svg+xml,%3Csvg …%3E")のような形です。このエンコードはURLエンコーダーで行えます。
Base64から画像に戻す
文字列から画像を復元するには、Base64デコードに貼り付けてください。画像はプレビューされ、正しい拡張子でダウンロードできます。