google検索結果のサイト画像
- 2011.06.12
- Webサイト
半年ほど前からgoogleの検索結果をクリックすると、サイトのサムネイル画像が表示されるようになりました。
このサイトの画像がとてもスムーズに表示され、サイトへ飛ぶ前にサイトの中身を知ることができます。
「さすがgoogleさん!」と、思いましたが、いくらなんでも画像の読み込み速度が高速すぎる・・・。
(Ajaxなどの非同期で画像を読み込んでいる場合、Loadingに多少時間がかかるのに)
気になってHTMLを見てみると面白いことが分かりました。
通常のホームページで画像を表示する場合、imgタグに画像のURLを付けます。
これによって、ブラウザが画像分のリクエストをサーバに投げ、画像を取得します。
<img src="test.jpg" />
それに対しgoogleは、HTMLに直接画像データを埋め込んでいました。
<img src="data:image/jpeg;base64,/9j/4AAQSkZJR・・・" />
これによって、画像データを取得するリクエストを無くすことが出来るので、サイト画像の表示が高速になるようです。
PHPで同じことをやろうとすると「base64_encode」という関数使い、画像データをbase64にエンコードして、HTMLに埋め込むことで実現できます。
(試しにやってみましたがとても簡単です)
base64にエンコードするため、サーバ側の負荷は上がりますが、サーバのスペックが高ければ、ホームページ表示の速度改善に使えそうです。
-
前の記事
Android端末の出荷台数がiPhoneの3倍に 2011.06.10
-
次の記事
galaxys、Android2.3.3にアップグレード 2011.06.13