Oggi parleremo di come ottimizzare le immagini in un sito web, così da visualizzarle al meglio su dispositivi con monitor di dimensioni e risoluzioni anche molto diverse tra loro (per esempio il monitor di un PC e il monitor di uno smartphone) con uno strumento alternativo ai CSS. Stiamo parlando delle “immagini reattive” (responsive images), uno strumento molto efficace che ci permette di inserire immagini diverse all’interno di uno stesso campo intervenendo esclusivamente sul codice HTML. Perché usare le immagini reattive? Baipassare un foglio di stile CSS, soprattutto quando abbiamo a che fare con molte immagini, ci fornisce il vantaggio evidente di gestire le immagini direttamente dentro un unico file, un semplice HTML … che tradotto in “soldoni” significa minore impazzimento, minore lavoro, minore margine di errore, ecc. Facciamo un esempio: Se per inserire due differenti immagini di testata (header image), una ottimizzata per essere visualizzata su PC e l’altra su smartphone con i CSS avremmo dovuto scrivere per ciascuna immagine Sulla pagina HTML
<div class="img1"></div>
E sul foglio di stile CSS
.img1 {
width: 100%;
height: auto;
background: url(examples/images/image1-big.png) center center;
background-size: 100% 100%;
background-repeat: no-repeat;
}
@media (max-width: 414px) {
.img1 {
background: url(examples/images/image1-small.png) center center;
}
}
Ora sarà sufficiente scrivere un unico codice HTML in questo modo
<picture>
<source srcset "examples/images/image1-big.png" style="width:100%;" media="(min-width: 768px)">
<img srcset="examples/images/image1-small.png" style="width:100%;" alt="">
</picture>
Ed ecco il risultato: 
