Slik bruker du verktøyet
- Slipp en PNG i slippfeltet, klikk for å velge en, eller lim inn et skjermbilde fra utklippstavlen.
- La formatet stå uendret for å kode de opprinnelige PNG-bytene, eller angi Maks. bredde for å gjøre et stort bilde mindre.
- Sammenlign den opprinnelige størrelsen med den kodede størrelsen som vises for bildet.
- Kopier eller last ned utdataene som data URI, ren Base64, img-tagg, CSS eller Markdown.
PNG og Base64
PNG (Portable Network Graphics, MIME-type image/png) er et tapsfritt rasterformat med full alfakanal, og derfor det vanlige valget for ikoner, logoer, diagrammer og skjermbilder. Alle PNG-filer begynner med den samme signaturen på 8 byte, så alle PNG-data URI-er begynner på samme måte: data:image/png;base64,iVBORw0KGgo....
Base64 rører ikke pikslene. Når strengen dekodes, får du tilbake en fil som er identisk byte for byte, med de samme fargene og de samme gjennomsiktige områdene.
Gode bruksområder for PNG-data URI-er
- Små ikoner og logoer i brukergrensesnitt som trenger gjennomsiktig bakgrunn.
- Skjermbilder i selvstendige HTML-rapporter, feilrapporter eller eksportert dokumentasjon.
- Diagrammer og QR-koder som genereres på en server og returneres i et JSON-svar.
- Bilder laget med
canvas.toDataURL(), som allerede lager PNG-data URI-er som standard.
Fotografier er en annen sak. PNG lagrer dem tapsfritt, og filene blir store; JPEG eller WebP gir en langt kortere streng.
Gjør PNG-filen mindre før koding
Hver byte du fjerner fra PNG-filen, sparer omtrent 1,33 Base64-tegn. Kjør filen gjennom et optimaliseringsverktøy som oxipng eller zopflipng (tapsfritt) eller pngquant (reduserer paletten) først. Sjekk også pikselstørrelsen: et ikon som er eksportert i tre ganger visningsstørrelsen, kan vanligvis skaleres ned med Maks. bredde.
Konvertering til WebP beholder gjennomsiktigheten og gir ofte en mye mindre fil. Konvertering til JPEG fjerner gjennomsiktigheten, så gjennomsiktige områder får en heldekkende farge. Når nettleseren koder bildet på nytt som PNG, optimaliseres ikke komprimeringen, så resultatet kan bli større enn en godt optimalisert original; sammenlign størrelsene før du kopierer.
Slik bruker du utdataene
<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 stilte spørsmål
Beholder Base64 gjennomsiktigheten i PNG?
Ja. Base64 koder filbytene uendret, så alfakanalen beholdes. Gjennomsiktigheten går bare tapt hvis du konverterer bildet til JPEG.
Hvorfor begynner alle PNG-strenger i Base64 med iVBORw0KGgo?
Disse tegnene er Base64-formen av PNG-filsignaturen. Hvis en streng som skal være en PNG, begynner annerledes, er det et annet format, eller så er den skadet.
Kan jeg lime inn et skjermbilde direkte?
data:image/png.Hvor stor PNG bør jeg bygge inn som Base64?
En vanlig tommelfingerregel er noen få kilobyte, opptil omtrent 10 KB. Større bilder bør heller leveres som separate filer som nettleseren kan hurtigbufre og laste inn parallelt.