Nello sviluppare il layout di una pagina web spesso siamo obbligati a riempire con un’immagine uno spazio predefinito. è necessario quindi riadattare le dimensioni dell’immagine per far si che questa possa rientrare perfettamente nel box padre.
Esistono 2 ridimensionamenti possibili:
- contain: L’immagine viene riadattata (mantenendo le proporzioni) per occupare tutto lo spazio dato dal contenitore, ma garantendo che l’immagine sia completamente visibile. Questa soluzione può generare però degli spazi vuoti nel contenitore
- cover: L’immagine viene riadattata (manenendo le proporzioni) per occupare tutto lo spazio del contenitore, senza lasciare alcuno spazio vuoto in esso. Questa soluzione però può portare al ritaglio di parte dei bordi dell’immagine (detto “crop” o ritaglio).
In CSS esistono 2 modi per poter ottenere questi risultati. Vediamoli insieme
Background-size
La prima soluzione si ha attraverso il caricamento dell’immagine direttamente da CSS (con background-image). Con l’avvento del CSS3 infatti, è stata aggiunta una nuova proprietà che permette di gestire il ridimensionamento delle immagini di sfondo: il background-size.
Questa proprietà, oltre ad accettare parametri assoluti in pixel (così da definire con precisione la dimensione dell’immagine di sfondo), accetta anche i parametri cover e contain che si comportano esattamente come descritto in precedenza.
Questa è di sicuro la soluzione più usata e più compatibile. Ma ha un piccolo svantaggio: ci obbliga a caricare le immagini come sfondi attraverso il CSS (background-image) e questo in ottica SEO non è la miglior soluzione.
Si sa infatti che Google preferisce indicizzare contenuti HTML (quindi <img>) piuttosto che leggere direttamente il CSS. Inoltre i tag <img> offrono l’inserimenti di attributi come “alt”, molto usati a livello SEO.
Object-fit
Ed eccoci alla soluzione che preferisco in assoluto. Questa proprietà CSS è stata introdotta proprio per gestire il ridimensionamento delle immagini caricate in HTML (quindi attraverso il tag <img>).
Prima di tutto dobbiamo applicare all'<img>, tramite CSS, un “width:100%;” ed “height:100%;”. Così facendo diciamo all’immagine di occupare tutto lo spazio del contenitore padre. Se non lo facciamo, l’immagine userà le sue dimensioni originali.
Una volta fatto questo, aggiungiamo la proprietà CSS “object-fit”: essa si comporta come il background-size vista in precedenza e accetta i soliti 2 parametri: cover e contain. Anche in questo caso il comportamento è quello descritto ad inizio articolo.
Qui sotto un esempio di codice per spiegare meglio il suo funzionamento (notate che l’immagine di partenza è 600×400 px quindi con un rapporto diverso dal 1:1 del contenitore):
N.B.: Di base il posizionamento dell’immagine avviene al centro dell’elemento padre, ma attraverso la proprietà CSS object-position possiamo modificare questo comportamento. Essa infatti accetta 2 parametri in percentuale, rispettivamente l’asse orizzontale (X) e verticale (Y). Inizialmente questa proprietà è impostata a “50% 50%” e quindi con l’immagine posizionata al centro del box padre, ma possiamo modificarla mettendo ad esempio “100% 0” e quindi agganciando l’immagine all’angolo in alto a destra del elemento padre.
Personalmente trovo questa soluzione più performante rispetto a background-size. L’unico aspetto negativo che possiamo avere è dato dalla compatibilità: A differenza di background-size, questa proprietà è stata introdotta successivamente e non ha compatibilità con Internet Explorer.
In questo caso esistono però dei workaround. Se volete approfondire l’argomento vi lascio il link a un articolo dove ho trattato questo aspetto nello specifico.
Attenzione alle dimensioni
Occhio in ogni caso alle dimensioni delle immagini: è vero che queste proprietà ridimensionano in automatico le immagini che carichiamo, ma queste vengono comunque scaricate dal server nella loro dimensione reale.
Questo influisce principalmente sulla pesantezza del sito e di conseguenza sul posizionamento lato SEO. Quindi assicuratevi di preparare e ottimizzare al meglio le immagini che andrete a caricare sulle vostre pagine web. Se volete approfondire questo aspetto, vi lascio ad un precedente articolo che tratta proprio questo argomento.
Ancora nessun commento