Immagine a Base64

Seleziona un file immagine per convertirlo in una stringa codificata in Base64. Attiva il prefisso URI dati per un output CSS/HTML pronto all’uso. Tutta l’elaborazione avviene nel tuo browser.

Image preview

Informazioni su Immagine in Base64

Questo strumento converte le immagini in stringhe codificate Base64 interamente nel tuo browser. Nessun dato viene caricato su alcun server.

  • Data URI: Con il prefisso abilitato, l'output è pronto per l'uso in CSS background-image o HTML <img src="...">.
  • Base64 grezzo: Senza il prefisso, ottieni la stringa codificata grezza.
  • Supporta JPEG, PNG, GIF, WebP, SVG e altri formati immagine supportati dal browser.

Incorporare un'immagine come data URI toglie una richiesta e aggiunge circa un terzo alla sua dimensione, perché il base64 usa quattro caratteri ogni tre byte. Lo scambio conviene per qualcosa di piccolo e sempre necessario, non per una fotografia. Un'immagine incorporata inoltre non può essere messa in cache a parte, quindi viene riscaricata con ogni copia del file che la contiene.

Strumenti correlati

Codifica Base64 Generatore di QR Code Convertitore di colori

Il markup ti sta remando contro?

Entità con escape, codifiche rovinate e contenuti che nel CMS appaiono in un modo e sulla pagina in un altro di solito vogliono dire che qualcosa nella catena sta tirando a indovinare. Costruiamo front end e il percorso di pubblicazione dietro, così il visitatore vede quello che hai scritto.

Parliamo del tuo sito

Domande frequenti

Quando conviene un data URI?
Per immagini piccole necessarie subito: un'icona, un distanziatore, un logo in una email HTML dove le immagini esterne sono bloccate per impostazione predefinita. La regola pratica è qualche kilobyte; oltre, il peso in più supera la richiesta risparmiata.
Perché la versione codificata è più grande?
Il base64 rappresenta tre byte come quattro caratteri, quindi il risultato è un terzo più grande prima ancora del prefisso. La compressione ne recupera una parte in transito, ma il browser tiene comunque la forma più lunga nel documento.
Danneggia la cache?
Sì, ed è la parte che sfugge. Un file immagine separato viene messo in cache una volta e riusato; una immagine incorporata fa parte del foglio di stile o della pagina e viene riscaricata ogni volta che quel file cambia.
Quali formati posso incorporare?
Tutti, dato che al base64 il contenuto è indifferente. L'SVG è il caso interessante: è già testo, quindi incorporarlo come data URI è spesso più pesante che inserire direttamente l'SVG.
La mia immagine viene caricata da qualche parte?
No. Il file viene letto dal tuo browser e codificato nella pagina, quindi non lascia mai il tuo computer. Conta quando l'immagine è la schermata di qualcosa di interno, come accade quasi sempre.