Immagini responsive
Ovvero un metodo alternativo ai CSS per ottimizzare la visualizzazione delle immagini su diversi dispositivi ... con minore lavoro e minore margine di errore

Html e css
Autore:

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:





I più visti

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori

Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Come realizzare uno schema colori professionale per un sito web.

Ovvero adatto al prodotto/servizio di cui si occupa la tua interfaccia, accessibile a tutti e in grado di condizionare le conversioni e le scelte dei tuoi utenti

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS

Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Centrare un DIV dentro un altro DIV

5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap

Come creare un e-commerce di successo

Gli italiani acquistano on-line?