私は写真ポートフォリオのウェブサイトを開発しています。データベースから画像をダウンロードするためのベストプラクティスを知りたいです。現在、ギャラリー全体は約20MBです。ギャラリーはまだ開発中です。写真の間に「読み込み中」のグラフィックを実行することだけを目的としていました。しかし、クライアントは画像のプリロードを好むようです。ページに20MB以上の写真をプリロードするのは実用的ですか?もしそうなら、そうするための最良の方法は何ですか?それとも、ロード画面を使用するのが最善でしょうか?
6 に答える
サーバーサイドスクリプトを介して画像を「サムネイル」し、サムネイルをプリロードし、サムネイルクリックで完全な画像を表示します(ある種のライトボックスjsを使用)。これにより、完全なporfolioプレビューを維持しながら、プリロード時間を大幅に短縮できます。
一度にフェッチするには20MBが多すぎるため、ユーザーエクスペリエンスが遅くて煩わしいものになります。おそらく、各画像を順番にajax-loadする必要があります。
ちなみに、あなたの画像はどれくらいの大きさですか?800 x 600 jpegは、90〜95%の品質で約50kである必要があります。したがって、20MBは400枚の画像になります。これは1ページに多くのようです。画像のサイズが大きいと思います。縮小することを検討してください。高解像度の非圧縮バージョンを利用できるようにしたい場合は、これらを個別にリンクしてください。
編集:参考までに、私が非常に大きなページ(html doc +すべてのcss、js、および画像アセット)と見なすものは約1MBになります。「平均的な」サイズのページはおそらく約100kです。
現在の写真を見ながら、次の数枚の写真をプリロードするのがより良い方法だと思います
ええ、絶対にこれをしないでください。一部のユーザーはモバイル接続で接続し、一部のユーザーはメガバイト単位で支払うことを思い出してください。これを行うと、ユーザーが決して見ることのない画像で20MBの許容量を使い果たしてしまいます。
どちらの解決策も実用的ではないと思います。画像を縮小することをお勧めします。
20MBは、1)ユーザーが待機し、2)それらの画像の大部分を表示することを確信できる特殊なアプリケーションでない限り、多分多すぎます。そうしないと、帯域幅が無駄になります。
データベーストラフィックを回避するために画像をサーバーメモリにキャッシュする戦略と、追加できるいくつかの画像のクライアント側の事前キャッシュを検討します。たとえば、ユーザーが画像「A」を使用している場合は、「B」と「C」もロードします。