Base64画像エンコーダー
画像をBase64データURIに変換・復元
すべての処理はブラウザ内で完結します。データが端末外に送信されることはありません。
関連ツール
使い方
目的に応じてエンコードまたはデコードモードを選択してください。エンコードは画像をBase64文字列に、デコードはBase64文字列を画像に変換します。
エンコードまたはデコードモードを選択する
エンコードを選択すると画像ファイルをデータURIに変換し、デコードを選択するとデータURIを画像に復元します。
入力を用意する
エンコードモードでは画像ファイルをアップロードするとFileReader APIで即座にデータURIが生成されます。デコードモードではdata:image/で始まる完全なデータURIを貼り付けてください。
結果をコピーまたはダウンロードする
エンコードモードでは生成されたデータURIをコピーしてHTMLのimg srcやCSSのbackground-imageに貼り付けてください。デコードモードではダウンロードをクリックして画像を保存してください。
使用例
CSSにアイコンを埋め込んでHTTPリクエストを削減
32×32のPNGアイコンをBase64エンコードしてCSSのbackground-image値に貼り付けると、追加のHTTPリクエストなしにスタイルシートと同時に即座に読み込まれます。
ソースコードのデータURIから画像を復元
レガシーHTMLファイルにあるデータURIをデコードモードに貼り付けると画像をプレビューしてPNGやJPEGファイルとしてダウンロードできます。
このツールについて
画像をBase64データURIに変換してHTML・CSS・JavaScriptに直接埋め込んだり、既存のデータURIを画像に戻したりできます。エンコードモードでは画像ファイルを選択するとimg srcやCSS background-imageに貼り付けられるデータURIが生成されます。デコードモードではデータURIを貼り付けると画像をプレビューしてダウンロードできます。FileReader APIを使用しサーバーへのアップロードはありません。