Corsi on-line

Responsive Design ed elemento picture di HTML5

L’elemento picture di HTML5 è stato introdotto per dotare gli sviluppatori (e per associazione i browser Web) di uno strumento addizionale con il quale gestire le immagini, in particolare quelle fotografiche; la sua sintassi non manca però di una certa complessità dovuta ai diversi ambiti riferibili all’ottimizzazione grafica (ridimensionamento delle immagini, Responsive Design, adattabilità ai display con alta densità di DPI, supporto MIME da parte del browser..).

HTML5

Sostanzialmente l’utilizzo di picture prevede il rispetto di alcune regole che sarà necessario osservare al fine di ottenere il risultato desiderato. La prima regola stabilisce che tale elemento richiede il tag img quale ultimo componente delimitato, si tratta a ben vedere di un accorgimento pensato innanzitutto per incrementare il livello di accessibilità delle immagini (caratteristica sottolineata dal successivo inserimento di alt per il testo alternativo); in secondo luogo questa disposizione consentirà ai browser più datati di utilizzare il solo tag img.

Una seconda regola riguarda l’overriding, cioè il fatto di privilegiare alcuni elementi a discapito di altri quando entrambi presenti, motivo per il quale gli attributi sizes ed srcset verranno presi in considerazione prima dell’src associato a img; ciò, naturalmente, non sarà vero anche per le versioni meno aggiornate dei browser che continueranno ad utilizzare img src come riferimento.

Bisognerà poi tenere conto del fatto che srcset e sizes sono meno vincolanti di quanto non si possa credere; essi rappresentano in pratica una sorta di “indirizzo”, per cui in presenta di una device-pixel-ratio pari a 1.5 l’output potrà essere indipendentemente un 1x così come un 2x a seconda del display di riferimento.

Infine, relativamente alle media query, sarà necessario ricordare che il loro ordine d’inserimento è fondamentale, questo perché la prima avrà priorità su tutte le altre e, potenzialmente, sarà quella applicata più spesso.

Detto questo si potrà analizzare un semplice esempio di utilizzo dell’elemento picture:

<picture>
	<source
		media="(min-width: 1024px)"
		srcset="img-totale.webp"
		type="image/webp">
	<source
		media="(min-width: 1024px)"
		srcset="img-totale.jpg">
	<source
		srcset="img-primopiano.webp"
		type="image/webp">
	<img
		src="img-primopiano.jpg" alt="Blah! Blah! Blah!">
</picture>

In pratica, per le finestre browser con larghezza pari a 1024 pixel CSS (o più ampia) verrà fornita una versione contenente il totale dell’immagine; per le larghezze inferiori sarà invece disponibile un primo piano. Per la stessa immagine sarà proposto il file in formato WebP per i browser che lo supportano, diversamente sarà visualizzabile il JPG.

Via picture element W3C

Post correlati
I più letti del mese
Tematiche