Så använder du verktyget
- Släpp en PNG på släppytan, klicka för att välja en fil eller klistra in en skärmbild från urklipp.
- Låt Behåll original vara valt för att koda de ursprungliga PNG-bytena, eller ange en Maxbredd för att krympa en stor bild.
- Jämför originalstorleken med den kodade storleken som visas för bilden.
- Kopiera eller ladda ned resultatet som data URI, rå Base64, img-tagg, CSS eller Markdown.
PNG och Base64
PNG (Portable Network Graphics, MIME-typ image/png) är ett förlustfritt rasterformat med full alfakanal, vilket gör det till det vanliga valet för ikoner, logotyper, diagram och skärmbilder. Varje PNG-fil börjar med samma signatur på 8 byte, så varje PNG-data URI börjar likadant: data:image/png;base64,iVBORw0KGgo....
Base64 rör inte pixlarna. När strängen avkodas får du tillbaka en fil som är identisk byte för byte, med samma färger och samma transparenta områden.
Bra användningsområden för PNG som data URI
- Små ikoner och logotyper i gränssnitt som behöver transparent bakgrund.
- Skärmbilder i fristående HTML-rapporter, felrapporter eller exporterad dokumentation.
- Diagram och QR-koder som genereras på en server och returneras i ett JSON-svar.
- Bilder som skapas med
canvas.toDataURL(), som redan som standard ger data URI:er i PNG-format.
Foton är en annan sak. PNG lagrar dem förlustfritt och filerna blir stora; JPEG eller WebP ger en betydligt kortare sträng.
Gör PNG-filen mindre före kodningen
Varje byte du tar bort från PNG-filen sparar ungefär 1,33 tecken Base64. Kör först filen genom en optimerare som oxipng eller zopflipng (förlustfritt) eller pngquant (minskar färgpaletten). Kontrollera även pixelstorleken: en ikon som har exporterats i tre gånger visningsstorleken kan oftast skalas ned med inställningen Maxbredd.
Konvertering till WebP behåller transparensen och ger ofta en betydligt mindre fil. Konvertering till JPEG tar bort transparensen, så transparenta områden blir en enfärgad yta. Att koda om till PNG i webbläsaren optimerar inte komprimeringen, så resultatet kan bli större än ett väloptimerat original; jämför storlekarna innan du kopierar.
Så använder du resultatet
<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;
}
# Kommandorad: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngVanliga frågor
Behåller Base64 transparensen i PNG?
Ja. Base64 kodar filens byte oförändrade, så alfakanalen behålls. Transparensen försvinner bara om du konverterar bilden till JPEG.
Varför börjar alla PNG-strängar i Base64 med iVBORw0KGgo?
De tecknen är Base64-formen av PNG-filens signatur. Om en sträng som påstås vara en PNG börjar på något annat sätt är det ett annat format, eller så är den skadad.
Kan jag klistra in en skärmbild direkt?
data:image/png-resultat.Hur stor PNG bör jag bädda in som Base64?
En vanlig tumregel är några kilobyte, upp till ungefär 10 KB. Större bilder levereras hellre som separata filer som webbläsaren kan cacha och läsa in parallellt.