base64エンコード、インラインイメージ

画像やあらゆるファイルをBase64エンコードした文字列を出力

画像やあらゆるファイルをBase64エンコードした文字列を出力します。

base64エンコード、インラインイメージ

画像を指定すればBase64エンコードを出力します。HTMLやCSSのインラインイメージとして使用可能。
画像に限らずあらゆるファイルをBase64エンコードします。
小さな画像はインラインイメージとして埋め込めばファイル管理数が減り、HTTPリクエスト数も軽減されます。
処理はJavaScriptで完結しています。サーバーにアップロードされませんので機密データも安心。個人利用無料、商用利用無料。

ファイルを選択　ここにドラッグまたはここをクリック

 
関連サイト：
文字列をBase64エンコード
Base64文字列をデコード
動作環境(2022-08-28時点)
・Google Chrome 104
・Microsoft Edge 104
・Mozilla Firefox 104
・Apple Safari 15.6
使い方:
画像やその他ファイルを選択またはドロップします。
画像の場合はプレビューが表示されます。
Base64エンコードされた文字列が表示されます。コピーしてお使いください。
base64:
base64とは、制御コード等を含む印字不可能なバイナリデータやマルチバイト文字を、64種類の英数字のみを用いてエンコードする方式です。 MIMEによって規定されていて、7ビットのデータしか扱えない電子メールにて広く利用されています。
エンコード後のデータ(文字列)は、A-Z,a-z,0-9までの62文字と、+-の記号2つ、パディングの為の記号=の1個、合計64文字+1となります。 データ量は4/3(約133%)になります。MIMEの基準では76文字ごとに改行コードが入る為、この2バイトを含めるとデータ量は約137%になります。
インラインイメージ(インライン画像)について：
「data:」に続いてMIMEタイプの「image/png」や「image/gif」や「image/jpeg」が続き、「；」と「base64,」そしてbase64エンコードされた文字列が続く一連の文字列を使用します。
例)
data:image/png;base64,iVBORw0KGg--略--FTkSuQmCC

HTMLやCSSにbase64エンコードデータを埋め込んだ物をインラインイメージと呼びます。
ウェブサイトのCSS内にインラインイメージとして埋め込むことでHTTPリクエストを減らす事が可能となり、またトータルのファイル数もそれに応じて減りますので扱いやすくなるという利点が有ります。
HTMLやCSSに画像を埋め込む「インラインイメージ」の記述方法：

CSS内では以下の様に使用できます。
background-image: url(data:image/png;base64,iVBORw0KGgoAA--略--AAAElFTkSuQmCC);

HTML内では以下の様に使用できます。
<img src="data:image/png;base64,iVBORw0KGgoA--略--AAAAElFTkSuQmCC">
2012年初版
2022年8月改訂
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。