Google のウェブ検索結果でウェブページのスクリーンショットに使われている data URI scheme。
data:[<mediatype>][;base64],<data> 形式のデータ (data URI scheme) を生成してウェブページに埋め込むことで HTTP リクエストを減らせるメリットがある。ただ、バイナリデータより3割ほどデータサイズが増える。
ファイルサイズが小さいアイコンを直接埋め込んだり、ブラウザが PC より対応しているスマートフォンでも使われ出している。ということで、画像のバイナリデータを Base64 にエンコードするツールをつくった。出力形式も HTML の img、CSS、JavaScript、生データに対応。
ツールの提供は終了しました。
data URI scheme がサポートしている HTML タグは
- object (images only)
- img
- input type=image
- link
CSSでは
- background-image
- background
- list-style-type
- list-style
とURLが設定できるところ。
<data> はサイズに制限があって基本 1,024 bytes まで。実装するブラウザでまちまち。
対応ブラウザは
- Firefox 2+ (100KB)
- Opera 7.2+ (4,100 characters)
- Chrome
- Safari
- IE 8+ (32 KB)
一枚の画像にアイコンやボタンを配置してCSSのポジション指定で表示させる CSS Sprite がありますが、画像の HTTP リクエストを減らすもう一つの選択肢として使える。メンテナンス性も CSS Sprite より高そうだ。