5.1 Attributo srcset
Immagini adattive giocano un ruolo importante nella creazione di pagine web reattive e ottimizzate. Ti permettono di caricare immagini di varie dimensioni e risoluzioni a seconda del dispositivo e delle condizioni di visualizzazione, migliorando le prestazioni e l'usabilità. Gli strumenti principali per implementare immagini adattive in HTML sono gli attributi srcset e sizes.
L'attributo srcset viene utilizzato per specificare più sorgenti di immagine con diverse dimensioni o risoluzioni. Il browser sceglie l'immagine più adatta in base al dispositivo dell'utente.
Sintassi:
<img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">
Dove:
src: indica il percorso per l'immagine predefinitasrcset: contiene un elenco di immagini e le loro caratteristiche, separate da virgole-
1x,2x: indicano il fattore di scala (ad esempio,1xper la risoluzione standard e2xper i dispositivi con alta densità di pixel)
Esempio di utilizzo di srcset:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di utilizzo di srcset</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
alt="Esempio di immagine adattiva">
</body>
</html>
Spiegazione del codice:
src="images/default.jpg": indica l'immagine predefinita-
srcset: contiene un elenco di immagini con indicazione della loro larghezza in pixel (480w,800w,1200w). Il browser sceglie l'immagine più adatta in base alla larghezza della finestra di visualizzazione
5.2 Attributo sizes
L'attributo sizes viene utilizzato in combinazione con srcset per specificare la larghezza dell'immagine in diverse condizioni di visualizzazione. Questo permette al browser di scegliere con maggiore precisione l'immagine adatta.
Sintassi:
<img src="default.jpg"
srcset="image1.jpg 480w, image2.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="Example Image">
Dove:
sizes: contiene un elenco di condizioni di visualizzazione e le corrispondenti larghezze delle immagini(max-width: 600px) 480px: se la larghezza della finestra di visualizzazione è minore o uguale a600px, utilizzare un'immagine di larghezza480px800px: in tutti gli altri casi utilizzare un'immagine di larghezza800px
Esempio di utilizzo di sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio di utilizzo di sizes</title>
<style>
.responsive-img {
width: 100%;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="Esempio di immagine adattiva">
</body>
</html>
Spiegazione del codice:
sizes definisce la larghezza delle immagini per diverse condizioni di visualizzazione:
- Se la larghezza della finestra di visualizzazione è minore o uguale a
600px, utilizzare un'immagine di larghezza480px - Se la larghezza della finestra di visualizzazione è minore o uguale a
900px, utilizzare un'immagine di larghezza800px - In tutti gli altri casi utilizzare un'immagine di larghezza
1200px
5.3 Immagini adattive
Immagine adattiva per diverse dimensioni dello schermo
Creiamo un esempio in cui l'immagine si adatta a diverse dimensioni dello schermo utilizzando gli attributi srcset e sizes.
Esempio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Immagine adattiva</title>
<style>
.responsive-img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="Esempio di immagine adattiva">
</body>
</html>
Spiegazione del codice:
src="images/default.jpg": indica l'immagine predefinitasrcset: definisce tre versioni dell'immagine con diverse larghezze (480w,800w,1200w)-
sizes: definisce la larghezza dell'immagine per diverse condizioni:- fino a
600px— utilizzare un'immagine di larghezza480px - fino a
900px— utilizzare un'immagine di larghezza800px - oltre
900px— utilizzare un'immagine di larghezza1200px
- fino a
-
.responsive-img: classe CSS che dà all'immagine una larghezza di100%e altezza automatica, in modo che occupi lo spazio disponibile mantenendo le proporzioni
GO TO FULL VERSION