Come si usa
- Trascina un PNG nell’area di rilascio, fai clic per sceglierne uno oppure incolla uno screenshot dagli appunti.
- Lascia Converti in su Mantieni originale per codificare i byte originali del PNG, oppure imposta una Larghezza massima per ridurre un’immagine grande.
- Confronta la dimensione originale con la dimensione codificata mostrata per l’immagine.
- Copia o scarica l’output in formato data URI, Base64 puro, tag img, CSS o Markdown.
PNG e Base64
PNG (Portable Network Graphics, tipo MIME image/png) è un formato raster lossless con canale alfa completo, ed è per questo la scelta abituale per icone, loghi, diagrammi e screenshot. Ogni file PNG inizia con la stessa firma di 8 byte, quindi ogni data URI PNG inizia allo stesso modo: data:image/png;base64,iVBORw0KGgo....
Base64 non tocca i pixel. Decodificando la stringa si ottiene un file identico byte per byte, con gli stessi colori e le stesse aree trasparenti.
Usi ideali per i data URI PNG
- Piccole icone dell’interfaccia e loghi che richiedono uno sfondo trasparente.
- Screenshot all’interno di report HTML autosufficienti, segnalazioni di bug o documentazione esportata.
- Grafici e codici QR generati su un server e restituiti in una risposta JSON.
- Immagini create con
canvas.toDataURL(), che per impostazione predefinita produce già data URI PNG.
Con le foto il discorso cambia. PNG le memorizza senza perdita di qualità e i file diventano pesanti; JPEG o WebP producono una stringa molto più corta.
Riduci il PNG prima di codificarlo
Ogni byte che togli dal PNG ti fa risparmiare circa 1,33 caratteri di Base64. Passa prima il file in un ottimizzatore come oxipng o zopflipng (lossless) oppure pngquant (riduce la palette). Controlla anche la dimensione in pixel: un’icona esportata al triplo della dimensione di visualizzazione di solito può essere ridimensionata con l’opzione Larghezza massima.
La conversione in WebP mantiene la trasparenza e spesso produce file molto più piccoli. La conversione in JPEG elimina la trasparenza, quindi le aree trasparenti diventano di un colore uniforme. Ricodificare in PNG nel browser non ottimizza la compressione, perciò il risultato può essere più grande di un originale ben ottimizzato: confronta le dimensioni prima di copiare.
Come usare l’output
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# Riga di comando: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngDomande frequenti
Base64 mantiene la trasparenza del PNG?
Sì. Base64 codifica i byte del file senza modificarli, quindi il canale alfa viene conservato. La trasparenza si perde solo se converti l’immagine in JPEG.
Perché ogni stringa Base64 di un PNG inizia con iVBORw0KGgo?
Quei caratteri sono la forma Base64 della firma dei file PNG. Se una stringa che dovrebbe essere un PNG inizia in modo diverso, si tratta di un altro formato oppure è danneggiata.
Posso incollare direttamente uno screenshot?
data:image/png.Quanto può essere grande un PNG da incorporare in Base64?
Una regola pratica diffusa indica pochi kilobyte, fino a circa 10 KB. Le immagini più grandi è meglio servirle come file separati, che il browser può mettere in cache e caricare in parallelo.