AjaxUploadの諸問題と画像プレビュー その1
2010.12.15 Author: ぴ
最近、Googleにサイトプレビュー機能がついたことはご存じと思います。
検索を行うと、リンクの右側に虫眼鏡マークがついていまして、クリックをするとそのサイトのプレビューが見えるというものです。
この画像表示が異様に速いのにお気づきでしょうか。実は、これはdataスキームを使って処理がなされています。dataスキームを使って処理をすることで、
- 1回のHTTPリクエストで処理が済む
実現方法も非常に簡単です。
<img src="data:MIME_TYPE;base64,データ">のように書くだけです。非常に簡単です。
ちなみに、phpで処理する場合は非常に簡単で、
printf(
<img src="data:%s;base64,%s">',
base64_encode(file_get_contents(ファイル))
);
とでもしてやれば、簡単に実現できます。
使用用途として、ファイルサイズが小さいもの(アイコン等)に適しています。
通常、画像ファイルは一度ブラウザが読み込んでしまえば、キャッシュが効くのでページ表示の体感速度は向上します。
ただ、このdataスキームを使っている場合は、毎回base64エンコードしたものをhtmlで送り込んでいるので
、無駄と言えば無駄ですね。
回避する方法としては、
- CSSの背景画像にデータスキームを使ってあげる
- mod_deflateでgzip圧縮してあげる
では、次回はこれを応用して何かしてみます。
名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ
