image Convertitore di Immagini Base64 star

Come funziona

Questo strumento funziona in due direzioni. In modalità Immagine → Base64, scegli un file con il selettore nativo del browser; lo strumento lo legge con l'API FileReader.readAsDataURL() e produce un data URI completo — una stringa come data:image/png;base64,iVBORw0KG... — mostrata in un riquadro, mentre il payload Base64 puro (senza prefisso) viene mostrato in un secondo riquadro, così puoi prendere la forma che ti serve, con un pulsante di copia rapida per ciascuna. In modalità Base64 → Immagine, incolla nell'area di testo un data URI completo oppure solo il testo Base64 puro; se incolli Base64 puro senza prefisso, lo strumento aggiunge automaticamente un'intestazione data:image/png;base64, in modo che il browser possa comunque visualizzarla, poi mostra un'anteprima <img> dal vivo con un pulsante di download che salva i byte decodificati come un vero file immagine.

La codifica Base64 prende dati binari e li rappresenta usando solo 64 caratteri ASCII stampabili (A–Z, a–z, 0–9, + e /), il che è ciò che permette di incorporare un'immagine — intrinsecamente binaria — dentro formati di solo testo come HTML, CSS, JSON o un URL. Il meccanismo è fisso e matematico: ogni 3 byte (24 bit) del file originale diventano esattamente 4 caratteri Base64 (4 × 6 bit), riempiti con = quando la lunghezza dell'input non è multipla di 3. Questo rapporto di 3 byte in entrata e 4 caratteri in uscita è anche il motivo per cui l'output Base64 è sempre circa il 33% più grande del binario originale — 4 diviso 3 è circa 1,333 — un sovraccarico matematico fisso, non un'approssimazione o un'impostazione di qualità.

Cose utili da sapere

Incorporare un'immagine come data URI direttamente nel tuo HTML o CSS ha un vantaggio reale: elimina una richiesta HTTP separata, il che conta per risorse molto piccole e riutilizzate spesso come icone, piccoli sprite o un minuscolo logo inserito in un template email dove le immagini esterne potrebbero essere bloccate. Il compromesso si inverte per tutto ciò che è più grande: un data URI non può essere memorizzato in cache in modo indipendente dal browser come farebbe un file .png o .jpg collegato, gonfia le dimensioni del file HTML/CSS che lo contiene (dello stesso ~33%) e ne blocca il rendering finché l'intero blocco codificato non è stato scaricato. Come regola generale, i data URI sono adatti per risorse sotto pochi kilobyte e poco adatti a foto, immagini hero o qualsiasi cosa un utente vorrebbe vedere memorizzata in cache tra un caricamento di pagina e l'altro.

Il prefisso del tipo MIME — la parte image/png, image/jpeg o image/webp di data:image/png;base64,... — non è decorativa. È ciò che indica al browser (o a qualsiasi altro programma che legga la stringa) a quale decodificatore consegnare i byte seguenti; senza di essa, o con quella sbagliata, un payload Base64 altrimenti valido può non essere visualizzato o essere interpretato come un tipo di file completamente diverso. Proprio per questo lo strumento aggiunge automaticamente un prefisso PNG quando incolli Base64 puro senza alcun prefisso — un valore predefinito ragionevole, che però dovresti cambiare in base al formato reale del file originale se sai che era un JPEG o un WebP.