5

フロントページに複数の画像がある大きなカルーセルを備えたレスポンシブ Web サイトを構築しています。

デバイスごとに異なるサイズの画像を作成したい。また、モバイル ユーザーの帯域幅を節約するために、そのデバイスに適した画像のみがダウンロードされるようにしたいと考えています。

次のようにして、ブートストラップに適切な画像のみを表示させることができます。

<img src=" http://placehold.it/1700x700" alt="Placeholder" class="visible-lg"/>
<img src=" http://placehold.it/1100x700" alt="Placeholder" class="visible-md"/>
<img src=" http://placehold.it/900x700" alt="Placeholder" class="visible-sm"/>
<img src=" http://placehold.it/768x700" alt="Placeholder" class="visible-xs"/>

これを xs デバイスにロードすると、4 つのイメージすべてがダウンロードされるのでしょうか、それとも一番下のイメージだけがダウンロードされるのでしょうか? 正しいものだけをダウンロードするためのベストプラクティスは何ですか?

いつもお世話になっております。

4

2 に答える 2

6

あなたの例は 4 つの画像すべてをロードしますが、これはモバイル デバイス ユーザーにとっては本当に苦痛です (そして、サーバーに余分な負荷がかかります)。レスポンシブ イメージは、広く合意された「最善の解決策」が整っていない数少ない分野の 1 つであり、ほとんどの開発者は答えを求められると肩をすくめるだけです。

1.5x Hackは、ほとんどのユースケースでうまく機能することがわかりました。

http://alistapart.com/article/mo-pixels-mo-problems (最後ですが、最後まで読む価値があります)。

于 2013-10-29T15:44:55.640 に答える
1

「responsiveimages.org」を見てください。彼らはまさにこの問題を解決しようとしており、適切な解決策はハックよりも優れています。答えるのが少し遅れましたが、同じ問題を解決しようとしていたので、私がやっていることを投稿すると思いました:-)

于 2014-01-21T11:26:22.730 に答える