Il markup delle immagini adattabili può essere suddiviso in due scenari: in cui l'obiettivo è ottenere immagini più efficienti possibili e situazioni in cui è necessario un controllo esplicito sull'origine delle immagini selezionata dal browser. Puoi considerarli rispettivamente come sintassi descrittiva e prescrittiva.
In questo modulo apprenderai entrambi gli approcci. Prima di tutto, parleremo di srcset e sizes e di come aiutare il browser a fare la scelta migliore in base a ciò che sa dell'utente, del suo dispositivo e della sua situazione di navigazione. Scoprirai quindi l'elemento <picture>, che consente un controllo esplicito sulla selezione dell'origine in base a fattori quali le dimensioni dell'area visibile e il supporto del browser per i formati delle immagini.
Sintassi descrittive
Una sintassi descrittiva fornisce al browser informazioni sulle fonti delle immagini e sul modo in cui verranno utilizzate, ma in ultima analisi lascia il processo decisionale al browser. Questo è di gran lunga lo scenario più comune; per la maggior parte delle immagini non vuoi un controllo granulare sul comportamento del browser. I browser hanno a disposizione molte più informazioni rispetto agli sviluppatori web e, sulla base di queste informazioni, possono prendere decisioni complesse. Non è possibile prevedere in modo preciso i contesti di navigazione degli utenti perché l'hardware, le preferenze e la velocità di connessione sono moltissimi e non sono chiari. Nella migliore delle ipotesi, puoi fare ipotesi ragionate, ma non puoi sapere con certe l'esperienza di ogni utente sul web. Il caso d'uso centrale delle immagini adattabili è rigorosamente orientato agli obiettivi, dal punto di vista degli sviluppatori: consente ai browser di effettuare le richieste di immagini più efficienti possibili, in base alle informazioni a disposizione del browser.
Per consentire ai browser di effettuare queste scelte, srcset consente di fornire al browser un elenco di potenziali origini per la compilazione di un singolo <img>, mentre sizes consente di fornire al browser informazioni su come verrà visualizzato il <img>. Imparerai a utilizzarli nel prossimo modulo.
Sintassi prescrittivi
Con una sintassi prescrittiva, puoi indicare al browser cosa fare: la fonte da selezionare in base ai criteri specifici da te definiti. Sebbene questo caso d'uso non sia comune come "carica solo l'asset più efficiente per il rendering dell'immagine", ci consente di fornire istruzioni di utilizzo al browser per prendere in considerazione le informazioni che non dispone prima del trasferimento degli asset, ad esempio i contenuti delle fonti o i loro formati.
Mentre srcset e sizes forniscono una sintassi per trasmettere le informazioni al browser dell'utente e consentire di prendere decisioni sulle origini delle immagini, in alcuni casi avrai bisogno di un controllo esplicito su quale file sorgente viene presentato e quando. Ad esempio, potresti voler visualizzare versioni dello stesso contenuto di immagini con proporzioni diverse, in base a diverse opzioni di design nei punti di interruzione del layout, oppure assicurarti che solo i browser che supportano una codifica specifica ricevano origini specifiche.
In questi casi, vuoi un controllo esplicito sull'origine visualizzata e su quando. Queste sono garanzie che srcset e sizes non sono in grado di darci,
per definizione. Per ottenere questo controllo, dobbiamo usare l'elemento <picture>.