6.1 Uso dell'attributo srcset e sizes
Gli schermi ad alta densità di pixel, come i display Retina di Apple, sono diventati lo standard per molti dispositivi moderni. Questi display hanno una quantità molto maggiore di pixel per pollice (PPI), il che fornisce un'immagine più nitida e dettagliata. Per i web developer, è importante ottimizzare la grafica per tali schermi, in modo che l'esperienza dell'utente sia al massimo livello. Vediamo come farlo.
Problemi associati agli schermi ad alta densità
Sui display ad alta densità, le immagini standard possono apparire sfocate o pixelate, poiché un pixel dell'immagine viene esteso su più pixel dello schermo. Per risolvere questo problema, è necessario utilizzare immagini a risoluzione più alta, che possono poi essere scalate dal browser per essere visualizzate su schermi ad alta densità.
Gli attributi srcset e sizes permettono di specificare diverse versioni delle immagini per diverse densità di pixel. Questo aiuta il browser a scegliere l'immagine più adatta per il dispositivo specifico.
Esempio di utilizzo di srcset e sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ottimizzazione per display Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Esempio di immagine per display Retina">
</body>
</html>
Spiegazione del codice:
srcset: specifica tre versioni dell'immagine per diverse densità di pixel (1x,2x,3x)-
sizes: definisce la larghezza dell'immagine per diverse condizioni di visualizzazione:- Fino a
600px— l'immagine occupa il100%della larghezza del viewport - Fino a
1200px— l'immagine occupa il50%della larghezza del viewport - In tutti gli altri casi — l'immagine occupa il
33%della larghezza del viewport
- Fino a
6.2 Uso della grafica vettoriale (SVG)
La grafica vettoriale (SVG) è un'ottima soluzione per gli schermi ad alta densità, poiché i file SVG vengono scalati senza perdita di qualità. Sono ideali per loghi, icone e altri elementi di interfaccia.
Esempio di utilizzo di SVG:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso di SVG per display Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Spiegazione del codice:
src="images/logo.svg": specifica il percorso del file SVG, che si scalerà a qualsiasi dimensione senza perdita di qualità
6.3 Uso dei CSS
Per le immagini di sfondo puoi usare media query e proprietà CSS, per caricare versioni diverse delle immagini in base alla densità di pixel del dispositivo.
Esempio di utilizzo di CSS per immagini di sfondo:
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
Spiegazione del codice:
.background: definisce l'immagine di sfondo base@media only screen and (min-resolution: 2dppx): sostituisce l'immagine di sfondo con la versione per schermi a densità2x@media only screen and (min-resolution: 3dppx): sostituisce l'immagine di sfondo con la versione per schermi a densità3x
6.4 Elemento picture
Il tag <picture> permette di specificare più sorgenti di immagini con diverse condizioni di visualizzazione. È utile per i casi più complessi di adattamento delle immagini.
Esempio di utilizzo di <picture>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso di <picture> per display Retina</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Esempio di immagine per display Retina">
</picture>
</body>
</html>
Spiegazione del codice:
<source>: specifica diverse sorgenti dell'immagine con condizioni di visualizzazione<img>: imposta l'immagine di default per i dispositivi che non supportano<picture>
6.5 Esempi di ottimizzazione delle immagini
Esempio 1: Immagine adattiva ad alta risoluzione
Creiamo un esempio in cui l'immagine è ottimizzata per schermi ad alta densità utilizzando gli attributi srcset e sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Immagine adattiva per display Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Esempio di immagine per display Retina">
</body>
</html>
Spiegazione del codice:
srcset: definisce tre versioni dell'immagine per diverse densità di pixel (1x,2x,3x)-
sizes: definisce la larghezza dell'immagine per diverse condizioni di visualizzazione:- Fino a
600px— l'immagine occupa il100%della larghezza del viewport - Fino a
1200px— l'immagine occupa il50%della larghezza del viewport - In tutti gli altri casi — l'immagine occupa il
33%della larghezza del viewport
- Fino a
Esempio 2: Uso di SVG per immagini scalabili
Creiamo un esempio in cui viene utilizzato SVG per garantire una visualizzazione di qualità su qualsiasi dispositivo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso di SVG per display Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
Spiegazione del codice:
src="images/logo.svg": specifica il percorso del file SVG, che si scalerà a qualsiasi dimensione senza perdita di qualità
GO TO FULL VERSION