base64エンコード、インラインイメージが作れます。HTTPリクエスト軽減に細かな画像をCSSに埋め込みましょう。

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

使い方はとってもシンプル。画像等のファイルを指定するだけ。業務で使える。完全無料、フリーです。
インラインイメージとしてCSSに埋め込めばHTTPリクエスト軽減できます。

画像ファイル1を選択
 
ファイルを指定してください。(200KB以下)
今までに作成頂いた数:1650
base64とは、制御コード等を含む印字不可能なバイナリデータやマルチバイト文字を、64種類の英数字のみを用いてエンコードする方式です。
MIMEによって規定されていて、7ビットのデータしか扱えない電子メールにて広く利用されています。

base64についての詳細:
エンコード後のデータ(文字列)は、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リクエストを減らす事が可能となり、またトータルのファイル数もそれに応じて減りますので扱いやすくなるという利点が有ります。
対応ブラウザは以下の通りとなっており、古いブラウザは対応していないので注意が必要です。基本的には1024Byteまでとなっていた様ですが現在は不明です。
・FireFox 2以降 (100KBまで)
・Chrome
・Safari
・Opera 7.2以降 (4,100文字まで)
・IE 9以降 (4GBまで)
・IE 8 (32KBまで)
・IE 7 は未対応

上記ブラウザでもCSSは対応していてもHTML内では対応していないなどばらつきがありますので事前に確認しましょう。
古いブラウザでは対応していないので、スマートフォンサイトへ用途を限定するか、JavaScriptで対応させる事になります。
CSSファイルサイズが増えますので、gzip圧縮との併用も考慮してみましょう。
HTTPリクエストを減らす目的で有ればCSSスプライトや、Expiresヘッダの設定という選択肢も有ります。
HTMLやCSSに画像を埋め込む「インラインイメージ」の記述方法

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

HTML内では以下の様に使用できます。
<img src="data:image/png;base64,iVBORw0KGgoA--中略--AAAAElFTkSuQmCC">
インラインイメージの利用価値
インラインイメージの利用価値は、単純にCSSやHTMLに埋め込むだけではありません。冒頭に記述したようにバイナリデータがテキストデータに置き換わっているのですから持ち運びが非常に容易と言う事です。
phpやJavaScriptそしてデータベースで使用する際にそのまま持ち運びが可能です。
データベースの場合はテキストフィールドにそのまま保管可能です。わざわざ画像保管用のディレクトリを用意しなくてもいいですし、他のレコードへのコピーも削除も非常に簡単です。そしてバックアップがデータベースだけでいいのは非常に有りがたいです。
phpからJavaScriptへのデータ渡し、その逆も複雑な記述をしなくても実現できます。
phpにはbase64の為の関数が用意されています。

phpでのbase64エンコード、デコード
base64_encode() -- MIME base64 方式でデータをエンコードする
base64_decode() -- MIME base64 方式によりエンコードされたデータをデコードする
エンコード出来るデータは画像に限ったものでは無くテキストファイルでも何でも構いません。
<?php
$str = 'This is an encoded string';
$enc = base64_encode($str);
print $enc;   // VGhpcyBpcyBhbiBlbmNvZGVkIHN0cmluZw==
$str2 = base64_decode($enc);
print $str2;   // This is an encoded string
?>
記載している記述の戻り値や、省略可能な引数、対応しているphpバージョンなどに関してはphpオフィシャルサイトを参照下さい。

JavaScriptには同等な機能があらかじめ用意されていないようですので、自作する必要が有ります。

phpからJavaScriptへのデータ渡しの例:
<script> var code = <?php print $base64; ?> </script>

JavaScriptからphpへのデータ渡しの例:
<form>
<input type="text" name="base64" id="base64" value="">
</form>
<script> document.getElementById('base64').value = base64; </script>
としてGETやPOSTで渡す。
もっとエレガントな方法も有りますがここでは省略します。
この記事は2012年時点のものです。
このサイトについてのお問い合わせはエーオーシステムまでお願いいたします。
ご使用上の過失の有無を問わず、本プログラムの運用において発生した損害に対するいかなる請求があったとしても、その責任を負うものではありません。
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
top of page