Zo gebruik je het
- Sleep een PNG naar het sleepvak, klik om er een te kiezen of plak een screenshot uit het klembord.
- Laat het formaat ongewijzigd om de originele PNG-bytes te coderen, of stel een Max. breedte in om een grote afbeelding te verkleinen.
- Vergelijk de originele grootte met de gecodeerde grootte die bij de afbeelding wordt getoond.
- Kopieer of download de uitvoer als data-URI, kale Base64, img-tag, CSS of Markdown.
PNG en Base64
PNG (Portable Network Graphics, MIME-type image/png) is een verliesvrij rasterformaat met een volledig alfakanaal, en daarom de gebruikelijke keuze voor pictogrammen, logo's, diagrammen en screenshots. Elk PNG-bestand begint met dezelfde handtekening van 8 bytes, dus elke PNG-data-URI begint op dezelfde manier: data:image/png;base64,iVBORw0KGgo....
Base64 laat de pixels ongemoeid. Wie de string decodeert, krijgt een bestand terug dat byte voor byte identiek is, met dezelfde kleuren en dezelfde transparante gebieden.
Goede toepassingen voor PNG-data-URI's
- Kleine interfacepictogrammen en logo's die een transparante achtergrond nodig hebben.
- Screenshots in zelfstandige HTML-rapporten, bugrapporten of geëxporteerde documentatie.
- Grafieken en QR-codes die op een server worden gegenereerd en in een JSON-antwoord worden teruggestuurd.
- Afbeeldingen die met
canvas.toDataURL()zijn gemaakt; die functie levert standaard al PNG-data-URI's op.
Foto's zijn een ander verhaal. PNG slaat ze verliesvrij op en de bestanden worden groot; JPEG of WebP levert een veel kortere string op.
Maak de PNG kleiner vóór het coderen
Elke byte die je uit de PNG haalt, scheelt ongeveer 1,33 tekens Base64. Haal het bestand eerst door een optimalisatietool zoals oxipng of zopflipng (verliesvrij) of pngquant (verkleint het palet). Controleer ook de afmetingen in pixels: een pictogram dat op drie keer de weergavegrootte is geëxporteerd, kun je meestal verkleinen met de optie Max. breedte.
Converteren naar WebP behoudt de transparantie en levert vaak een veel kleiner bestand op. Converteren naar JPEG verwijdert de transparantie, waardoor transparante gebieden een effen kleur krijgen. Opnieuw coderen naar PNG in de browser optimaliseert de compressie niet, dus het resultaat kan groter zijn dan een goed geoptimaliseerd origineel; vergelijk de groottes voordat je kopieert.
De uitvoer gebruiken
<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;
}
# Opdrachtregel: GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngVeelgestelde vragen
Blijft de transparantie van een PNG behouden met Base64?
Ja. Base64 codeert de bytes van het bestand ongewijzigd, dus het alfakanaal blijft behouden. Transparantie gaat alleen verloren als je de afbeelding naar JPEG converteert.
Waarom begint elke PNG-Base64-string met iVBORw0KGgo?
Die tekens zijn de Base64-vorm van de bestandshandtekening van PNG. Begint een string die een PNG zou moeten zijn anders, dan gaat het om een ander formaat of is de string beschadigd.
Kan ik een screenshot direct plakken?
data:image/png.Hoe groot mag een PNG zijn die ik als Base64 insluit?
Een gangbare vuistregel is een paar kilobyte, tot ongeveer 10 KB. Grotere afbeeldingen kun je beter als aparte bestanden aanbieden die de browser kan cachen en parallel kan laden.