Convertire le immagini in base64 per velocizzare la pagina.

Come convertire una immagine in un codice di testo con Base64 in modo che non ci sia alcuna richiesta IP da parte del browser per velocizzare il caricamento della pagina web.

Non sto a ripetere la solita tiritera della velocità di caricamento come uno dei parametri che concorrono alla determinazione del posizionamento delle pagine web perché se avete anche solo una minima esperienza di blogging ne avrete certamente già sentito parlare. Le immagini rappresentano uno degli elementi che rallentano maggiormente il download di una pagina quindi bisogna agire per minimizzare questo contributo. È evidente che questo è particolarmente importante per le immagini presenti nel modello visto che devono essere caricate in tutte le pagine del sito. Lo è di meno per una singola foto pubblicata in un post che al massimo rallenta l'apertura solo di quell'articolo. In ogni caso è opportuno che prima di pubblicare una immagine o prima di inserirla nel template magari come sfondo, venga ottimizzata con dei tool di compressione per JPG e PNG.

Per quello che riguarda le immagini presenti nel template è consigliabile fare un ulteriore passo in avanti e creare dei CSS Sprite per unirle in una sola immagine in modo che venga richiesto solo un indirizzo IP. In realtà possiamo ridurre ulteriormente il tempo di caricamento inserendo il codice della immagine direttamente nel modello in modo che il browser la mostri senza bisogno di richiedere alcun indirizzo IP. Si può infatti convertire l'immagine in un testo in Base64 che potrà sostituire in tutto e per tutto l'immagine sia che venga inserita in un CSS come background o con il tag <img>. In realtà nel vostro modello esistono già delle immagini inserite con il codice Base64. Un esempio è la icona dell'autore che si visualizza nei commenti nidificati di Blogger.

Prima di convertire una immagine in un codice è consigliabile di ottimizzarla al massimo con i tool di compressione JPEG Optimizer e TinyPNG. Facciamo l'esempio di queste due icone

Prima dell'ottimizzazione avevano un peso rispettivamente di 2,14KB e 2,21KB. Dopo l'utilizzo di TinyPNG il peso dei file si è ridotto in entrambi i casi a 1,9KB.  Per la loro conversione in codice di testo possiamo usare Web Coder Tools oppure WUtils.com ma ce ne sono anche altri tutti gratuiti. In entrambi i tool si va su Scegli file e si seleziona l'immagine da convertire

Dopo il rapido processo visualizzeremo due codici da inserire come tag immagine o come background in un CSS. In ogni caso l'URL dell'immagine sarà lo stesso secondo questa sintassi (file PNG)

<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA.... resto del codice" />  per il tag immagine
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAA... resto del codice);  per inserire l'immagine in un CSS

Per brevità ho riportato solo l'inizio del codice che ho colorato di rosso. In sostanza quando vedete nel modello una riga di codice del tipo

<img src="URL_IMMAGINE" alt="NOME_IMMAGINE"/> oppure
{ … background-image: url(URL_IMMAGINE); … }

al posto di URL_IMMAGINE incollate il codice ottenuto da uno di questi tool. Per esempio l'icona di Twitter di cui sopra potrà essere inserita con questo codice

<img alt="twitter-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAADAFBMVEU9rLUzmaE8q7Q2naU0m6M9rLYAAAAmcHUAAAAAAAAAAAAAAAAAAAAbUVUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApnaSC0tlyyNB/zdSr4OVlxM5mwMtvvcQZfIJarbMif4VstbwvmqAwlJkVdHuC190SfYMhfoUypKpkwMc4rrURfoYkpq0Tg4ud6/JTvMOD3eKJ4eh20tYkpaxTvcNArLQuoqofkpl719wclp0cmqEwoagwsLiR190mnKOY2N5xxs5hv8d3zNWJ1Nt90ti15+q66+8mho1yzNRnx85eu8NbuMBhvMR3w8p+x81qzdN2wMY9n6V42d9WsrtkyM9ltbwcgYg6l59Pr7UZh40ZiY8QeIBlwcZqyMyb6/JnydCV4ehmw8hjycwin6Ymo6omkpobl54dm6J+2+AZkZgcl56a2+GU191hxc6c2N4lmKBlydMjl55lw8oeiZB12OBUs7t74OZy1t2i3eIejpZnxsxsx85ixs4XgIZlxMtuztNtys9jv8Zw09Zz1Noho6qU5+0YiY9oxMsjo6sfl556299119173uIrrbNrwchfwclixMyJ09kroKe05eqGztR6z9W46u4pn6aBytCN1t153eS/8fRqzdRr0NgejJNlxcug2uBjxc5gw8x4ztUQcXhoyc8snaVnxMlrzNIrqK9y0th63eNy1dxjx9Aioah53eF32uFiw8pozdZcvcZfvcV32+NZtb1dwMgWeX9pzNNpytBhvsVu0dgYjJMYi5F63OIXhYsZlZxixtB52+Ffv8cnqK9319thxM1gwsliwckonqUqoKe97vIhkplkxs5oytJZucJsz9dTsLhry9Bpy9Fw0tlrzdN12d932d194ulcvMN94OZv09tpy9Ju0NUmm6Jlx88WeoAnnaRv0dYYjZQZk5lnytIfnaRjx88ZkJZ83+QXe4Ftz9VqzNOe7vVmydFoy9JlyNAnnKRsztS+KrY0AAAAInRSTlNK9kTz+jBYhU5XQkczgS4cZS1iE14jHgsWDgMnKwERBg0AygKkNwAAA/FJREFUeNpdz3dUE1kUB+DZXXtXbJSQZJvr9t476q4odsTeC4oKigoqXaogVWpCBzcUpZkEhECoIdLBUJKQkLIJCQkJSYiTyQzjDPy1+zvvvHfuO9959z6ATJ7/Vpbz4ORg/mD+0NBQVha25WMZHJx8e958Mhkgv1mZcTc7e2923r59w8PD/2DBzry8vL3Z7+/MAjDwRsauD/zqi8bbJY2PT/yLJ+RxY1D1aFG9ZtfmeRiY2XGw22/TKKoLamSalR1KpdLMbAy6Px5e74fcncGAc+lA9xNa0fh9RmNPR4jSrAw5wYyTScaLWk3doTiYCB2oMSCW9mpZXZy5o0dp7jF3yGTVkjEarzvUGW9ReofNF4xKqlPrapn9ZjOGautSJZJRnqGmdGYOUDbBYHtMqkzenyY3m/uZPbLouHaQZp0DE6V3EAMtSdLOkMtr09K2yH//q7JSp9ChNJe5IWd8KC4GGjfMaeS6vKf215Q/Kv/8m57uFMZtNbB9ZsGOXoRjAeO/7/Oip/SnXLtOT0+n9z2CIIjP85nEv+lrQsItYER8/CP6T+zYc/70Pq/fnjMgMEDA93XGwXaeFbZc1V371jPZM7m42MnruafR+MtN1AJbfSfxFoVUK+wqvvjdD13e3kajMdlo9N7mmdCPthk023EwsdsFga+Cl7q6uqZv3Lh9e+v0rVtd+ssRYinMypxtUYC90FYlvlT29RQW/dQUd2oqCRKLj5ZocmaHfK/GWjKGqmMvfvliOnF6NtwruWpsBvY7E3iLXBNHYEHVMdFcrl7fqU9M1OvLIIYYtQhYe2ZBmQkxqKSgOjYm99MXWDo73aEtVaBUZUBycXDvQORLFjyGlpeXf17eeSHqQmcZtEcnRlUlVuTdezjIaDCxXVVVTU2fBUadjzqflADd1KnbLBwD1bQTB/4RA5E11kOtYwe+SLh8BYJ+/JmhBlFpq4DnMhDjj4GRQ269kYjVozXgGRhdpY5Wq9Wgu7REcNAUqXAdIQOEEV4zpTfShHBUFa5tqDsoRZ+FWx54sE0KNwovjAAQipuETc1PqSxE46qyBBytqGj7ZuwhS8OnUpobmooJADHwnEgobBC6UfmIBwd+CMPwA40L/6lCoRAGBwcSAdL+46Jg0UlFA4X1hHfKw8rjIaf41JfNipMikej4fhJgs/DM2Y9Obz587EhBTubunMLCwpzMzIKCI4ePfXL67JmFNoCNw/KPP2xp0Wq1r7Sv5qLFlrYFu/tquYMNQFq5YunitWtWrVqzdsGiJcvs7ZctWbRgrl68dMVKEkAkbVy/zt5h9WoH+3XrN5KIRNv/1oCdHXEDydbR0cbRlrSBaEf4f/0aa0hpJ/Q4zTIAAAAASUVORK5CYII=" />

Per verificare effettivamente che i browser interpretino questo codice come l'icona incollatelo in un tool online tipo Real Time HTML Editor

Questo ultimo strumento può servire anche per la conversione inversa cioè per passare da un codice di testo a un file immagine. Si può infatti cliccare sul destro del mouse e scegliere Salva con nome per scaricare nel computer l'immagine generata dal codice in Base64. Se invece si va su Copia URL immagine visualizzeremo una stringa a partire da data:image/png;base64. Con Copia Immagine potremo copiare l'immagine e incollarla in un programma di grafica come Paint o anche più sofisticato.