Una delle operazioni più comuni per ottimizzare il peso delle nostre pagine web è quella di convertire in Base64 piccole immagini usate per esempio come icone o loghi nel nostro sito direttamente dentro al background-image del nostro codice CSS. Per fare questo in questo esempio partiremo da un file PNG.
Per prima cosa dobbiamo esportare l’immagine in SVG e per farlo utilizzeremo il programma gratuito Adobe XD. Questo programma e molto utilizzato per creare pagine web in modo semplice e veloce ed al suo interno contiene anche alcune funzioni che ci permettono di evitare l’utilizzo di PhotoShop o altri programmi a pagamento.
Quindi da Adobe XD creiamo un nuovo Design selezionando ad esempio quello per iPhone X/XS e trasciniamo dal desktop all’interno dell’area di disegno la nostra PNG. Fatto questo ridimensioniamo l’elemento della misura che vorremo ricreare per la nostra grafica e per farlo, una volta selezionato dalle impostazioni a destra, bisogna ricordarsi di cliccare sul lucchetto per mantenere le proporzioni e digitare quindi i pixel.
Il passo successivo è quello di esportare la nostra immagine in SVG. Dobbiamo selezionare nel ArtBoard a sinistra il nostro elemento inserito e fare click con il tasto destro del mouse. Qui dobbiamo cliccare su Export Selected (CMD + E da tastiera) e salvare nella cartella che desideriamo il file nel formato SVG.
Infine per passare da SVG a codifica Base64 utilizzabile direttamente come regola CSS nel nostro codice ci serviremo di uno strumento online che fa proprio al caso nostro. Ci sono diversi siti che offrono questo servizio di conversione, io mi sento di consigliarvi questo:
https://yoksel.github.io/url-encoder/
Selezioniamo quindi dalla cartella il nostro file SVG e facciamo quindi click destro e poi successivamente “Apri Con” un editor di codice come Sublime Text nel mio caso, oppure trasciniamo direttamente il file dentro ad un programma di testo semplice (ad esempio TextWrangler per Mac). Copiamo negli appunti il codice che ci compare nel programma e lo diamo infine in pasto al nostro sito di conversione gratuito che ci restituirà un codice CSS background-image con il base64 della nostra icona.
Questi semplici passi ci permettono di risparmiare Byte preziosi per l’ottimizzazione del nostro sito e per un miglior risultato anche su PageSpeed Insights di Google.
Un’altro comodo strumento per convertire il nostro file PNG in SVG è il sito online di Adobe Express, qui con un account gratuito potrete trovare diversi strumenti ed uno di questi è il semplicissimo convertitore:
https://www.adobe.com/it/express/feature/image/convert/png-to-svg
Fare o non fare. Non esiste provare.
Andrea Benzi 