学校グループのウェブサイトを作成中ですが、ウェブサイトにはその活動の写真がたくさん掲載される予定です。写真がスライドショーとして表示されるようにライトボックスを使用しています。写真の寸法を変更して、スライドショーの「現在の」写真が元の写真ほど大きくならないようにしました。写真を開いたり、次の写真に移動したりするのに、まだ約 5 秒の遅延があります。読み込み時間を短縮する方法や、私が考えていなかった別の方法があるかどうか疑問に思っています。
サイトに xhtml、css、および php を使用しています。
回答して申し訳ありませんが、コメントを書くことができません...
私は別の方法でそれを行っています。アップロード後、画像を大きな画像とサムネイルにリサンプリングしました。
もちろん、毎回画像をリサンプリングすることもできますが、これが理由であり、長い間待たなければならない理由であり、一度に多くの訪問者がいる場合、サーバーにとっては多くの作業になります。
だから私にとっては、その大きな画像は最大640x480であり、このサイズにアップロードした後、もちろん同じ比率でリサンプリングされた画像を保存するのが最善の方法です。
編集：あなたの投稿から、画像のサイズ変更/リサンプリングを行っているかどうか、HTMLで高さと幅を設定するか、PHPでどのくらいの頻度であるかわかりません。
サーバーに画像があり、そのサイズが 8000x6000 だとします。そのサイズは 10 MB 程度になる可能性があります。
この画像を Web ページに表示したい場合、次のようにします。
<img src="largeImage.jpg" width="800" height="600"/>
ブラウザは大きな画像 (10 MB) をダウンロードしますが、これには非常に時間がかかります。次に、メモリ内で 800x600 にサイズ変更して Web ページに表示します (これにはメモリと CPU 時間が消費されます)。合計時間: 25 秒。
この画像のサイズを 800x600 に変更し、このサイズ変更した画像をサーバーに配置するとします。次に、画像を表示します
<img src="smallImage.jpg" width="800" height="600"/>
小さい画像は Web ページにアクセスするユーザーと同じように見えますが、ブラウザは 100 KB 程度の小さい画像 (大きい画像の 100 分の 1) をダウンロードするだけで済みます。画像のダウンロードにかかる時間も 100 で割ります (0.25 秒)。ブラウザーは、メモリ内の巨大な画像を読み込んでサイズ変更する必要がありません (メモリが減り、CPU 時間が減ります)。画像はほぼ瞬時に表示されます。
大量の画像をまとめて一度にサイズ変更できるツールはたくさんあります (私は Irfanview を使用しています)。あなたはそれをすべきです。