Convertitore Immagine in Base64 - Codifica Immagini come Data URI

Perché Base64 è una codifica, non un compressore. Rappresenta 3 byte di binario usando 4 caratteri ASCII stampabili, quindi l'output è sempre circa il 33% più lungo dell'input, più qualche byte per il prefisso data:. Questa crescita è intrinseca al formato e non c'è alcuna impostazione che la eviti. Se ti serve un file più piccolo, comprimi l'immagine prima di codificarla: il passaggio di codifica può solo aggiungere.

Incorpora quando l'asset è piccolo e sempre necessario: icone, spaziatori 1x1, minuscole texture di sfondo, circa sotto i 10 KB. Sotto quella soglia, risparmiare una richiesta HTTP di solito batte la penalità di dimensione del 33%. Non incorporare foto, immagini hero, o qualsiasi cosa sopra circa 100 KB. Un data URI grande non può essere messo in cache indipendentemente, deve essere riscaricato a ogni revisione della pagina o del foglio di stile, e blocca il parser finché non è stato letto completamente.

Spesso no. Gmail rimuove del tutto i data URI dai tag img, e i client desktop di Outlook non li hanno mai supportati in modo affidabile. Apple Mail e alcuni client webmail invece li renderizzano. L'approccio affidabile per l'email resta un URL immagine ospitato, oppure un allegato CID referenziato con cid: nel src. Testa nei client che i tuoi destinatari usano davvero prima di affidarti ai dati incorporati.

Sì, ed è senza perdita: i byte decodificati sono identici al file originale, inclusi i dati EXIF e del profilo colore. Incolla un data URI completo nella barra degli indirizzi del browser e l'immagine viene renderizzata. Nel codice, atob() in JavaScript oppure base64 -d da riga di comando lo fanno. Nota che l'output grezzo di questa pagina omette il prefisso data:, quindi riaggiungilo se la destinazione si aspetta un URI completo.

No. SVG è già testo, quindi Base64 aggiunge il 33% per nulla. Incolla invece il markup direttamente nel tuo HTML, il che permette anche a CSS di stilizzare le forme e a JavaScript di raggiungerle. Per gli sfondi CSS, usa un SVG con codifica URL in url() anziché uno in Base64: resta più piccolo e si comprime meglio con gzip. Base64 per SVG ha senso solo dove è richiesto un URI rigoroso e la codifica percentuale non è un'opzione.

Non c'è alcun limite nella specifica HTML o CSS, e i browser moderni gestiscono data URI di più megabyte negli attributi src. I limiti pratici sono altrove: le barre degli indirizzi tipicamente si bloccano intorno ai 2 MB o meno, alcune configurazioni di server e CDN limitano la dimensione di header e richieste, e stringhe molto lunghe rallentano notevolmente il parsing. Questo strumento non impone alcun limite proprio, ma avvisa sopra i 100 KB perché è lì che l'incorporamento smette di valere la pena.

No. Il file viene letto con l'API FileReader del browser, che opera sull'handle del file locale, e la stringa risultante resta nella memoria della pagina. Nulla viene inviato in rete e non c'è alcun componente lato server, quindi lo strumento continua a funzionare offline una volta caricata la pagina. Le copie negli appunti passano attraverso gli appunti standard del browser, non attraverso di noi.

Tutti, per le immagini: i data URI in img src e CSS url() funzionano fin da IE8 e oggi sono supportati universalmente. Gli appunti sono la parte più recente: navigator.clipboard richiede un contesto sicuro, quindi su HTTP semplice o nei browser più vecchi questa pagina ripiega selezionando la textarea e usando document.execCommand('copy'). Se entrambi i percorsi falliscono vedrai un messaggio che ti chiede di selezionare e copiare il testo tu stesso.