ライトボックス用の大きい画像は別途必要？

Question

サイト制作で、画像を添付する際に、ライトボックス用の大きい画像と、通常WEBページ上で表記される画像が同じ場合が少なからずあると思います。

その場合現場では、二つの画像を別のサイズのものにしていますか？

それともリダイレクトが二度になることを考えると、ライトボックス用の大きい画像で両方済ましてしまうほうが、レンダリングの速度が速くてよいのでしょうか？

Answer 1

大きい画像がとてつもなく大きい場合、小さい画像を配置して、拡大表示するばあいに大きい画像をロードします。
10個くらいしかなくて各画像も800x800 程度ならば、大きい画像を縮小表示して小さい画像の代用とします。小さくした画像を等倍でlightbox で表示したとき、それ用にまた 800x800 の画像が再度読み込まれるのではなくて、ロード済みファイルのエリアをブラウザは持ってるのでそこから引っ張ってきて画像を表示します。
1mバイトでも通信には結構なコストなので、10個とか2-3個しかなくても、小さい画像を用意した方がページの読み込み速度も改善するし、見ない画像はロードされないので見る側にも優しい画面になりますね。
小さい画像は、ハッキリ言ってつくるのが面倒くさいです。一度作れば終わりなんですけど。
こういう場合は、大きい画像を縮小してサムネイルサイズで保存する処理を一括でやってくれるプログラムを作ったり、大きい画像をパラメーターに指定すると小さい画像で返す処理を作るのがいい感じです。
<img src="http://hogehoge.com/images/converter.jsp?a=thumbnail&f=kyoto-fukei.jpg" />
とか。java のウェブしすてむの例。converter.jsp は、kyoto-fukei.jpg を読み込んでサムネイル画像イメージを返す。？のうしろが変化無ければこのファイル名が無い画像もブラウザにキャッシュされます。なので、2度目のサイト訪問時は更に表示速度がアップします。

Comments

[退会済みユーザー]

ありがとうございます。

ライトボックスの画像は、そのページが表記される際には読み込まれず。
ライトボックスの画像をクリックした際に、始めて読み込まれるのですね。

つまりページのレンダリング速度は、ライトボックスは大きめ、ページ上は小さめにしておいたほうが早くコンバージョン率にもよい影響が出るのですね。