Segui questo esempio pratico, poi adatta gli stessi controlli alla tua immagine. Apri Convertitore da immagine a Base64.
Seleziona un'immagine e visualizza in anteprima la sua identità
Apri il convertitore da Immagine a Base64. Seleziona un'immagine o Prova un esempio. L'esempio usa il favicon-orbit.png da 512 × 512 pixel, che contiene 202,491 byte. L'editor mostra l'immagine sopra il suo codice così puoi confermare di aver selezionato la risorsa corretta.
PNG, JPG, WebP, GIF, BMP e AVIF sono supportati quando il tuo browser può decodificarli per l'anteprima. La dimensione massima del file è 25 MB, con limiti di 60 megapixel e 16,000 pixel per lato. Il markup SVG non è accettato da questo convertitore raster.
Lo strumento legge i byte del file originale. Non usa l'anteprima per ricostruire l'immagine, ridimensionarla o ricomprimerla. I metadati esistenti e l'animazione GIF sono quindi conservati nei dati codificati.
Prima della codifica, usa Ridimensiona immagine o Compressore immagine se ti serve una risorsa più piccola. Base64 di per sé non riduce la dimensione dell'immagine.
Scegli la rappresentazione che il tuo progetto si aspetta
Apri Impostazioni e seleziona immagine HTML sotto Formato codice per questo esempio. Il risultato è un tag img contenente un data URL Base64. L'attributo alt è inizialmente vuoto; scrivi un testo alternativo utile quando l'immagine comunica informazioni.
Il data URL inizia con un prefisso come data:image/png;base64, seguito dai dati codificati. Base64 semplice contiene solo i dati. Sfondo CSS avvolge il data URL in una dichiarazione background-image. Queste rappresentazioni servono a destinazioni diverse, quindi copia la forma richiesta dalla tua applicazione invece di cambiare solo il nome del file.
Il pannello del codice si aggiorna immediatamente dopo aver cambiato Formato codice. L'icona copia copia la rappresentazione corrente e fornisce la conferma di copia condivisa. Quando l'accesso agli appunti è bloccato, il codice viene selezionato per la copia manuale.
Un tag HTML img completo non è la stessa cosa di un data URL. Usa solo il valore src quando un campo richiede un URL.
L'esempio in questa guida
Prova un esempio: favicon-orbit.png, 512 × 512 px, 202,491 byte. Scegli l'immagine HTML nel formato Codice. Seleziona Avvia e scarica favicon-orbit-base64.txt.
- PNG originale
- 512 × 512 px · 202,491 byte
- Output testo HTML
- 270,029 byte
- Codifica
- Byte originali; nessuna ricompressione
Scarica il codice e comprendine la dimensione
Seleziona Avvia, quindi Scarica. L'esempio salva favicon-orbit-base64.txt contenente HTML codice immagine. I suoi 270,029 byte sono più grandi dei 202,491 byte della sorgente. Il confronto nell'articolo mostra l'inizio effettivo del testo scaricato, abbreviato solo per leggibilità.
Base64 converte tipicamente tre byte sorgente in quattro caratteri di testo, aggiungendo circa un terzo prima del piccolo wrapper. Incorporare una piccola icona può rendere un documento autonomo, ma inserire grandi stringhe di immagini all'interno di HTML o CSS ingrandisce anche quel documento e impedisce all'immagine di essere memorizzata nella cache come file separato.
La codifica non è crittografia. Chiunque abbia la stringa Base64 completa può recuperare l'immagine sottostante. Tratta il codice con la stessa cura della sorgente se contiene informazioni private.
L'estratto troncato in questo articolo è esplicativo. Usa il TXT scaricato completo o copia il codice intero dallo strumento.
Domande comuni
La codifica riduce la qualità dell'immagine?
No. La codifica preserva i byte originali. Non ridimensiona, non comprime e non ridisegna l'immagine.
Perché la stringa Base64 è più grande dell'immagine?
Base64 rappresenta tre byte di input usando quattro caratteri di testo, quindi normalmente aggiunge circa un terzo prima di un wrapper o di un prefisso.
Le animazioni GIF vengono preservate?
La codifica preserva i GIF byte originali, inclusa l'animazione. Un'anteprima potrebbe mostrare un fotogramma fisso mentre i dati codificati conservano tutti i fotogrammi.
Base64 è sicuro per immagini segrete?
Base64 non è una crittografia. Mantieni la stringa privata se l'immagine sottostante è privata. Il convertitore stesso la elabora localmente nel tuo browser.
Trasforma l'immagine giusta nel codice giusto.
Prova un esempio o usa il tuo file e rivedi il risultato prima di condividerlo.
