Zo gebruik je het
- Typ de tekst of kies het bestand dat je wilt insluiten.
- Controleer of vul het MIME-type in, zoals image/png of image/svg+xml, en kies Base64 of Procentcodering.
- Kopieer de gegenereerde data-URI naar je HTML, CSS of JSON.
- Wil je een bestaande data-URI inspecteren, plak die dan bij Ontleden om het MIME-type, de tekenset, de grootte en een voorbeeld te zien, en download het ingesloten bestand.
Syntaxis van een data-URI
Een data-URI, gedefinieerd in RFC 2397, bevat een klein bestand in de URL zelf:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Het mediatype vertelt de browser hoe de gegevens moeten worden geïnterpreteerd; als het ontbreekt, wordt text/plain;charset=US-ASCII aangenomen. De vlag ;base64 betekent dat het deel na de komma Base64 is. Zonder die vlag zijn de gegevens platte tekst waarin speciale tekens procentgecodeerd zijn.
Base64 of procentcodering
Base64 is de juiste keuze voor binaire bestanden zoals PNG, JPEG, WebP, lettertypen en PDF's. Het voegt altijd ongeveer 33% toe. Voor tekstformaten is procentcodering vaak kleiner, omdat de meeste tekens blijven zoals ze zijn en alleen enkele, zoals <, >, #, % en dubbele aanhalingstekens, moeten worden geëscapet. Daardoor is het zeer geschikt voor SVG-pictogrammen, en het leesbare resultaat comprimeert ook beter met gzip of Brotli. Elke byte niet-ASCII-tekst wordt echter drie tekens, dus voor Chinese of Cyrillische tekst is Base64 meestal korter. Twijfel je, probeer dan beide opties en houd het kortste resultaat.
/* Procentgecodeerde SVG in CSS: enkele aanhalingstekens binnenin, # geschreven als %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Wanneer inline opnemen loont
Een data-URI bespaart een HTTP-verzoek, maar de gegevens worden onderdeel van het document waarin ze staan:
- Geen aparte caching. Een afbeelding die inline in HTML staat, wordt bij elke pagina opnieuw gedownload. Een afbeelding die inline in een stylesheet staat, wordt samen met dat bestand gecachet, en elke wijziging maakt de cache van de hele stylesheet ongeldig.
- Tragere eerste weergave. Grote data-URI's in CSS vertragen het renderen, omdat de browser eerst de hele stylesheet moet downloaden en verwerken.
- Extra grootte. Base64 voegt een derde toe, en compressie van de HTML of CSS wint dat maar gedeeltelijk terug.
Met HTTP/2 en HTTP/3 zijn extra verzoeken goedkoop, dus neem alleen kleine bestanden van enkele kilobytes inline op, zoals pictogrammen, kleine placeholders of een kritieke achtergrond, en lever al het andere als gewone bestanden. Sites met een Content Security Policy moeten data: toestaan in img-src of font-src, anders worden inline afbeeldingen en lettertypen niet geladen.
Veelgestelde vragen
Is er een maximale grootte voor data-URI's?
RFC 2397 stelt geen limiet, en moderne browsers accepteren data-URI's van meerdere megabytes in afbeeldingen en stylesheets. Grote data-URI's blijven toch een slecht idee: ze maken de pagina zwaarder, kunnen niet apart worden gecachet en kosten meer tijd om te verwerken.
Waarom opent een data-URI niet als ik op een link ernaartoe klik?
De meeste browsers voorkomen dat webpagina's het hoofdvenster naar een data:-URL laten navigeren, als bescherming tegen phishing. Gebruik data-URI's in afbeeldingen, CSS of downloadlinks, of plak de URI hier bij Ontleden om een voorbeeld te zien en de inhoud te downloaden.
Hoe gebruik ik een data-URI in HTML en CSS?
<img src="data:image/png;base64,..."> in HTML, of background-image: url("data:image/svg+xml,...") in CSS. Zet de waarde in CSS tussen aanhalingstekens, vooral bij procentgecodeerde SVG.Moet ik een tekenset opgeven?
text/plain of text/html met niet-ASCII-tekens wel: voeg ;charset=UTF-8 toe na het mediatype, anders kan de standaardwaarde US-ASCII die tekens verminken. Binaire typen zoals image/png hebben geen tekenset nodig.