Nuovo tag HTML : Picture per siti web Responsive

Il tag Picture non è un “sostituto” del tag Image, ma un “contenitore” che avverte il browser che lì è presente un’immagine.

Una volta individuato il posto dove l’immagine deve essere posizionata, il browser Web può consultare le varie mediaquery contenute nel tags Picture dove la proprietà source identificherà l’immagine da ricercare a seconda delle dimensioni dello schermo del dispositivo.

In pratica, un tag Picture funziona così:

<picture>
<source media=”(min-width: 1024px)” src=”high-res.jpg”>
<source media=”(min-width: 600px)” src=”medium-res.jpg”>
<source src=”small-res.jpg”>
      <img src=”accessible-small-res.jpg” alt=”…”>
<p>Testo accessible</p> </picture>

e definisce un set di immagini della dimensione più adatta al dispositivo. Allo stesso tempo, se il browser non è capace di interpretare il nuovo comando HTML, si ritrova a scaricare un’immagine alternativa, definita dal tradizionale tag IMG. Quest’ultima immagine può essere a bassa risoluzione, se chi sviluppa decide di seguire un approccio mobile first.

Insomma, con il tag Picture anche le immagini diventano Responsive, velocizzando la navigazione Web da mobile e permettendo di risparmiare sulla banda consumata e sui costi di connessione.

Seguici su:

Google+  Facebook   LinkedIn

Potrebbero Interessarti anche:

Per maggiori informazioni, per suggerimenti e ottenere un preventivo gratuito per le tue esigenze, contatta la nostra Web Agency.
Il nostro staff di professionisti sarà lieto di fornire tutte le informazioni ed i costi riguardanti il servizio.
Attenzione : Webx.it non è un servizio di helpdesk “gratuito” a cui chiedere informazioni circa la soluzione dell’errore e/o la procedura per come risolvere. A seguito di un vostro contatto verrà elaborato un preventivo per un intervento/correzione.

WebMaster Firenze

Oppure, se preferisci, CONTATTACI attravero il modulo presente in questa pagina:

Il tuo nome (richiesto)

La tua email (richiesto)

Telefono

Il tuo messaggio

Dichiaro di avere inserito nel modulo di richiesta dati reali e dichiaro pertanto che tali dati corrispondono ai propri reali dati personali. Sono consapevole che è facoltà di WebX perseguire nelle opportune sedi ogni violazione ed abuso.


Acconsento al trattamento dei dati personali, ai sensi dell'art. 13 del D.lgs. n. 196/2003 [Privacy Policy]

Prova che sei umano selezionando l'icona corrispondente a Aeroplano.

Fonti : Immagini Responsive, Picture per siti web Responsive, tag per Immagini Responsive