Utilizzare SRCSET con Immagini e Immagini in Evidenza

Question

Utilizzare SRCSET con Immagini e Immagini in Evidenza

27 dic 2016, 18:19:00

Voti: 1

Sto cercando di far funzionare SRCSET per caricare immagini di dimensioni diverse in base al dispositivo.

La mia comprensione è che quando la larghezza del dispositivo o della finestra cambia, SRCSET dovrebbe caricare SOLAMENTE l'URL corrispondente alla dimensione appropriata.

Posso vedere che gli URL vengono generati per ogni immagine, insieme alle dimensioni. Queste sono tutte immagini reali e si collegano correttamente alle dimensioni giuste:

URL SRCSET generati da WordPress

Fantastico! Il problema è che non sono riuscito a verificare, su nessun dispositivo, che il browser stia effettivamente caricando qualcosa di diverso dall'immagine originale (grande). In altre parole, che venga utilizzata una qualsiasi delle altre dimensioni ottimizzate per mobile. Se apro o salvo l'immagine in questione, è sempre quella originale. Le versioni più piccole dell'immagine sembrano non venire utilizzate affatto.

Quindi: c'è qualche componente JavaScript, o qualche tipo di configurazione che mi manca? Qualcosa a cui agganciarsi in WordPress? Sto usando un tema personalizzato ma noto lo stesso comportamento con TwentyFifteen. C'è qualcosa che devo registrare nel file functions.php? Scrivo questo dopo aver fatto molte ricerche e sono ancora completamente bloccato su quale passo mi manchi.

TwoLunch

11

immagini mobile responsive retina

Commenti

Puoi utilizzare gli strumenti per sviluppatori della maggior parte dei browser moderni, scheda Network, per vedere quali risorse vengono caricate.

cybmeta

27 dic 2016 19:54:11

Sto utilizzando gli strumenti per sviluppatori, tutti mostrano solo l'immagine originale che viene caricata, indipendentemente dalla larghezza del dispositivo, anche nella Chrome Device Toolbar. Nella scheda Network, l'unica risorsa caricata nella timeline è sempre l'immagine grande originale su tutte le dimensioni. Ho provato anche con Firefox. Non c'è alcun punto in cui avviene uno "scambio" o un cambio. Potrei capire che accada sui browser desktop (che non registrano una finestra più piccola come un viewport effettivamente più piccolo) ma non so come altro testare che questo funzioni realmente.

TwoLunch

29 dic 2016 16:57:41

Tutte le risposte alla domanda

JHoffmann 1.86K · Answer 1 · 2016-12-27T19:32:10Z

I browser che comprendono l'attributo srcset sceglieranno automaticamente l'immagine che corrisponde tra le dimensioni definite e lo spazio disponibile. La maggior parte dei browser moderni supporta questa funzionalità, mentre i browser più vecchi ancora in circolazione torneranno a un comportamento di fallback e utilizzeranno semplicemente l'immagine collegata nell'attributo src. Non è necessario alcun Javascript aggiuntivo per attivarlo, la presenza del corretto srcset è sufficiente.

Se vuoi testare se i tuoi attributi srcset funzionano come previsto, puoi utilizzare gli strumenti per sviluppatori (normalmente visualizzati premendo F12) del tuo browser. Riduci la finestra del browser abbastanza da far sì che una delle versioni più piccole venga caricata. Apri la scheda "Network" degli strumenti per sviluppatori, quindi carica la pagina. Ora vedrai tutti i file caricati e potrai verificare quali versioni delle immagini sono state caricate. Se ora ridimensioni la finestra a una dimensione maggiore, dovresti vedere che le immagini più grandi vengono caricate in aggiunta.

Un altro modo per visualizzare quali immagini vengono caricate è sostituire le versioni delle dimensioni con immagini di contenuto diverso direttamente via FTP, in modo da poter identificare facilmente quale è stata caricata.