google検索結果のサイト画像

半年ほど前から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にエンコードするため、サーバ側の負荷は上がりますが、サーバのスペックが高ければ、ホームページ表示の速度改善に使えそうです。