Come convertire immagini in base64 per non doverle caricare online e per velocizzare il sito Blogger o Wordpress.
Per postare una immagine in un post o per mostrare una icona nel layout del sito in linea di massima tale immagine deve essere caricata online e nella pagina web va inserito il suo indirizzo web con un apposito codice. Gli utenti di Blogger fino a poco tempo fa potevano fare l'upload delle loro foto o icone su Picasa per poi ottenerne il link diretto da utilizzare nel modello o nei post. Le immagini che vengono inserite negli articoli con l'Editor di Blogger o con Open Live Writer finiscono adesso su Google Foto da cui è più complesso ricavare il link diretto. Gli utenti di Wordpress self-hosted avendo uno spazio proprio aggiungono le foto in una specifica cartella del loro sito da cui si ottiene l'hotlink. I provider più a buon mercato non offrono una larghezza di banda adeguata alle esigenze quindi bisogna essere piuttosto parchi nell'inserimento di immagini nel Tema e negli articoli.
In realtà si possono inserire foto in un articolo o mostrare icone in un Modello o in un Tema senza caricare materialmente le immagini. Si tratta di convertire i dati binari di una immagine in JPG, PNG o GIF in una stringa in Base64. In sostanza l'immagine diventerà un semplice testo con una ovvia velocizzazione del sito. Questo sistema però ha dei limiti nel senso che mentre per le immagini di icone la stringa in Base64 che si ricava sarà di circa quattro righe per una immagine molto complessa avrà un numero di righe molto più grande e quindi difficilmente utilizzabile.
Base64 è un sistema di numerazione posizionale che usa 64 simboli da cui il nome. L'algoritmo suddivide il file in gruppi da 6 bit con valori da 0 a 63 (26 = 64). Ad ogni valore viene associato un codice ASCII. L'utilizzo della rappresentazione in Base64 è da preferire per piccoli file immagine fino a 3KB. Il risparmio del tempo di risposta per un file da 1KB è di circa il 33%. Per rendere la trattazione di questo argomento più semplice vediamo di fare un esempio di utilizzo.
Prendiamo l'icona di un carrello che può essere usata nei link della Affiliazione Amazon. Tale icona è stata caricata su Google Foto è ha questo indirizzo
Il suo peso è di 0,5KB quindi rientra decisamente nell'intervallo di quelle piccole immagini di cui si può sostituire l'URL con la rappresentazione in Base64. La conversione si fa con un tool online.
WUtils Encoder genera una stringa in Base64 a partire da una immagine. Si va su Scegli file e si seleziona l'icona dal computer oppure si incolla il suo indirizzo in Download image from URL. Si clicca su Convert image to Base64 string. Si otterranno tre opzioni Stringa, HTML e CSS
La Stringa è la vera conversione in Base64 mentre l'HTML e il CSS sono degli esempi di come utilizzare la stringa per la pubblicazione dell'immagine nel web. L'inizio della stringa nei codici HTML e CSS è stata evidenziata di giallo
<img alt="nome-immagine" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABK.... resto della stringa" /> per il tag immagine
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABK... resto della stringa); per inserire l'immagine in un CSS
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAQAAABK... resto della stringa); per inserire l'immagine in un CSS
In definitiva si inserisce la stringa al posto dell'URL con la parte iniziale data:image/png;base64 che indica al browser che si tratta di una immagine convertita in Base64.
Se si converte una immagine in JPG invece che in PNG la parte iniziale in rosso sarà data data:image/jpeg;base64.
Anche Blogger utilizza Base64 per la parte nativa del codice come per esempio le icone per la condivisione sui social network presenti opzionalmente nella parte bassa degli articoli. Si può effettuare la conversione inversa e passare da una stringa in Base64 alla immagine che rappresenta. Una conversione inversa empirica può essere fatta con Real Time Editor. Si incolla il codice HTML della immagine in Base64 nella parte superiore del tool
Nella parte bassa si visualizzerà l'immagine rappresentata dalla stringa. Basterà cliccarci sopra con il destro del mouse e scegliere Salva immagine con nome per salvarla nel computer.
Post da non perdere: Il miglior modo di ottimizzare le immagini JPG
Nessun commento :
Posta un commento
Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy