Guida per principianti alle immagini reattive: come ottenerle nel modo giusto

Questo tutorial sulle immagini reattive analizzerà le tecniche CSS, le funzionalità HTML e alcuni strumenti che vorrai prendere in considerazione. Tutto questo dovrebbe darti una buona panoramica su come iniziare oggi con le immagini reattive nei tuoi progetti.

Sommario:

• Immagini reattive con CSS semplice
• Immagini reattive con gli attributi srcset e sizes
• Utilizzo di srcset con un descrittore di densità di pixel
• Usando l'elemento <picture>
• Strumenti e servizi per aiutare con le immagini reattive

Immagini reattive con CSS semplice

Il modo più semplice per rendere reattiva qualsiasi immagine su una pagina Web non richiede media query o HTML aggiuntivo. Puoi far crescere e ridurre qualsiasi immagine a seconda delle dimensioni della finestra con un paio di righe di HTML e CSS.

Innanzitutto, il mio HTML includerà gli attributi di width e height :

È consigliabile includere i valori di width e height nell'HTML. Ciò garantisce che il browser riservi lo spazio necessario per l'immagine e non ci sia un successivo spostamento della pagina durante il caricamento dell'immagine.

Insieme a questo, userò il seguente CSS:

 img { max-width : 100% ; height : auto; }
 Linguaggio del codice: CSS ( css )

Questi valori sovrascriveranno il mio HTML. La proprietà max-width è impostata su 100% per garantire che riempia tutto lo spazio necessario, fino a un massimo di 1000px (il valore dell'HTML). Il valore di height di auto assicura che l'altezza dell'immagine mantenga le dimensioni dell'immagine proporzionali alla sua larghezza e altezza naturali. Se rimuovo l' height: auto , l'immagine rimarrà all'altezza definita nell'HTML, indipendentemente dalla larghezza, che di solito non è quella che voglio.

Puoi provare questo semplice esempio usando il seguente CodePen. È meglio aprire la demo in una nuova finestra se vuoi testare la reattività.

E nota che nel mio esempio, le dimensioni naturali dell'immagine sono 2000px x 1333px ma ho scelto di visualizzarla a un massimo di 1000px.

In teoria, potrei fare quanto sopra per ogni immagine sulla mia pagina, e questo sarebbe un modo rudimentale e accettabile per incorporare immagini reattive nei miei progetti. Ma idealmente, vorrei portare questo al livello successivo e ottenere il controllo sulla risoluzione dell'immagine e altri fattori, per migliorare le prestazioni e aiutare con la SEO, di cui parlerò nelle sezioni seguenti.

Immagini reattive con gli attributi srcset e sizes

Nel semplice esempio CSS sopra, sto caricando un'immagine di circa 1,44 MB, anche dopo aver utilizzato la compressione senza perdita di dati per ridurre le dimensioni. Non è terribile da solo se visualizzato su un desktop, ma non è certamente la dimensione che voglio caricato su un piccolo dispositivo, come uno smartphone. È qui che gli attributi srcset e sizes tornano utili.

L'attributo srcset consente di specificare più dimensioni dell'immagine in un unico valore. Queste saranno le immagini a cui il browser o il dispositivo avrà accesso in determinate circostanze. L'attributo sizes funziona insieme a srcset per indicare al browser quale delle immagini scegliere.

Ecco un esempio che utilizza più versioni dell'immagine leopard.png dell'esempio precedente:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Linguaggio codice: HTML, XML ( xml )

Se non hai mai visto prima gli attributi srcset e sizes , a prima vista potrebbe sembrare fonte di confusione. Analizzerò tutto in modo che sia relativamente facile da capire.

Scomposizione dell'attributo srcset

L'attributo srcset accetta un elenco separato da virgole di una o più stringhe. Ogni stringa contiene:

• Un URL che punta a un'immagine
• Uno dei seguenti descrittori facoltativi (separati da uno spazio):
  • Un descrittore di larghezza
  • Un descrittore di densità di pixel

Nel mio esempio, ho incluso un descrittore di larghezza, che è quello che vedrai più spesso. Ho incluso tre diverse versioni dell'immagine: la versione grande ad alta risoluzione, insieme a una larga 800 px e un'altra larga 480 px.

Si noti che quando ho usato il descrittore di larghezza nell'esempio sopra, la sintassi è il valore di larghezza seguito immediatamente da una "w" (non utilizzare un valore di unità "px"!). Per ciascuno dei descrittori di larghezza che rappresentano le immagini, sto usando la larghezza intrinseca dell'immagine in pixel. Puoi ottenere la dimensione reale di qualsiasi immagine in molti modi diversi, facendo riferimento alle sue proprietà nel tuo file system, in un editor di foto o persino nel tuo browser o negli strumenti di sviluppo del browser.

Scomposizione dell'attributo delle sizes

L'attributo sizes funziona solo insieme all'attributo srcset . Puoi usare srcset da solo (vedi la sezione successiva), ma il modo più comune per usare srcset è insieme a sizes .

L'attributo sizes accetta un elenco separato da virgole di una o più stringhe. Ogni stringa contiene:

• Una condizione multimediale (simile alle media query utilizzate nei CSS)
• Un valore che definisce la dimensione dello "slot" che l'immagine occuperà

Il valore dello slot può essere una lunghezza assoluta come em o px o un'unità relativa del viewport (es. vw ). Si noti che nel mio esempio i valori degli slot nell'attributo sizes non corrispondono esattamente ai tre descrittori di larghezza. Ecco di nuovo il codice:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Linguaggio codice: HTML, XML ( xml )

Il fatto che i valori degli slot non corrispondano esattamente ai descrittori di larghezza va bene. Nel mio caso, posso scomporre il valore delle sizes come:

• Una finestra ampia 600px caricherà l'immagine 480w dal valore srcset all'interno di uno slot largo 480px.
• Un viewport largo 1000px caricherà l'immagine da 800w in uno slot da 800px.
• L'immagine a dimensione intera predefinita (2000w) riempirà uno slot di 1000px se le precedenti condizioni del supporto non sono soddisfatte.

L'ultima stringa è un valore di slot da solo, senza alcuna condizione del supporto. Come accennato, ciò garantisce che il browser abbia qualcosa da visualizzare se nessuna delle condizioni multimediali è soddisfatta, funzionando come impostazione predefinita.

È possibile visualizzare il codice di esempio in azione utilizzando la demo CodePen di seguito. Nota che in questo caso dovrai testare qualcosa che imiti dispositivi diversi (come DevTools in Chrome). Puoi anche aprire la pagina utilizzando una varietà di dispositivi reali per fare un vero test. Per comodità, ho incluso una sovrapposizione di testo su ciascuna delle immagini in modo da poter vedere quali carichi quando si visualizza la pagina.

Si noti che dopo il caricamento dell'immagine originale, l'immagine non cambia dimensione quando si modifica la dimensione della finestra. Gli attributi srcset e sizes sono utili per caricare le immagini in base alle condizioni del supporto al primo caricamento, ma non aiutano a cambiare le immagini in base al ridimensionamento dello schermo. Successivamente ti mostrerò una diversa funzionalità di immagini reattive che risolverà il problema.

Utilizzo di srcset con un descrittore di densità di pixel

In precedenza, ho menzionato che l'attributo srcset può essere utilizzato con un descrittore di densità di pixel. Questo descrittore consente al browser di decidere quale immagine utilizzare in base alle capacità di risoluzione del dispositivo. Ecco come appare:

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 Linguaggio codice: HTML, XML ( xml )

Nota un paio di cose qui. In primo luogo, per l'attributo src regolare, sto usando l'immagine più piccola, garantendo un approccio mobile-first. Successivamente, l'attributo srcset include alcune altre versioni dell'immagine, con la risoluzione indicata dai descrittori 1,5x e 2x. L'immagine 480 non include un descrittore perché 1x è implicito. Infine, nota che non è presente alcun attributo di sizes , di cui non ho bisogno in questo caso. MDN spiega come il browser sceglie l'immagine:

Per capire come funzionano i descrittori, ricorda che un pixel del dispositivo rappresenta ogni pixel CSS. Quindi 1x sarebbe un rapporto 1:1, 1,5x sarebbe un rapporto 1,5:1 e così via. Puoi provarlo nel CodePen di seguito, ma dovrai utilizzare dispositivi diversi (o utilizzare uno strumento che li imiti) per vedere la differenza.

Usando l'elemento <picture>

Finora, le funzionalità che ho discusso per l'incorporazione di immagini reattive presuppongono che visualizzi sempre la stessa immagine ma con dimensioni e risoluzioni diverse. E anche se sto usando CSS in tutti gli esempi per cambiare la larghezza delle immagini quando l'utente ridimensiona il browser, l'immagine stessa non cambia mai una volta caricata la pagina.

L'elemento <picture> è una funzionalità HTML che consente di offrire versioni alternative di un'immagine in base alla presenza di specifiche funzionalità multimediali. Ciò consente anche di cambiare le immagini quando l'utente ridimensiona il viewport e essenzialmente ti consente di eseguire la direzione artistica con le tue immagini, mostrando varietà della stessa scena ma ritagliate o ingrandite in modo diverso a seconda delle dimensioni del dispositivo.

Ad esempio, un'inquadratura ampia con un piccolo oggetto al centro sarebbe appropriata per un dispositivo più grande su un desktop o un tablet, ma un dispositivo più piccolo come uno smartphone potrebbe caricare la stessa immagine ritagliata o ingrandita.

Ecco alcuni esempi di codice che mi permetteranno di fare una direzione artistica sulla mia immagine:

Notare quanto segue sul codice:

• L'elemento <picture> accetta più elementi <picture> annidati come figli
• Ciascuno degli elementi <source> all'interno di <picture> utilizza l'attributo media per definire la condizione del media che attiva l'uso di quell'immagine di origine
• L'elemento <picture> accetta il normale <img> elemento come figlio, che il browser riconosce come fallback se non supporta <picture>
• Non ci sono attributi direttamente sull'elemento <picture> ( <picture> accetta solo gli attributi globali di HTML e non ha attributi propri)

Il CodePen di seguito lo dimostra:

Se apri la demo in una nuova finestra, puoi ridimensionare la finestra per vedere la modifica dell'immagine. Nota come il soggetto dell'immagine diventa più ingrandito man mano che la finestra del browser diventa più piccola. Questo è un modo semplice per creare immagini art-direct reattive che sembrano appropriate su qualsiasi dispositivo venga utilizzato. Ovviamente, questo richiede un po' più di lavoro, ma vale la pena se vuoi che le tue immagini siano significative su qualsiasi dispositivo utilizzato.

Strumenti e servizi per aiutare con le immagini reattive

Sono disponibili innumerevoli strumenti, sia gratuiti che commerciali, che aiuteranno a implementare immagini reattive. E alcuni di questi ti aiuteranno a evitare anche di dover scrivere gran parte del codice che ho discusso. Eccone alcuni che potresti trovare utili:

È importante sottolineare che una serie di servizi diversi possono creare automaticamente immagini reattive, offrendo funzionalità come diverse dimensioni delle immagini, un'API per la generazione di immagini al volo e altro ancora.

Anche lo stesso WordPress viene fornito con il supporto integrato per le immagini reattive (a partire dalla versione 4.4).

Un altro strumento/servizio che vale la pena esaminare è Optimole. È uno strumento avanzato di ottimizzazione e consegna delle immagini creato dal team dietro Themeisle. Questo non solo ridurrà la dimensione del disco delle tue immagini senza che la qualità visiva ne risenta, ma si occuperà anche di fornire le immagini ai visitatori del tuo sito Web tramite un CDN di immagini. Uno degli aspetti di questa funzione di consegna delle immagini è che le tue immagini saranno anche ottimizzate per la visualizzazione su dispositivi diversi.

È disponibile una versione gratuita di Optimole. Consente fino a 5.000 visite al sito Web mensili e ti fornirà tutte le funzionalità di ridimensionamento automatico, CDN e altro ancora.

Qual è la tua esperienza con le immagini responsive sui siti web? Fateci sapere nei commenti qui sotto.

Layout e presentazione di Chris Fitzgerald e Karol K.