Suggerimento rapido come utilizzare l'immagine HTML5 per immagini reattive

Le immagini sono notoriamente uno degli aspetti più impegnativi del responsive web design. Oggi vedremo come elemento, una soluzione al problema delle immagini reattive, può essere utilizzato proprio adesso.

Innanzitutto, il problema

I giorni della progettazione di siti Web a larghezza fissa e pixel perfetti stanno dietro di noi. Al giorno d'oggi di monitor widescreen, internet TV, tablet di dimensioni multiple e smart phone, i nostri progetti ora devono soddisfare qualsiasi esigenza, da 320 px di larghezza fino a potenzialmente 7680 pixel di larghezza.

Insieme a questo panorama multi-risoluzione arriva la necessità che le immagini si estendano o si riducano per soddisfare queste esigenze selvaggiamente diverse. Questo può rivelarsi un problema dato che, ad eccezione della grafica vettoriale, la stragrande maggioranza delle immagini ha specifiche larghezze di pixel che non cambiano.

Quindi cosa facciamo?

La soluzione attuale e più comune

Come regola generale, in quasi tutti i CSS del sito reattivo troverai quanto segue:

img larghezza massima: 100%; altezza: auto; 

Questo codice usa il larghezza massima: 100%; impostazione per garantire che le immagini non superino mai la larghezza del contenitore principale. Se il contenitore genitore si restringe al di sotto della larghezza dell'immagine, l'immagine si ridurrà con essa. Il altezza: auto; l'impostazione assicura che le proporzioni delle immagini vengano mantenute in questo modo.

Un'immagine fluida per tutte le circostanze

Risolve il problema da un punto di vista, permettendoci di visualizzare la stessa immagine in molte circostanze diverse. Ma non ci permette di specificare diverso immagini per circostanze diverse.

Una nuova soluzione:

è un nuovo elemento che è impostato per diventare parte di HTML5. 

Porterà il processo per posizionare le immagini reattive alla velocità con il modo in cui la corrente e gli elementi funzionano Ti permetterà di piazzare multipli fonte tag, ognuno specificando nomi di file immagine diversi insieme alle condizioni in base alle quali dovrebbero essere caricati.

Ti permetterà di caricare un'immagine completamente diversa a seconda di:

• Risultati della query multimediale, ad es. altezza, larghezza, orientamento della vista
• Densità di pixel

Questo a sua volta significa che puoi:

• Caricare immagini di dimensioni file appropriate, sfruttando al meglio la larghezza di banda disponibile.
• Carica immagini ritagliate in modo diverso con proporzioni diverse per adattarle alle modifiche del layout a diverse larghezze.
• Carica immagini ad alta risoluzione per schermi con densità di pixel più elevate.

Immagini diverse servite, a seconda delle circostanze

Come fa Lavoro?

I passi fondamentali per lavorare con siamo:

1. Crea apertura e chiusura tag.
2. All'interno di questi tag, crea a elemento per ogni query che si desidera eseguire.
3. Aggiungere un media attributo contenente la tua query su cose come altezza, larghezza, orientamento, ecc.
4. Aggiungere un srcset attributo con il nome file dell'immagine corrispondente da caricare.
5. Aggiungi nomi di file extra al tuo srcset attributo se si desidera fornire densità di pixel diverse, ad es. Display Retina.
6. Aggiungi un fallback elemento.

Ecco un esempio di base che controlla se il viewport è più piccolo di 768px, quindi se carica così un'immagine più piccola:

Noterai che la sintassi usata in media l'attributo è lo stesso a cui potresti essere abituato dalla creazione di query multimediali CSS. Puoi utilizzare gli stessi controlli, il che significa che puoi eseguire una query larghezza massima, min-width, altezza massima, min-height, orientamento e così via.

È possibile utilizzare questi controlli per eseguire operazioni come il caricamento di versioni orizzontali o verticali di un'immagine a seconda dell'orientamento del dispositivo e si possono ancora mescolare le query di dimensioni contemporaneamente. Per esempio:

Il codice sopra riportato carica una versione ritagliata più piccola dell'immagine dell'immagine su un dispositivo più piccolo orientato al paesaggio. Carica una versione più grande della stessa immagine su un dispositivo orientato al paesaggio più grande. 

Se il dispositivo è orientato in verticale, carica una versione ritagliata, in piccole dimensioni su un dispositivo di piccole dimensioni o su un dispositivo di grandi dimensioni.

Se si desidera fornire diverse versioni di risoluzione delle immagini per schermi a densità più elevata, lo si fa aggiungendo nomi di file aggiuntivi al srcset attributo. Per esempio, diamo un'occhiata al nostro primo snippet di codice dall'alto con la gestione della risoluzione 2x Retina aggiunta:

La query multimediale viene ancora valutata per prima in modo da poter controllare le dimensioni dell'immagine visualizzata sullo schermo. Quindi verrà controllata la densità dei pixel del display e se le densità più elevate sono supportate e consentite dalle preferenze dell'utente, verrà caricata la versione più densa dell'immagine.

utilizzando  Oggi

In questo momento l'implementazione nativa per è in lavorazione per Chrome, Firefox e Opera. In futuro è probabile che vedremo un supporto diffuso come altri browser. Ma per il momento quel supporto deve ancora arrivare.

Nel frattempo, non devi aspettare se desideri iniziare a utilizzare proprio adesso. Devi semplicemente usare Picturefill 2.0; un polyfill fornito da quelle persone intelligenti al Filament Group.

Dopo aver scaricato il picturefill.js file per il tuo progetto può essere implementato semplicemente caricandolo nella sezione principale del tuo sito:

C'è anche un'opzione per caricare lo script in modo asincrono per una maggiore efficienza, che puoi leggere nella documentazione di Picturefill.

Con questo script caricato, il l'elemento funzionerà come ho spiegato, con solo alcune limitazioni.

Limitazioni alla Picturefill

IE9

Picturefill funziona perfettamente con altre versioni di IE, tuttavia IE9 non riconosce fonte elementi che sono avvolti in immagine tag. Per aggirare questo, avvolgere condizionatamente i tuoi elementi di origine video tag che li renderanno quindi visibili a IE9, ad esempio:

Android 2.3

Come IE9, Android 2.3 non può vedere fonte elementi all'interno di a immagine elemento. Tuttavia, può capire il srcset attributo se usato su un normale img etichetta. Assicurati di includere sempre il tuo fallback img elemento con il nome file predefinito in srcset attributo per Android 2.3 e altri browser che potrebbero avere lo stesso problema.

Richiede supporto JavaScript e supporto di media nativi

Essendo una soluzione basata su JavaScript, richiede di conseguenza JavaScript nel browser. Picturefill 2.0 non offre una soluzione alternativa "no-js" perché se lo facesse, verranno visualizzate più immagini quando il browser nativo supporta è srotolato. Tuttavia, hai la possibilità di utilizzare Picturefill 1.2 se è necessario disporre di un'opzione "no-js".

L'altro requisito richiesto da Picturefill è il supporto delle query multimediali native, per abilitare le query nel file media attributo a funzionare. Tutti i browser moderni supportano le query multimediali, con IE8 e inferiore essendo l'unico browser non di supporto con una piccola base di utenti rimanente.

Possibili richieste HTTP aggiuntive

Nei browser con supporto nativo srcset, ma non ancora per immagine, è possibile il nome file specificato nel fallback img elemento potrebbe essere richiesto prima di un'immagine più adatta dal fonte elementi è determinato.

Questo è solo un problema temporaneo e andrà via una volta nativo immagine l'implementazione è stata implementata.

Maggiori informazioni

• Leggi di più su Picturefill 2.0 e scaricalo per il tuo progetto sulla pagina di Picturefill
• Ottieni informazioni complete sul  elemento da responsiveimages.org.

Provalo  nel tuo progetto oggi e vedi cosa ne pensi!