src または css の背景画像の url 値を base64 でエンコードしたコード

Webページ上の画像の中には、srcやcssの背景画像のurlの後に、例えば次のように大きな文字列があることにお気づきでしょうか。data: image/png; base64です。iVBORw0KGgoAAANSUhEUgnZVJlYWR5ccllPAAAhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/にあります。KuVgz5BDCSZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAAAABJRU5ErkJggg%3D%3D. で、それは何なのか？これがData URIのスキームです。
Data URIスキームはRFC2397で定義されており、小さなデータを直接ウェブページに埋め込んで、外部ファイルから読み込む必要がないようにするためのものです。例えば、上の文字列は実際には小さな画像です。この文字列をコピーしてFirefoxのアドレスバーに貼り付けてアクセスすると、1X36の白と灰色のpng画像として表示されます。
上記のData URIにおいて、dataはデータを取得するための契約名、image/pngはデータの種類名、base64はデータのエンコード方式、カンマ以降はこの画像/pngファイルをbase64エンコードした後のデータであることを示しています。
現在、Data URIスキームは以下のタイプをサポートしています。
データ：,テキストデータ
data:text/plain,テキストデータ
data:text/html,HTMLコード
data:text/html;base64,base64エンコードされたHTMLコード
data:text/css,CSSコード
data:text/css;base64,base64でエンコードされたCSSコード。
data:text/javascript,ジャバスクリプトコード
data:text/javascript;base64,base64エンコードされたJavascriptコード。
data:image/gif;base64,base64-encoded gif画像データ
data:image/png;base64,base64-encoded png イメージデータ
data:image/jpeg;base64,base64-encoded jpeg画像データ
data:image/x-icon;base64,base64-encoded icon 画像データ
base64 は、ある 8 ビットデータを標準的な ASCII 文字に変換するだけです。ウェブ上には base64 エンコード/デコード用のフリーツールが多数あり、 echo base64_encode(file_get_contents( 'wg.png')) のように関数 base64_encode() で PHP でエンコードすることが可能です。
現在、IE8、Firfox、Chrome、Operaのブラウザがこのような小さなファイルの埋め込みに対応しています。
写真の一例として。
Webページ内の画像は、このように表示することができます。
<img src="http://www.letuknowit.com/images/wg.png"/>
また、このように表示することも可能です。

画像ファイルの内容を直接HTMLファイルに書き込んでいるので、HTTPリクエストを節約できるメリットがあります。デメリットは、このような画像はブラウザがキャッシュしないことです。トレードオフの判断は自由です。