画像を Base64 に変換
画像をコードに貼れる文字列に。
無料 · 登録不要 · 端末内で処理
ファイルは端末から出ません
- Data URIで返る
- HTML/CSSに埋め込む
- Copyで写す
- Private端末内で変換
画像を Base64 に変換の仕様
- 入力形式
- JPG・PNG・WebP・HEIC
- 返ってくるもの
- データ URI とコピー
- 貼る先
- CSS や HTML にそのまま
- 一度に扱う数
- 一枚ずつ
- 処理する場所
- ブラウザのタブの中
- 料金
- 無料
- 登録の要否
- 不要
画像を Base64 に変換の使い方
- 1
画像を入れる
画像を入れる
- 2
文字列をコピー
文字列をコピーする
- 3
コードに貼る
コードに貼り付ける
よくある質問
どんなときに Base64 を使いますか？
アイコンのような小さな画像に向きます。大きな画像を埋め込むと HTML や CSS が重くなり、表示が遅くなります。
画質は変わりますか？
変わりません。同じ画像のデータを別の書き方で表しているだけで、読み戻せば見た目は同じです。
Base64 から画像に戻せますか？
この画面は画像から文字列にする側だけです。文字列を画像に戻す仕組みは入っていません。
Base64 をウェブで使う
画像の種類と Base64 の中身を持つデータ URI を作ります。HTML、CSS、JSON に直接埋め込めます。
- データ URI で埋め込むと通信の回数が減り、小さなアイコンや背景では表示が軽くなります。
- 引き換えに、文字列は元より三割ほど大きくなり、HTML や CSS と別に貯めておけません。
仕様をすべて見る
| 入力形式 | JPG・PNG・WebP・HEIC・HEIF をタブの中で読みます。 |
|---|---|
| 返ってくるもの | データ URI が一つ。横にコピーのボタンが付きます。 |
| 貼る先 | CSS や HTML にそのまま貼れます。 |
| 一度に扱う数 | 一枚ずつです。 |
| 処理する場所 | このブラウザのタブの中。画像は端末から出ません。 |
| 料金 | 無料 |
| 登録の要否 | 不要 |
同じファイルのまま続ける
開発ツール一覧： SPOTTOOLSの開発ツール