Immagine a Base64
Converti immagini in testo Base64 per incorporare nel codice.
Convertire immagini in Base64 per lo sviluppo web
Base64 è un sistema di codifica che converte dati binari (come le immagini) in una stringa di testo ASCII. Questo permette di incorporare immagini direttamente nel codice HTML, nei fogli di stile CSS o nei file JavaScript senza bisogno di un file esterno separato. È particolarmente utile per piccole icone, loghi ed elementi UI che beneficiano del caricamento inline, eliminando una richiesta HTTP aggiuntiva al server.
La codifica Base64 aumenta la dimensione dei dati di circa il 33% rispetto al file binario originale. Per questo motivo, si raccomanda il suo utilizzo principalmente per immagini piccole (meno di 10 KB). Per immagini più grandi, è generalmente più efficiente servirle come file separati sfruttando la cache del browser. I data URI con Base64 possono essere usati negli attributi src delle immagini HTML, nelle proprietà background-image del CSS, e in qualsiasi punto che accetti un URL.
Il nostro strumento converte qualsiasi immagine in Base64 istantaneamente nel tuo browser. Non viene caricato nulla su alcun server. Ottieni tre formati di output: la stringa Base64 pura, il data URI completo con il prefisso MIME per l'uso diretto, e un tag HTML img pronto da incollare nel tuo codice. Ogni formato include un pulsante per copiare negli appunti con un clic.
Domande frequenti
Perché il Base64 è più grande del file originale?
Base64 codifica ogni 3 byte di dati binari in 4 caratteri ASCII, il che comporta un aumento di circa il 33%. Questo è intrinseco al sistema di codifica ed è il costo della conversione di dati binari in testo semplice.
Quando dovrei usare immagini in Base64?
È ideale per immagini piccole come icone (meno di 10 KB), email HTML, applicazioni offline, o quando vuoi ridurre il numero di richieste HTTP. Per immagini grandi, è meglio servirle come file separati.
Posso usare il data URI nel CSS?
Sì. Puoi usare il data URI completo nella proprietà background-image del CSS, ad esempio: background-image: url(data:image/png;base64,...). È utile per sfondi, sprite e decorazioni che non necessitano di caricamento esterno.