Convertitore da immagine a base64
Data URI, HTML, CSS e Markdown

Che cosa fa per te un convertitore da immagine a base64

Una pagina web di solito carica ogni immagine come file a sé. Tuttavia a volte vuoi l'immagine dentro la pagina stessa. Allora ti serve l'immagine come testo.

Un convertitore da immagine a base64 lo fa. Per prima cosa, scegli un'immagine. Poi scegli il formato che vuoi. Il testo appare subito, e lo copi con un clic.

Inoltre funziona al contrario. Incolla un data URI o una stringa Base64 semplice, e l'immagine appare. Così vedi che cosa contiene davvero una stringa lunga, e puoi scaricare l'immagine.

Infatti, tutto gira nel tuo browser. Così la tua immagine non lascia mai il tuo dispositivo. Conta quando è un logo, uno screenshot o una foto privata.

Che cos'è un data URI

Un data URI porta un file dentro un indirizzo web. Comincia con la parola data, poi il tipo di file, poi la parola base64, poi i byte codificati. Per esempio, un PNG comincia con data:image/png;base64, e una lunga serie di lettere.

Così il browser non ha bisogno di una seconda richiesta. Poi legge l'immagine direttamente dal testo.

Per maggiori dettagli, vedi: RFC 2397, the data URL scheme.

Come funziona Base64

Base64 trasforma ogni tre byte in quattro lettere e cifre. Così il testo cresce di circa un terzo. Per esempio, un'immagine da 30 KB diventa circa 40 KB di testo.

Inoltre lo strumento mostra la dimensione in più, così puoi valutare il costo prima di incollare il testo in qualunque posto.

Converti un'immagine in Base64

Per prima cosa, trascina un'immagine nella casella o fai clic per scegliere un file. Poi scegli un formato. Un data URI dà la stringa completa. Il Base64 semplice dà solo la parte codificata.

L'anteprima mostra la tua immagine. Poi i numeri mostrano il tipo, la dimensione in pixel, la dimensione del file e la dimensione in Base64.

Usa un data URI in HTML

Scegli Un tag img HTML. Poi lo strumento scrive il tag con il data URI, un testo alternativo preso dal nome del file, e larghezza e altezza. Poi lo incolli nella tua pagina.

Usa un data URI in CSS

Scegli Immagine di sfondo CSS. Poi lo strumento scrive una regola background-image. Così una piccola icona può stare dentro il tuo foglio di stile. Poi si carica con il CSS e non richiede nessuna richiesta in più.

Usa un data URI in Markdown

Scegli Un'immagine Markdown. Poi lo strumento scrive l'immagine in forma Markdown. Poi alcuni editor e app di appunti mostrano l'immagine senza un file separato.

Converti Base64 in un'immagine

Cambia la direzione in Base64 in immagine. Incolla un data URI o una stringa Base64 semplice. Lo strumento la controlla, legge i primi byte per trovare il tipo e mostra l'immagine.

Poi premi Scarica l'immagine per salvarla come file. Poiché lo strumento legge i byte, dà al file la terminazione giusta, come png o jpg.

Tipi di immagine supportati

Lo strumento legge PNG, JPG, GIF, WebP, AVIF, BMP, ICO e SVG. Inoltre trova il tipo dal file stesso, non dal nome. Così una terminazione sbagliata non lo inganna.

Quando usare immagini in Base64

Usale per icone minuscole, firme di posta e pagine da un solo file. Prima di tutto, risparmiano una richiesta per immagine. Tuttavia ingrossano anche il testo e saltano la cache del browser per l'immagine.

Quindi tienile per immagini piccole.

Quando evitare immagini in Base64

Una grande immagine in Base64 appesantisce una pagina. Poi il browser non può metterla in cache a parte dalla pagina. Inoltre è più difficile da aggiornare dopo. Quindi tieni le foto come file normali e tieni i data URI sotto circa 100 KB.

Spezza Base64 in righe

Alcuni sistemi, come la posta, vogliono righe da 76 caratteri. Poi spunta la casella degli a capo, e lo strumento spezza il Base64 semplice per te.

Controlla immagini private in sicurezza

L'immagine non lascia mai il tuo dispositivo. Così puoi convertire immagini private, come documenti d'identità o screenshot, senza pensieri.

Sicuro per progetto

Per prima cosa, lo strumento lavora nel tuo browser. Non invia nulla e non memorizza nulla. Così la tua immagine resta tua.