ブートストラップ3はまだ画像を読み込んでいるdivになります

Question

私はフロントページに複数の画像を持つ大きなカルーセルを備えた反応性の高いウェブサイトを構築しています。

デバイスごとに異なるサイズのイメージを作りたいと思います。そして、私は、モバイルユーザーのために帯域幅を節約するために、そのデバイスの正しいイメージだけをダウンロードしたいと考えています。

私はこのような何か実行して、ブートストラップショーが唯一の右の画像を作ることができます。私は、xsデバイスでこれをロードすると、それはまだすべての4枚の画像、またはちょうど下のものをダウンロードします

<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"/> 

を？適切なものをダウンロードするだけのベストプラクティスは何ですか？

本当にありがとうございます。

Answer 1

あなたの例では、4つの画像がすべて読み込まれます。これは、モバイルデバイスユーザーの本当の苦痛（およびサーバーへの余分な需要）です。応答性の高い画像は、幅広く合意された「最良の解決策」が存在しない数少ない分野の1つであり、ほとんどの開発者は答えを求められると肩をすくめます。

私はほとんどのユースケースではかなりうまく機能その1.5倍ハック発見しました：（最後に、しかし介してすべての道を読む価値）

http://alistapart.com/article/mo-pixels-mo-problems。

Answer 2

「responsiveimages.org」をご覧ください。この問題を解決しようとしており、適切なソリューションがハッキングよりも優れています。少し遅れて答えましたが、同じ問題を解決しようとしていたので、私がやっていることを投稿したいと思っていました:-)