Data-URL's: data:text/html;base64 en verwanten uitgelegd
Data-URL's (data:-URI's)
Data-URI en data:text/html;base64 uitgelegd, met encoder | We.Inc
Hoe data:-URL's werken: de syntax, base64 vs percent-encoding, de groei met een derde, waarom data:text/html niet in een tabblad opent, plus een encoder en decoder.
Een data-URL bevat een volledig bestand in het adres zelf: data:, een optioneel mediatype, ;base64 als de bytes base64-gecodeerd zijn, een komma en dan de inhoud. data:text/html;base64,PGgxPkhpPC9oMT4= is een piepkleine webpagina. Base64 maakt de payload ongeveer een derde groter, en browsers weigeren data:-pagina's als top-level tabblad te openen.
Anatomie van een data-URL
Onderdeel
Voorbeeld
Opmerkingen
Schema
data:
Altijd als eerste
Mediatype
image/svg+xml
Optioneel; standaard text/plain;charset=US-ASCII
Parameters
;charset=utf-8
Optioneel, na het mediatype
Coderingsvlag
;base64
Alleen aanwezig als de data base64 is
Scheidingsteken
Verplicht, ook zonder mediatype
Data
PHN2Zz4uLi48L3N2Zz4=
Base64, of percent-gecodeerde tekst
Data-URL's zijn handig voor piepkleine iconen, CSS-achtergronden, testfixtures en gegenereerde downloads, en een veelvoorkomende bron van verwarring als iemand een lange data:text/html-string in de adresbalk plakt en er niets gebeurt. Hieronder kunt u elke tekst coderen tot een data-URL, er een terug decoderen, en precies zien wat het kost in bytes vergeleken met het origineel.
Typ of plak inhoud en kies het mediatype. De tool toont zowel de base64- als de percent-gecodeerde vorm, met hun lengtes.
Vergelijk de groottes. Base64 komt neer op ongeveer vier tekens per drie bytes; percent-encoding kan korter zijn voor platte tekst en SVG.
Plak een data-URL in de decoder om het mediatype, de codering en de inhoud te lezen. Afbeeldingstypen tonen een voorbeeld.
HTML-resultaten worden in een gesandboxt frame gerenderd, omdat een data:-pagina niet als eigen tabblad kan worden geopend.
Voor SVG in CSS is percent-encoding meestal kleiner dan base64 en blijft het leesbaar. Vergeet niet # te coderen als %23.
Zet alleen kleine bestanden inline. Een data-URL kan niet apart worden gecachet, dus een grote wordt opnieuw gedownload met elke pagina of stylesheet die hem bevat.
Zonder mediatype is de standaard text/plain;charset=US-ASCII, dus noem het type en voeg charset=utf-8 toe voor tekst met accenten of emoji.
Data-URL's ondersteunen geen query strings. Alles na de komma, ook een vraagteken, wordt als data behandeld.
Voor bestanden die de bezoeker in de pagina genereert, voorkomt een blob:-URL via URL.createObjectURL dat u een enorme string moet bouwen.
Veelgestelde vragen
Waarom opent data:text/html;base64 niet als ik het in de adresbalk plak?
Moderne browsers blokkeren top-level navigatie naar data:-URL's als maatregel tegen phishing, omdat een data-pagina elke site zou kunnen nabootsen terwijl de echte origin verborgen blijft. De inhoud werkt nog wel in een iframe, een img-element of als downloadlink.
Hoeveel groter maakt base64 een bestand?
Ongeveer een derde. Base64 schrijft elke drie bytes als vier tekens, dus een afbeelding van 30 KB wordt ongeveer 40 KB tekst vóór compressie. De precieze groei hangt af van de lengte en de padding.
Hoe maak ik van een base64-data-URL weer een afbeelding?
Plak hem in de decoder op deze pagina om een voorbeeld te zien, of zet hem direct in een img src. Om hem als bestand op te slaan, gebruikt u onze tool voor afbeelding naar base64 in omgekeerde richting, of haalt u de data-URL op in JavaScript en slaat u de resulterende Blob op.
Is er een limiet aan de grootte?
MDN noemt 512 MB voor Chromium en Firefox en 2,048 MB voor Safari. Lang daarvoor maken enorme data-URL's HTML en CSS al traag om te parsen en onmogelijk te cachen, dus houd ze bij een paar kilobytes.
Welke origin heeft een data-URL-pagina?
Een eigen, opaque origin, niet de origin van de pagina die hem maakte. Script in een data:-iframe wordt dus door de pagina eromheen als een vreemde behandeld, niet als onderdeel van dezelfde site.
Wanneer inlinen helpt en wanneer het schaadt
Inlinen bespaart een request, en dat telt voor een handvol piepkleine assets, zoals een laadspinner of een favicon in een demo van één bestand. Het schaadt als de asset groot is of op veel pagina's wordt gebruikt, omdat de bytes dan met elk HTML-bestand of stylesheet meereizen in plaats van één keer te worden gecachet.
Een redelijke vuistregel: zet dingen onder een paar kilobytes die één keer voorkomen inline, en link al het andere als gewoon bestand.
Base64 of percent-encoding?
Binaire bestanden zoals PNG, JPEG en fonts hebben base64 nodig. Tekstformaten, vooral SVG, kunnen percent-encoding gebruiken: alleen tekens als #, %, < en > en spaties moeten worden ge-escaped, dus het resultaat is vaak korter en blijft leesbaar voor mensen.
De encoder hieronder toont beide lengtes naast elkaar, zodat u voor uw eigen inhoud de kleinste kunt kiezen.
Veelgemaakte fouten
Een typfout in de base64, een verdwaald regeleinde of een verkeerd mediatype faalt zonder melding: de afbeelding verschijnt gewoon niet. Haal een kapotte string door de decoder om te zien waar het misgaat.
Een andere veelvoorkomende vergissing is de komma vergeten als er geen mediatype is. data:,Hello is geldig; data:Hello is geen bruikbare data-URL.
Data-URL's in echte code
SVG-achtergrond in CSS, percent-gecodeerd
Enkele quotes in de SVG voorkomen een botsing met de dubbele quotes rond url(), en de # van de kleur wordt geschreven als %23.
Een piepkleine inline afbeelding
Hetzelfde idee werkt in een img-tag. Behoud de alt-tekst, zoals bij elke afbeelding.
Een data-URL bouwen van een bestand in JavaScript
FileReader.readAsDataURL levert de volledige data:-string, inclusief mediatype, voor een bestand dat de bezoeker kiest.
Een data-URL weer omzetten in een Blob
fetch begrijpt data:-URL's, en dat is de kortste manier om de bytes er weer uit te halen.
Encoder en decoder voor data-URL's
Inhoud om te coderen
Mediatype
Base64-data-URL
Percent-gecodeerde data-URL
Origineel {n} bytes, base64-URL {v} tekens
Percent-gecodeerde URL {v} tekens
Gerenderd in een gesandboxt frame
Een data-URL decoderen
Plak een data-URL
Mediatype: {v}
Codering: {v}
Gedecodeerde grootte: {n} bytes
Dat lijkt geen geldige data-URL. Er is data: nodig, een optioneel type, een komma en de data.