Immagine in Base64
Trascina un'immagine qui
oppure
Sfoglia filePNG, JPG, GIF, SVG, WebP...
Domande Frequenti
Tutto quello che devi sapere sulle immagini in Base64
Cos'e un Data URI in Base64?
Un Data URI e una stringa che incorpora direttamente il contenuto di un file (in questo caso un'immagine) dentro il codice, senza bisogno di un file esterno. Ha il formato data:image/png;base64,XXXX dove XXXX e l'immagine codificata in Base64. Puoi incollarlo nell'attributo src di un tag img o in una regola CSS background-image.
Perche l'immagine codificata e piu grande dell'originale?
La codifica Base64 rappresenta ogni 3 byte di dati binari con 4 caratteri di testo, quindi aumenta la dimensione di circa il 33%. Per questo l'inline in Base64 conviene solo per immagini piccole (icone, loghi): riduce le richieste HTTP, ma per immagini grandi e meglio usare un normale file per non appesantire HTML e CSS.
Le mie immagini vengono caricate su un server?
No. La conversione avviene interamente nel tuo browser usando l'API FileReader di JavaScript: l'immagine non lascia mai il tuo dispositivo e non viene inviata a nessun server. Questo rende lo strumento privato e velocissimo, e funziona anche senza connessione internet una volta caricata la pagina.
Che cos'è un Data URI?
È una stringa che porta dentro di sé il contenuto del file, nella forma data due punti, tipo del file, base64 e i dati. Si incolla al posto dell'indirizzo di una immagine e non serve più un file esterno.
Perché la stringa è più grande del file?
Perché il Base64 rappresenta ogni tre byte con quattro caratteri di testo, e il peso cresce di circa un terzo. Conviene quindi solo per icone e loghi piccoli, dove risparmia una richiesta HTTP.
La immagine viene inviata a un server?
No, la conversione la fa il browser con la FileReader di JavaScript: il file non lascia il dispositivo. Lo strumento funziona anche senza connessione, una volta che la pagina è aperta.