Bootstrap 3 sarà un div nascosto caricare ancora le immagini

Question

Sto costruendo un sito Web reattivo con un grande carosello con più immagini sulla prima pagina.

Desidero creare una dimensione diversa dell'immagine per ciascun dispositivo. E voglio assicurarmi che venga scaricata solo l'immagine giusta per quel dispositivo per risparmiare larghezza di banda per gli utenti mobili.

posso fare spettacolo bootstrap solo le immagini giuste per fare qualcosa di simile:

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

Se carico presente su un dispositivo xs, sarà ancora scaricare tutte le 4 immagini, o solo quello in basso ? Qual è la prassi migliore per garantire che vengano scaricati solo quelli giusti?

Apprezzo davvero il tuo aiuto come sempre.

Answer 1

L'esempio caricherà tutte e quattro le immagini, il che è un vero problema per gli utenti di dispositivi mobili (e una maggiore richiesta sul server). Le immagini reattive sono una delle poche aree in cui non esiste una "soluzione migliore" ampiamente concordata e la maggior parte degli sviluppatori si limita a scrollare le spalle quando viene premuto per una risposta.

ho trovato che il 1.5x Hack funziona abbastanza bene nella maggior parte dei casi d'uso:

http://alistapart.com/article/mo-pixels-mo-problems (alla fine, ma vale la pena leggere fino in fondo).

Answer 2

Dai un'occhiata a "responsiveimages.org" poiché stanno cercando di risolvere questo problema e una soluzione adeguata è migliore di un hack. È un po 'tardi per rispondere ma da quando stavo cercando di risolvere lo stesso problema ho pensato di pubblicare quello che sto facendo :-)