immagini responsive srcset Non funziona

Question

Ho cercato di attuare il nuovo approccio srcset alle immagini sensibili, utilizzando il seguente codice HTML

 <img class="swapImages" 
     srcset="assets/images/content/large.jpg 1200w, 
       assets/images/content/medium.jpg 800w, 
       assets/images/content/small.jpg 400w" 
     sizes="100vw" 
     src="assets/images/content/small.jpg" 
     alt="responsive image"> 

Im usando Chrome 40 e tutto quello che ottiene è l'immagine più grande, ridimensionando il mio browser , cancellare la cache non fa nulla.

Ho letto da qualche parte ho dovuto polyfill, così ho usato il plugin picturefill, anche se Chrome dovrebbe supportarlo ..... ancora non funziona.

ho messo insieme una pagina di prova per esso: http://www.darrencousins.com/lab/resp-img-srcset/

Che cosa sto facendo di sbagliato/non ottenere?

Qualsiasi aiuto è enormemente apprezzato.

Answer 1

Avete corretto.

Il fatto è che, una volta che il browser ha l'immagine a risoluzione più alta (caricata, nella cache), non ha senso scaricarne uno di qualità inferiore, anche quando riduci la finestra (il punto è salvare il traffico).

Quindi, se si desidera testare questo, basta ridurre la finestra e poi caricare la pagina (dopo aver svuotato la cache/o utilizzare la modalità di navigazione in incognito). Otterrai la versione per cellulari o tablet. Quindi, ingrandendo la finestra, a un certo punto vedrai il tuo browser passare alla risoluzione più alta.

Answer 2

Quando utilizzato in un tag img, l'attributo srcset lascia le decisioni al browser in termini di quale immagine caricare come indicato da TondaCZE. Se si desidera forzare i browser a caricare immagini in finestre specificate, si desidera utilizzare l'elemento picture.

<picture> 
    <source srcset="large.jpg" media="(min-width: 1200px)" /> 
    <source srcset="medium.jpg" media="(min-width: 800px)" /> 
    <img src="small.jpg" /> 
</picture> 

Answer 3

Ho appena notato che la pagina demo (http://www.darrencousins.com/lab/resp-img-srcset/) non è mai stato visualizzando la versione mobile (anche se il ridimensionamento del browser o utilizzando le DevTools - Device mode) su Google Chrome (versione 48).

La modifica del rapporto pixel del dispositivo su 1 sembra caricare l'immagine corretta.

Io non so perché, mi chiedo se i descrittori w prendono il rapporto di pixel del dispositivo in considerazione

Answer 4

Credo che si sta testando il browser Chrome, e la solo il motivo per cui non funziona lì è perché è una caratteristica di cromo. Vedi sotto dello stack filo troppo pieno (che vale per la versione più recente di Chrome V54 pure):

Google Chrome version 40 srcset attribute problems

controllato il vostro pagina su IE8 e Firefoxv49 e le cose funzionano come un fascino!

L'altra cosa che ho osservato è che sebbene Chrome non scarichi altre immagini, ridimensiona quella scaricata abbastanza bene.Quindi, in un certo senso siamo ancora in una condizione molto migliore se fosse stato solo questo a pagina:

<img srcset="assets/images/content/large.jpg 1200w" alt="large image">