Che cos'è un attributo srcset nel tag IMG e come usarlo?

Question

Voglio sapere come posso iniziare a utilizzare l'attributo img HTML srcset nelle mie app mobili. Oppure c'è un altro plugin jQuery che mi aiuta a risolvere i problemi di risoluzione delle immagini.

<img srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x" alt="Banner Image" /> 

Answer 1

Here is a good article l'attributo srcset e come usarlo. srcet consente di dichiarare un set di immagini da visualizzare su diverse dimensioni di viewport. Devi solo salvare e immagini con diverse risoluzioni, ad es. banner-phone-HD.jpeg sarebbe la più alta risoluzione.

Exmaple:

<img alt="my awesome image" 
src="banner.jpeg" 
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x"> 

È possibile che questo servirebbe banner-phone.jpeg ai dispositivi con larghezza finestra sotto 640px, banner-phone-HD.jpeg per i dispositivi ad alta DPI piccolo schermo, banner-HD.jpeg a dispositivi DPI ad alta risoluzione con schermi superiori a 640 px e banner.jpeg a tutto il resto.

Esistono anche altri metodi come le query multimediali CSS che è possibile utilizzare per produrre lo stesso effetto.

Non sono a conoscenza di alcun plugin JQuery che possa essere d'aiuto.

Answer 2

In breve, Srcset è un nuovo attributo che consente di specificare diversi tipi di immagini per diversi formati di schermo/orientamento/tipi di visualizzazione. L'utilizzo è molto semplice, è sufficiente fornire molte immagini diverse che le separano con una virgola come questa: <img src="image.jpg" alt="image" srcset="<img> <descriptor>, ..., <img_n> <descriptor_n>">. Ecco un esempio: srcset="image.jpg 160w, image2.jpg 320w, image3.jpg 2x"

---

Questa è una risposta più che spiega le cose in ulteriori dettagli.

Differenza tra srcset e immagine. Entrambi srcset e picture fanno approssimativamente le stesse cose, ma c'è una sottile differenza: picture determina quale immagine deve utilizzare il browser, mentre srcset dà al browser una scelta. Un sacco di cose possono essere utilizzate per selezionare questa scelta come dimensione del viewport, preferenze degli utenti, condizioni della rete e così via. Il supporto per srcset è piuttosto buono e lo supporta più o meno almost all current browsers. La situazione con un elemento picture è un little bit worse.

I descrittori sono solo un modo per mostrare quale tipo di immagine è nascosto dietro la risorsa. Ci sono vari tipi di descrittori:

• densità descrittore. srcset="image.jpg, image-2X.jpg 2x" I valori di densità del display, 1x, 2x e così via, vengono definiti descrittori di densità di visualizzazione. Se non viene fornito un descrittore di densità di visualizzazione, si presuppone che sia 1x. Buona variante per visualizzare i display retina.
• descrittore di larghezza. srcset="image-240.jpg 240w, image-640.jpg 640w". Sono sicuro che questo è auto esplicativo. L'unico problema è che di per sé il descrittore della larghezza non è molto utile. Why? read here
• descrittore di formato, che ha senso solo se si utilizza il descrittore di larghezza. srcset="image-160.jpg 160w, image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">.Le istruzioni per il browser sono le seguenti: (max-width: 480px) 100vw - se la finestra è larga o uguale a 480 pixel, l'immagine sarà pari al 100% della larghezza della finestra. (max-width: 900px) 33vw - se il viewport è largo o uguale a 480 pixel, questa regola non verrà mai raggiunta a causa della precedente condizione del supporto. E 254px è quando non è elencata alcuna condizione del supporto, si presume che la lunghezza sia un valore predefinito utilizzato quando nessuna delle altre condizioni del supporto è soddisfatta.

Solo per completezza si aggiunge qui che v'è un attributo image-set() per un'immagine di sfondo nel CSS e qualche altro collegamento utile here