Da PNG a Base64 per usarlo come background-image

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 nel nostro 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.

Base64 background-image

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 quindi 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 quindi di esportare la nostra immagine in SVG e per farlo 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:

Selezioniamo quindi dalla cartella il nostro file SVG e facciamo quindi click destro e poi successivamente “Apri Con” un editor di codice gratuito 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.

Il risultato per il nostro base64 come background-image in CSS sarà simile a questo:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='32' height='32' viewBox='0 0 32 32'%3E%3Cimage width='32' height='32' xlink:href='data:image/png;base64,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'/%3E%3C/svg%3E");

Questi semplici passi quindi ci permettono di risparmiare Byte preziosi per l’ottimizzazione del nostro sito e per un miglior risultato anche su PageSpeed Insights di Google.

Posted in CSS.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.