Sådan bruger du værktøjet
- Træk et PNG-billede hen på feltet, klik for at vælge et, eller indsæt et skærmbillede fra udklipsholderen.
- Lad Konvertér til stå på Behold originalt format for at kode de oprindelige PNG-bytes, eller vælg en Maks. bredde for at gøre et stort billede mindre.
- Sammenlign den oprindelige størrelse med den kodede størrelse, der vises for billedet.
- Kopiér eller download outputtet som data URI, rå Base64, img-tag, CSS eller Markdown.
PNG og Base64
PNG (Portable Network Graphics, MIME-type image/png) er et tabsfrit rasterformat med fuld alfakanal, og derfor er det det sædvanlige valg til ikoner, logoer, diagrammer og skærmbilleder. Alle PNG-filer begynder med den samme signatur på 8 bytes, så alle PNG-data URI'er begynder på samme måde: data:image/png;base64,iVBORw0KGgo....
Base64 rører ikke ved pixelene. Når strengen afkodes, får du en fil tilbage, der er identisk byte for byte, med de samme farver og de samme gennemsigtige områder.
Gode anvendelser af PNG-data URI'er
- Små ikoner og logoer til brugerflader, der skal have gennemsigtig baggrund.
- Skærmbilleder i selvstændige HTML-rapporter, fejlrapporter eller eksporteret dokumentation.
- Grafer og QR-koder, der genereres på en server og returneres i et JSON-svar.
- Billeder, der er lavet med
canvas.toDataURL(), som i forvejen giver PNG-data URI'er som standard.
Fotos er en anden sag. PNG gemmer dem tabsfrit, og filerne bliver store; JPEG eller WebP giver en langt kortere streng.
Gør PNG-filen mindre før kodningen
Hver byte, du fjerner fra PNG-filen, sparer ca. 1,33 tegn Base64. Kør først filen gennem et optimeringsværktøj som oxipng eller zopflipng (tabsfrit) eller pngquant (reducerer paletten). Tjek også pixelstørrelsen: Et ikon, der er eksporteret i tre gange visningsstørrelsen, kan som regel skaleres ned med indstillingen Maks. bredde.
Konvertering til WebP bevarer gennemsigtigheden og giver ofte en meget mindre fil. Konvertering til JPEG fjerner gennemsigtigheden, så gennemsigtige områder bliver til en ensfarvet flade. Når browseren koder billedet om til PNG, bliver komprimeringen ikke optimeret, så resultatet kan blive større end en veloptimeret original; sammenlign størrelserne, før du kopierer.
Sådan bruger du outputtet
<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;
}
# Kommandolinje: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngOfte stillede spørgsmål
Bevarer Base64 gennemsigtigheden i PNG?
Ja. Base64 koder filens bytes uændret, så alfakanalen bevares. Gennemsigtigheden går kun tabt, hvis du konverterer billedet til JPEG.
Hvorfor starter alle PNG-strenge i Base64 med iVBORw0KGgo?
Disse tegn er Base64-udgaven af PNG-filsignaturen. Hvis en streng, der skulle være PNG, starter anderledes, er det et andet format, eller også er den beskadiget.
Kan jeg indsætte et skærmbillede direkte?
data:image/png-resultat.Hvor stort et PNG-billede bør jeg indlejre som Base64?
En almindelig tommelfingerregel er nogle få kilobyte, op til ca. 10 KB. Større billeder er bedre tjent med at ligge i separate filer, som browseren kan cache og indlæse parallelt.