2010年11月11日木曜日

横幅可変のレイアウトでは横幅をおよそ1000ピクセルとしてGoogleインスタントプレビューのキャプチャが取得される(多分)

昨日、Googleインスタントプレビューで表示されるキャプチャ画面を考慮したWebデザインについて記事を書きました。

Googleインスタントプレビュー最適化としてのWebデザイン

Googleのほうでサイトのキャプチャを取得し、検索画面上に表示してくれます。キャプチャ画像の横幅は一定なので、サイトの横幅に応じて縮小率は変わってくることになりますが、今回は横幅が可変のリキッドレイアウトのような場合にサイトの横幅をどれくらいとして画面キャプチャが行われているのか調べてみました。

最初にGoogleインスタントプレビュー画面で表示されるキャプチャ画面の横幅から確認します。



横幅は300ピクセルです。

ではこの元になっているサイトが横幅が可変のレイアウトだった場合に、キャプチャの元の画像の幅がどれくらいなのかを確認してみます。対象のサイトはWikipediaです。

ここでブラウザやフォントなどに影響されない画像の縮小率から計算します。インスタントプレビューで表示されたキャプチャの中から焼きそばの画像を一つ選びサイズを測ります。

59×53

次に同じページをブラウザで表示し、同じ画像のサイズを測ります。

202×179

キャプチャの画像の方は輪郭がぼやけていて正確にサイズが図れていない可能性があるのですが、横幅と高さについてそれぞれ(元のサイズ)÷(キャプチャしたサイズ)を計算すると次のようになります。

3.423728813559322
3.377358490566038

多少ばらついているので平均しました。

3.40054365206268

つまり画像は元のサイズから 1/3.4 倍に縮小されていることが分かります。

念のため、もう一つ別の横幅が可変のサイトを対象に、インスタントプレビュー上の画像サイズと元のサイトの画像サイズを元に計算してみました。



同じように計算した結果は次の通りです。

3.30794587092297

先ほどと微妙に違いますが、画像のサイズが正確に計測できないのでご了承下さい。

この結果とキャプチャ画像の横幅は300ピクセルだったことから、キャプチャされる前のサイトの横幅は 990~1020ピクセル ということになります。

横幅が可変のサイトを運営されている方は、横幅がおよそ1000ピクセルぐらいで表示された状態でキャプチャされると覚えておいて下さい。