> PNG | encode | data-uri <

R: Converte il contenuto binario di un file .png in una stringa ASCII utilizzando l'alfabeto Base64 definito in RFC 4648. Il testo codificato può essere inserito direttamente in un tag HTML <img>, in una background-image CSS, in un messaggio email, in un payload di API JSON o in qualsiasi altro trasporto di solo testo. I byte del PNG rimangono invariati — ogni chunk IHDR, IDAT, tRNS e IEND viene codificato e può essere recuperato esattamente.

R: Trascina il tuo PNG nella zona di rilascio (o clicca per sfogliare). Lo strumento legge il file con FileReader.readAsDataURL(), che restituisce già un URI data:image/png;base64,… pronto all'uso. Scegli Data URI se vuoi incollarlo direttamente in <img src="…">, oppure Solo payload Base64 se la tua API/database si aspetta la sola parte Base64 grezza senza il prefisso data:image/png;base64,.

R: No. Base64 è una pura trasformazione da binario a testo — ogni byte del PNG originale viene preservato, incluso il canale alfa, la palette e il profilo colore (chunk iCCP/sRGB). Quando decodifichi nuovamente la stringa, il file è identico bit per bit all'originale. Un hash SHA-256 del PNG decodificato corrisponderà all'originale. Ecco perché Base64 è lo strumento corretto per incorporare icone, loghi e screenshot in cui conta la precisione dei pixel.

R: Base64 usa 4 caratteri per ogni 3 byte di input, quindi la stringa codificata è ~33% più grande del file PNG originale. La dimensione esatta è 4 × ⌈n / 3⌉ caratteri, dove n è la dimensione del PNG in byte. Un PNG da 10 KB diventa ~13,6 KB di testo Base64. Poiché la compressione HTTP (gzip, Brotli) gestisce abbastanza bene il testo Base64, l'overhead sulla rete è di solito più vicino al 10–15% nella pratica.

R: Ogni stringa Base64 di un PNG inizia con iVBORw0KGgo. Quel prefisso è la firma PNG di 8 byte 89 50 4E 47 0D 0A 1A 0A ricodificata in Base64. Quindi iVBORw0KGgoAAAANSUhEUg... è sempre un PNG, e vedere quel prefisso è una rapida verifica visiva che i tuoi dati siano intatti. Quando è racchiuso come data URI appare così:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==

R: Incolla l'intero data URI nell'attributo src di un tag <img>:
<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
Il browser decodifica il payload Base64 e renderizza il PNG esattamente come se fosse stato caricato da un URL. Non viene effettuata alcuna richiesta HTTP aggiuntiva, il che è utile per le icone del percorso critico, le firme email e le app offline-first.

R: Racchiudi il data URI nella funzione url():
.icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
Per il riutilizzo, salvalo in una proprietà personalizzata CSS:
:root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); }
.brand { background: var(--logo); }
Gli sfondi inline eliminano una richiesta HTTP per icona ma gonfiano il tuo file CSS, quindi usali solo per piccole icone (< 4 KB).

R:
JavaScript (browser): const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))

R: Usa i data URI PNG Base64 quando:
• l'immagine è < 4 KB (per risparmiare un viaggio HTTP)
• devi incorporarla in un'email HTML (molti client bloccano le immagini remote)
• stai distribuendo un report o una dashboard HTML in un unico file
• stai memorizzando l'immagine all'interno di un payload JSON o di una colonna del database
Preferisci un file .png esterno quando l'immagine è grande, riutilizzata su molte pagine o necessita di una cache CDN separata.

R: Sì. Poiché Base64 è una trasformazione bit per bit, ogni modalità colore PNG è supportata allo stesso modo:
• RGBA / truecolor + alfa — colore a 32 bit, trasparenza completa
• Palette (PLTE) + tRNS — PNG con palette indicizzata con trasparenza a 1 bit
• Scala di grigi + alfa — scala di grigi a 8/16 bit con alfa
• PNG deep color a 16 bit — PNG in stile HDR usati nell'imaging medico e nella visualizzazione scientifica
Tutti questi attraversano puliti il round-trip Base64 e vengono visualizzati correttamente nei browser che comprendono il PNG.

R: No. Base64 è una codifica, non una crittografia. Chiunque possa leggere la stringa può decodificarla nuovamente nel PNG originale in millisecondi. Se uno screenshot contiene una password, un token API o informazioni personali, codificarlo come Base64 non lo protegge — usa un vero livello di crittografia (AES-GCM, age, PGP) sopra l'output Base64, oppure trasporta l'immagine tramite TLS verso un server che applica controlli di accesso.

R: Non c'è alcun limite artificiale. Poiché la codifica viene eseguita localmente, il limite è la memoria del tuo browser — tipicamente 100 MB+ su desktop e 40–60 MB su mobile. Per PNG molto grandi (immagini mediche o satellitari ad alta risoluzione), leggiamo il file in blocchi e chiamiamo btoa() su ogni blocco in modo che il thread principale rimanga reattivo. Se la tua immagine è più grande di ~100 MB, considera di trasmetterla in streaming direttamente da un encoder lato server invece di caricarla nel browser.

R: Usa PNG → Base64 per loghi, icone dell'interfaccia, screenshot, diagrammi e qualsiasi cosa con trasparenza o bordi netti (testo, grafici). Il PNG è senza perdita e supporta l'alfa. Usa JPG → Base64 per fotografie o immagini con molti colori dove la compressione con perdita è accettabile. I file JPEG sono tipicamente 5–20× più piccoli dei PNG per le foto, quindi il payload Base64 è molto più corto. Come regola pratica: se l'immagine proviene da una fotocamera o contiene gradienti fotografici, usa JPG; altrimenti PNG.