Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

background-image: da PNG a Base64

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 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:

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 quindi ci permettono di risparmiare Byte preziosi per l’ottimizzazione del nostro sito e per un miglior risultato anche su PageSpeed Insights di Google.

Provare per credere.

L'articolo background-image: da PNG a Base64 proviene da Consigli WP.



This post first appeared on Consigli WP, please read the originial post: here

Share the post

background-image: da PNG a Base64

×

Subscribe to Consigli Wp

Get updates delivered right to your inbox!

Thank you for your subscription

×