Incorporare le immagini in HTML e CSS - Base64 Image

Nella fase di ottimizzazione di un sito una delle operazioni possibili da apportare al fine di velocizzarne il caricamento consiste nel ridurre il numero di risorse collegate, tra di esse risultano ad esempio le immagini. Quante di esse colleghiamo generalmente in ogni pagina? Sicuramente molte.

Per ottimizzare le immagini esistono moltissimi tool, TinyPNG o TinyJPG ad esempio, permettono di ridurne il peso e per riuscirci è sufficiente accedere ai relativi siti, selezionare le immagini desiderate e lasciare che i tool facciano il resto.

Far ciò però richiederà comunque che ogni singola immagine venga richiamata singolarmente con un conseguente aumento nei tempi di caricamento del sito, per migliorare questo aspetto è quindi possibile incorporare le immagini all'interno di HTML e CSS avvalendosi della possibilità di codificarle con un sistema denominato "Base64". Con questo sistema, l'immagine sarà inseribile, con un apposita stringa, direttamente all'interno della pagina, non venendo così richiamata esternamente, riducendo quindi il numero di risorse chiamate ed i relativi tempi di caricamento. Si osservi il seguente esempio:

[CODE][/CODE]

Questo qui proposto è un classico esempio di come richiamare un'immagine mediante il linguaggio HTML, tramite il tag "img" si va quindi a collegare una risorsa esterna.

Con la tecnica dell'incorporamento invece, il risultato ottenuto potrebbe essere il seguente:

[CODE][/CODE]

L'immagine viene quindi inserita direttamente all'interno del tag mediante un particolare codice (per praticità ridotto nell'esempio indicato), il quale sarà poi decodificato dal browser il quale quindi mostrerà la relativa immagine, questa volta però senza che essa venga richiamata esternamente.

Per convertire un'immagine in base64 esistono molteplici metodi, uno tra i più semplici consiste nell'affidarsi al sito Base64 Image Encoder, mediante questo tool online gratuito, sarà possibile selezionare le immagini desiderate, quindi attendere la conversione, verrà poi restituito un apposito codice HTML e/o CSS da copiare ed incollare all'interno della propria pagina.