🖼️ Convertitore di immagini Base64

Converti immagini in stringhe Base64 o ripristina Base64 in immagini.

File immagine

📁

Fai clic o trascina e rilascia un'immagine

Includi Data URL

GUIDA

Scopri di piu

1. Che cos'è la codifica Base64

Base64 è un metodo di codifica che converte dati binari in stringhe ASCII. Consente di rappresentare in formato testo file binari come immagini, audio e video, permettendo la trasmissione di dati binari tramite protocolli basati su testo come email, JSON e XML. Usa solo 64 caratteri ASCII (A-Z, a-z, 0-9, +, /) per rappresentare tutti i dati binari. È utile per inserire immagini inline in HTML con i Data URL o includere immagini nelle risposte API. Tuttavia, aumenta la dimensione originale di circa il 33%.

2. Casi d'uso delle immagini Base64

Le immagini Base64 vengono utilizzate in vari scenari di sviluppo web. L'inserimento inline di piccole icone come background-image CSS riduce le richieste HTTP, migliorando la velocità di caricamento della pagina. Vengono usate nei template email per aggirare il blocco delle immagini esterne. Quando si distribuiscono pagine web complete come singoli file HTML, tutte le immagini possono essere incluse come Base64. Nelle API RESTful, le immagini possono essere incluse direttamente nelle risposte JSON senza caricamenti di file separati. Sono inoltre usate quando si trasmettono al server immagini create con la Canvas API.

3. Formato Data URL

Data URL è uno schema per rappresentare file come URL. Formato: data:[<mediatype>][;base64],<data>. Esempio: data:image/png;base64,iVBORw0KG... Mediatype specifica un tipo MIME come image/png, image/jpeg, image/gif. ;base64 indica il metodo di codifica, seguito dalla stringa Base64 effettiva. Può essere usato direttamente nei tag img HTML come <img src="data:image/png;base64,...">. È utilizzato anche in CSS come background: url(data:image/svg+xml;base64,...). I browser elaborano i Data URL come URL normali per visualizzare le immagini.

4. Considerazioni sull'ottimizzazione delle prestazioni

Le prestazioni vanno considerate quando si usano immagini Base64. Le immagini piccole (sotto 1-2KB) traggono vantaggio dall'inserimento inline rispetto al sovraccarico di una richiesta HTTP. Le immagini grandi possono invece rallentare a causa dell'aumento del 33% delle dimensioni e del sovraccarico di parsing dovuto a Base64. Le immagini Base64 non possono sfruttare la cache del browser, quindi vengono scaricate ogni volta insieme a HTML/CSS. Le immagini usate frequentemente dovrebbero essere fornite come file separati per il caching. La compressione Gzip è efficace sulle stringhe Base64, quindi va abilitata sui server. È appropriato usare Base64 per immagini decorative o icone, non per contenuti critici.

5. Considerazioni sulla sicurezza

Esistono rischi di sicurezza con le immagini Base64. Quando si visualizzano immagini caricate dagli utenti e convertite in Base64, attenzione agli attacchi XSS. Le immagini SVG sono particolarmente pericolose perché possono contenere JavaScript. Le intestazioni Content-Security-Policy possono limitare l'uso dello schema data:. Imposta limiti di dimensione dei file per prevenire attacchi di esaurimento della memoria. Convalida i tipi di immagine per elaborare solo i MIME type consentiti (image/png, image/jpeg). La verifica lato server dovrebbe confermare i file immagine reali e controllare la presenza di codice malevolo.

6. Conversione Base64 per linguaggio di programmazione

La maggior parte dei linguaggi di programmazione fornisce nativamente la codifica Base64. JavaScript usa btoa() per la codifica, atob() per la decodifica e la FileReader API per leggere i file come Base64. Python fornisce b64encode() e b64decode() nel modulo base64. PHP usa le funzioni base64_encode() e base64_decode(). Java usa getEncoder() e getDecoder() tramite la classe java.util.Base64. Node.js codifica con Buffer.from(data).toString("base64") e decodifica con Buffer.from(base64, "base64"). Leggere file immagine e convertirli in Base64 si implementa facilmente con le librerie standard in tutti i linguaggi.

Domande frequenti

Quando dovrei attivare o disattivare l'opzione "Include Data URL"?

Lasciala attiva se prevedi di incollare il risultato direttamente in un tag img HTML o in background-image CSS, perché serve il prefisso data:image/png;base64,. Disattivala se ti serve solo la stringa Base64 grezza per un'API server.

Quali formati immagine (PNG, JPG, GIF, SVG) sono supportati?

Puoi caricare la maggior parte dei formati raster e vettoriali supportati dai browser - PNG, JPG, GIF, WebP, SVG e altri - per convertirli in Base64, e la decodifica ripristina l'immagine usando il suo MIME type originale.

Se converto una stringa Base64 di nuovo in un'immagine, è identica all'originale?

Sì, Base64 è una codifica senza perdita, quindi la decodifica ripristina una copia identica all'originale, pixel per pixel.

Perché la conversione di un'immagine grande sembra lenta o produce una stringa molto lunga?

La codifica Base64 aumenta le dimensioni di circa il 33% rispetto ai binari originali e, poiché viene elaborata come stringa nella memoria del browser, le immagini più grandi richiedono più tempo e producono stringhe di output più lunghe.

È sicuro usare direttamente il Base64 convertito sul mio sito?

Per il normale incorporamento di immagini va bene, ma se visualizzi file caricati dagli utenti così come sono, gli SVG possono contenere script incorporati, quindi i servizi di produzione dovrebbero aggiungere anche la validazione lato server.