Immagini differenti dipendenti dalla larghezza dello schermo

Un tutorial per fornire al browser immagini responsive, cioè diverse secondo la dimensione della finestra o dello schermo mediante l'attributo srcset

Ormai siamo tutti d'accordo: un sito web moderno deve essere responsive, cioè capace di adattarsi allo schermo del dispositivo sul quale viene visualizzato. Il pelo nell'uovo.

Siamo ormai abituati a template che, quando la finestra del browser è troppo piccola per contenere l'immagine originale, riducono automaticamente le dimensioni dell'immagine stessa anziché tagliarla. In questo modo, l'immagine viene sempre visualizzata nella sua interezza.

In realtà, questo comportamento è responsive solo parzialmente, perché l'immagine è sempre la stessa e non viene fornita all'utente una versione dell'immagine specifica per il dispositivo usato. O, in altre parole, è l'immagine a non essere responsive.

Immagini responsive

Un'immagine è responsive quando può essere fornita sulla pagina web nella sua versione migliore, secondo il dispositivo su cui viene visualizzata.

L'espressione nella sua versione migliore può voler dire diverse cose, secondo l'intento e la priorità del webmaster:

• se lo scopo è permettere al visitatore di vedere l'elemento qualificante dell'immagine anche quando lo schermo del dispositivo è molto piccolo (come un cellulare), allora occorre fornire immagini via via tagliate rispetto all'immagine originale, in modo che l'elemento qualificante rimanga visibile alla grandezza originale e non venga ridimensionato
• se lo scopo è visualizzare la stessa immagine allo stesso modo su dispositivi con un diverso device-pixel ratio, allora devi fornire immagini di risoluzione (non di dimensione) differente secondo i differenti rapporti di pixel del dispositivo; in questo modo, sui dispositivi più prestanti viene visualizzata l'immagine più nitida e definita; per maggiori informazioni su che cos'è il device-pixel ratio, ti invito a leggere What exactly is device pixel ratio?
• se lo scopo è visualizzare la stessa immagine con il miglior tipo di compressione supportato dal browser, allora devi fornire i tipi di immagine e istruire il browser a usare un tipo o l'altro secondo quelli supportati.

In questo tutorial mi occupo solo del primo caso e ti descrivo perciò come visualizzare versioni sempre più specifiche di un'immagine a mano a mano che la dimensione dello schermo o della finestra diminuisce.

Per spiegare meglio ciò che intendo, considera la composizione sottostante.

Nella composizione, le dimensioni riportate si riferiscono alle immagini reali e non a quelle visualizzate qui, perché la composizione è ridimensionata secondo il blocco che la contiene. Tuttavia puoi notare come la porzione di immagine visualizzata mantiene le stesse dimensione della corrispondente porzione dell'immagine più grande. Nella foto più piccola (480x270), è visibile solo la chiesa e gli edifici attorno ad essa: in questo caso era proprio la chiesa l'elemento qualificante della foto, poiché intendevo trattare di architettura sacra. Avessi trattato di paesaggi, probabilmente avrei preservato la visione d'insieme, con le montagne e il lago, a scapito dei particolari.

Se stai leggendo questo articolo da un computer desktop o da un portatile, ti invito a cliccare sul pulsante sottostante e a verificare, nella finestra modale che viene aperta, quale versione dell'immagine viene visualizzata. E perché gli smartphone no?

Test di immagine responsive
Guarda il panorama di Hallstatt a dimensioni diverse

Cliccando sul pulsante Test di immagine responsive si apre una finestra modale in cui compare la versione dell'immagine di Hallstatt adeguata alla dimensione del tuo schermo.

Funziona così:

• se la larghezza dello schermo o della finestra è maggiore di 1.200 pixel, viene visualizzata l'immagine 1920x1080; se la larghezza è inferiore a 1.920 pixel, l'immagine viene scalata in proporzione
• se la larghezza dello schermo o della finestra è compresa tra 1.200 e 1.025 pixel, viene visualizzata l'immagine 1200x675; se la larghezza è inferiore a 1.200 pixel, l'immagine viene scalata in proporzione
• se la larghezza dello schermo o della finestra è compresa tra 1.024 e 801 pixel, viene visualizzata l'immagine 1024x576; se la larghezza è inferiore a 1.024 pixel, l'immagine viene scalata in proporzione
• se la larghezza dello schermo o della finestra è compresa tra 800 e 641 pixel, viene visualizzata l'immagine 800x450; se la larghezza è inferiore a 800 pixel, l'immagine viene scalata in proporzione
• se la larghezza dello schermo o della finestra è compresa tra 640 e 481 pixel, viene visualizzata l'immagine 640x360; se la larghezza è inferiore a 640 pixel, l'immagine viene scalata in proporzione
• se la larghezza dello schermo o della finestra è uguale o inferiore 480 pixel, viene visualizzata l'immagine 480x270; se la larghezza è inferiore a 480 pixel, l'immagine viene scalata in proporzione.

Il fatto che io abbia definito sei immagini è stata una scelta mia: in effetti, puoi definire tutte le soglie che vuoi. Tuttavia le soglie che ho scelto io sono quelle usate più spesso e perciò indicate come buona prassi. In realtà, le dimensioni più piccole sono ormai superate dal progresso tecnologico: neanche il cellulare più mentecatto ha lo schermo così piccolo, perciò sentiti libero di spostare verso l'alto le soglie.

Mentre la finestra modale che mostra l'immagine di Hallstatt è aperta, puoi ridimensionare la finestra del browser per verificare come viene fornita una versione diversa dell'immagine al superamento di ogni soglia. Se il tuo monitor te lo consente, ti consiglio anche di ingrandire la finestra oltre i 1.920 pixel di larghezza.

Una trappola: le dimensioni dello schermo

Se stai usando un computer con uno schermo più largo di 1.200 pixel ti puoi rendere conto di una piccola trappola. Considera l'immagine sottostante.

Poiché uso un template che per il blocco del content prevede una larghezza massima di 1.200 pixel, potresti aspettarti che la versione visualizzata sia 1200x675; invece è 1920x1080. Perché?

Il motivo è semplice: la versione dell'immagine che viene visualizzata dipende dalla larghezza complessiva della finestra del browser, non dell'elemento che la contiene. Più tecnicamente, dipende dal viewport, ma non intendo qui addentrarmi in sulla natura del viewport; se vuoi approfondire, ti consiglio di leggere Responsive Web Design - The Viewport.

Se riduci la finestra del browser in modo che la larghezza sia 1.200 pixel (o meno), ecco che viene fornita la versione 1200x675 dell'immagine.

Come fornire un'immagine responsive

Vi sono più sistemi per fornire versioni diverse di un'immagine secondo la situazione. In questo tutorial ti descrivo l'uso di srcset.

Tecnicamente parlando, srcset è un attributo dell'elemento <img>, esattamente come title, alt e altri ancora.

Usa la stessa sintassi della maggior parte degli attributi: srcset="valore". Nel caso di srcset i valori sono multipli, poiché ne occorre uno per ogni versione dell'immagine. Ogni valore è inoltre suddiviso in due parti:

• il nome della versione dell'immagine (con il percorso relativo)
• la larghezza in pixel che fa da soglia perché sia usata la corrispondente versione dell'immagine.

In pratica devi:

• preparare tutte le versioni dell'immagine che vuoi rendere disponibili
• indicare mediante l'attributo srcset quando ogni immagine deve essere usata.

Ogni volta che inserisci un'immagine responsive nella pagina web (sia che lo faccia manualmente sia che usi un editor wysiwyg), devi associare ad essa l'attributo srcset. Per ora, do per scontato che tu lo faccia a mano: in un prossimo articolo descrivo come farlo con l'editor JCE.

Esamina questo esempio che riguarda la foto di Hallstatt.

<img title="Ciò è quanto la dimensione della finesta consente di far vedere di Hallstatt" src="/images/0037_Hallstatt.jpg" srcset="/images/0037_Hallstatt.jpg 1920w, /images/0037_Hallstatt_1200x675.jpg 1200w, /images/0037_Hallstatt_1024x576.jpg 1024w, /images/0037_Hallstatt_800x450.jpg 800w, /images/0037_Hallstatt_640x360.jpg 640w, /images/0037_Hallstatt_480x270.jpg 480w" alt="Panorama di Hallstatt. Un lago circondato da montagne su cui si affaccia un paesino con una chiesa illuminata" width="1920" height="1080" />

Non perdere tempo con i gli attributi title, alt, width e height, che non interessano per imparare a fornire un'immagine responsive.

Nota invece che:

• l'immagine principale è 0037_Hallstatt.jpg; questa è anche l'immagine di riserva, cioè quella usata se il browser non riesce a usare srcset
• l'immagine 0037_Hallstatt.jpg misura 1920x1080 e che essa è usata anche come versione per la soglia di 1.920 pixel di larghezza
• il valore di soglia è espresso nella forma xxxw; xxx è il numero di pixel di larghezza e tale numero è seguito dalla lettera w. Il valore di soglia è separato dal nome della versione dell'immagine mediante uno spazio
• i nomi delle immagini con il relativo valore di soglia sono separati mediante virgole, tranne l'ultimo (che tuttavia deve essere seguito dalla chiusura delle virgolette doppie)
• i percorsi delle immagini possono essere forniti in modo relativo (anzi, dovrebbero essere sempre forniti così, se non si tratta di immagini esterne).

Per fare le prove, ti consiglio di iniziare con due sole versioni dell'immagine, per poi aggiungerne altre quando ti sarai impadronito della sintassi.

Per i joomler

Se usi Joomla per costruire siti web, forse ti interessa sapere come gestire le immagini responsive mediante JCE, probabilmente l'editor professionale più famoso.

Ti consiglio in questo caso di leggere l'articolo Immagini responsive con JCE.

Scarica il PDF

Questo articolo e Immagini responsive con JCE sono stati raccolti in un unico PDF che puoi scaricare gratuitamente.

Se desideri studiare l'argomento, ti consiglio di scaricare il PDF, stamparlo e di seguire la trattazione su carta, mentre verifichi le procedure online.

In questo modo potrai godere di tutti i vantaggi sia del mondo tradizionale sia di quello digitale.

Scarica il PDF
Fornire immagini differenti
secondo la larghezza dello schermo

Webografia

La questione della gestione dei contenuti (sia immagini sia testo) su schermi e dispositivi differenti è il mal di testa dei webmaster di oggi. Qualunque sforzo si faccia, sembra sempre di avere a che fare con una coperta troppo corta.

In ogni caso, ti propongo una webografia che ti aiuterà ad avere una panoramica dei vari aspetti implicati nella faccenda, non solo su srcset.

• Wikipedia, Design responsivo: https://it.wikipedia.org/wiki/Design_responsivo
• Neting, Differenze tra un Sito Web Responsive e un Sito Web Adaptive: https://www.neting.it/blog/differenza-sito-web-responsive-e-adaptive.html
• A List Apart, La crisi di identità del pixel: https://alistapart.com/it/article/la-crisit-di-identita-del-pixel/
• Stack Overflow, What exactly is device pixel ratio?: https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio
• HTML5 Rocks, High DPI Images for Variable Pixel Densities: https://www.html5rocks.com/en/mobile/high-dpi/
• Sitepoint, How to Build Responsive Images with srcset: https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/
• w3schools.com, HTML <source> srcset Attribute: https://www.w3schools.com/tags/att_source_srcset.asp
• w3schools.com, Responsive Web Design - The Viewport: https://www.w3schools.com/css/css_rwd_viewport.asp