UltKit

Convertitore da immagine a Base64

Un file immagine diventa una riga di testo da incollare in HTML, CSS, una richiesta JSON o un file Markdown, con il prefisso data URI già davanti: funziona appena lo si incolla.

Convertitore di dati

oppure trascina qui File CSV, TSV, TXT … ·

Max 95 MB per file· Fino a 20 file· Eliminati dopo 30 minuti

Output

I file vengono elaborati sui nostri server ed eliminati dopo 30 minuti.

Come usare questo strumento

  1. 1

    Aggiungere le immagini

    Trascini file PNG, JPG, GIF, WebP o SVG nell'area di caricamento, fino a 20 alla volta e 95 MB ciascuno.

  2. 2

    Mantenere o togliere il prefisso

    Prefisso data URI è attivo, quindi il risultato inizia con data:image/png;base64, o con il tipo corrispondente. Disattivalo in Impostazioni avanzate quando un'API richiede la sola stringa Base64.

  3. 3

    Convertire e copiare

    Premi Converti in Base64 text e scarica un file .txt per ogni immagine, pronto da incollare nel codice.

Carica l'immagine e premi Converti in Base64 text. Ottieni il file codificato come semplici caratteri, che iniziano con data:image/…;base64, e possono andare direttamente in un img src o in un url() CSS. L'immagine non cambia in alcun modo.

Quando è utile un'immagine in Base64

Base64 è definito nella RFC 4648 (2006) e associa ogni 3 byte di dati binari a 4 caratteri di un alfabeto di 64 simboli: A–Z, a–z, 0–9, + e /. Il risultato supera indenne qualsiasi canale pensato per il testo. Lo schema data URI, descritto da Larry Masinter nella RFC 2397 nel 1998, permette poi al browser di trattare quel testo come un file.

Gli sviluppatori front-end incorporano piccole icone, spinner di caricamento e immagini segnaposto per far comparire la pagina senza richieste aggiuntive. Gli sviluppatori back-end inviano immagini dentro JSON, perché molte API, inclusi i servizi di visione e OCR, accettano un'immagine come campo Base64. I tester conservano le fixture nel codice sorgente, e chi crea report HTML in un solo file o note Markdown incorpora screenshot perché il file resti autonomo quando viene inviato via email o archiviato.

Come si presenta il risultato in Base64

Un PNG trasparente 1 × 1 (68 byte) come data URI dentro un tag img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="Pixel trasparente">

File icona PNG

24 KB

tipico set di icone per barra degli strumenti, 96 × 96 px

+33% di peso, nessuna perdita di qualità

Testo Base64

32 KB

4 caratteri ogni 3 byte, più il prefisso

ANY I

Qualsiasi immagine

Questo strumento accetta i formati di immagine più comuni, tra cui JPG, PNG, WebP, HEIC, GIF, BMP e TIFF. Il formato viene rilevato automaticamente dal file, quindi non è necessario sapere di che tipo di immagine si tratta.

Convertitore Any image

BASE64

Testo codificato in Base64

Base64 è una codifica, definita nella RFC 4648, che trasforma qualsiasi dato binario in una stringa di 64 caratteri di testo sicuri. Si usa per incorporare immagini in HTML e CSS come data URI, per allegare file alle email e per inviare dati binari in JSON o XML. La codifica è completamente reversibile, ma rende i dati circa il 33% più grandi. Base64 non è cifratura e non offre alcuna sicurezza: chiunque può decodificarlo.

Compressione
Senza perdita
Trasparenza
–
Animazione
–
Introdotto
–
Convertitore BASE64

Le immagini diventano testo Base64 quando devono viaggiare dentro qualcosa che trasporta solo testo: un file HTML o CSS senza richiesta separata, un campo JSON di una chiamata API, una fixture di test o un report in un unico file.

Quando incorporare un'immagine aiuta una pagina e quando la penalizza

L'incorporamento risparmia una richiesta, cosa che contava soprattutto con HTTP/1.1, quando i browser aprivano solo poche connessioni per sito. Con il multiplexing di HTTP/2 e HTTP/3 le piccole richieste aggiuntive costano poco, quindi il vantaggio si riduce mentre i costi restano: l'immagine codificata non può essere messa in cache separatamente, viene scaricata di nuovo ogni volta che cambia l'HTML o il CSS e ritarda l'analisi del file che la contiene.

Una regola sensata è incorporare solo immagini di pochi kilobyte presenti in ogni pagina, come un logo o uno sprite di icone, e servire tutto il resto come file. Le foto non vanno quasi mai incorporate. Se ciò che serve davvero è un altro tipo di file e non testo, ci pensa il convertitore di immagini.

Vantaggi delle immagini Base64

  • Un unico file HTML, CSS o JSON autonomo
  • Nessuna richiesta aggiuntiva per icone minuscole
  • Sicuro dentro JSON, XML e altri formati di testo
  • Senza perdita e reversibile

Svantaggi delle immagini Base64

  • Circa il 33% più grande del file binario
  • Non messo in cache separatamente dal browser
  • Immagini bloccate da molti client di posta
  • Difficile da rivedere nei diff del codice

Domande su immagini in Base64

Che differenza c'è tra Base64 e un data URI?

Base64 è soltanto la sequenza di caratteri codificati. Un data URI la racchiude con uno schema e un tipo, data:image/png;base64, seguiti dai caratteri, così il browser sa come decodificarla e mostrarla. HTML e CSS richiedono il data URI completo; la maggior parte delle API JSON vuole solo la parte Base64.

Quanto aumenta il peso di un'immagine in Base64?

Base64 scrive 4 caratteri ogni 3 byte, quindi il testo è circa un terzo più grande del file, più il breve prefisso. Un PNG da 30 KB diventa circa 40 KB di testo. Se l'HTML o il CSS viene servito compresso con gzip, parte di questo sovraccarico si recupera nel trasferimento.

Si può usare un'immagine Base64 in una firma email?

Non è affidabile. Gmail non mostra le immagini data URI e anche vari programmi di posta desktop le rimuovono, quindi i destinatari vedono un'icona rotta. Meglio ospitare l'immagine su un server web o allegarla, e usare Base64 per pagine web e app.

Conviene codificare in Base64 un'icona SVG?

Funziona, ma l'SVG è già testo. Codificare il markup come URL invece che in Base64 di solito produce un data URI più corto e leggibile. Per qualcosa di più grande di una piccola icona, è meglio un file SVG separato che il browser può mettere in cache.

Si può riconvertire il testo Base64 in immagine?

Sì, la codifica è senza perdita e completamente reversibile: la decodifica restituisce esattamente i byte originali. Ogni linguaggio di programmazione include un decodificatore, e incollando un data URI completo nella barra degli indirizzi del browser si visualizza l'immagine.

La codifica cambia la qualità dell'immagine?

No. Base64 cambia il modo in cui i byte sono scritti, non i pixel. Per accorciare la stringa, riduci prima l'immagine, ad esempio con comprimere immagine a 20 KB, e codifica il file più piccolo.