Slik bruker du verktøyet
- Skriv inn teksten eller velg filen du vil bygge inn.
- Kontroller eller skriv inn MIME-typen, for eksempel image/png eller image/svg+xml, og velg Base64 eller Prosentkoding under Koding.
- Kopier den genererte data URI-en inn i HTML, CSS eller JSON.
- Vil du undersøke en eksisterende data URI, limer du den inn under Analyser for å se MIME-type, tegnsett, størrelse og en forhåndsvisning, og du kan laste ned den innebygde filen.
Syntaks for data URI
En data URI, definert i RFC 2397, bærer en liten fil inne i selve URL-en:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Medietypen forteller nettleseren hvordan dataene skal tolkes. Hvis den utelates, antas text/plain;charset=US-ASCII. Flagget ;base64 betyr at delen etter kommaet er Base64. Uten det er dataene ren tekst der spesialtegn er prosentkodet.
Base64 eller prosentkoding
Base64 er riktig valg for binære filer som PNG, JPEG, WebP, skrifter og PDF-er. Det legger alltid til omtrent 33 %. For tekstformater gir prosentkoding ofte et mindre resultat, fordi de fleste tegn forblir som de er og bare noen få, som <, >, #, % og doble anførselstegn, må kodes. Det gjør prosentkoding godt egnet for SVG-ikoner, og det lesbare resultatet komprimeres også bedre med gzip eller Brotli. Hver byte med ikke-ASCII-tekst blir imidlertid til tre tegn, så for kinesisk eller kyrillisk tekst er Base64 vanligvis kortere. Er du usikker, prøver du begge alternativene og beholder det korteste resultatet.
/* Prosentkodet SVG i CSS: enkle anførselstegn inni, # skrevet som %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"); }Når det lønner seg å bygge inn
En data URI sparer en HTTP-forespørsel, men dataene blir en del av dokumentet som inneholder dem:
- Ingen separat hurtigbufring. Et bilde som er bygd inn i HTML, lastes ned på nytt med hver side. Et bilde som er bygd inn i et stilark, bufres sammen med den filen, og endrer du bildet, må hele stilarket hentes på nytt.
- Tregere første visning. Store data URI-er i CSS forsinker gjengivelsen, fordi nettleseren først må laste ned og tolke hele stilarket.
- Økt størrelse. Base64 legger til en tredjedel, og bare en del av dette hentes inn igjen når HTML eller CSS komprimeres.
Med HTTP/2 og HTTP/3 er ekstra forespørsler billige, så bygg bare inn små ressurser på noen få kilobyte, for eksempel ikoner, små plassholdere eller en kritisk bakgrunn, og lever alt annet som vanlige filer. Nettsteder med Content Security Policy må tillate data: i img-src eller font-src for at innebygde bilder og skrifter skal lastes inn.
Ofte stilte spørsmål
Finnes det en størrelsesgrense for data URI-er?
RFC 2397 setter ingen grense, og moderne nettlesere godtar data URI-er på flere megabyte i bilder og stilark. Store data URI-er er likevel en dårlig idé: de gjør siden tyngre, kan ikke bufres separat og tar lengre tid å tolke.
Hvorfor åpnes ikke en data URI når jeg klikker på en lenke til den?
De fleste nettlesere hindrer nettsider i å navigere hovedvinduet til en data:-URL, som beskyttelse mot phishing. Bruk data URI-er i bilder, CSS eller nedlastingslenker, eller lim inn URI-en i parseren her for å forhåndsvise den og laste ned innholdet.
Hvordan bruker jeg en data URI i HTML og CSS?
<img src="data:image/png;base64,..."> i HTML eller background-image: url("data:image/svg+xml,...") i CSS. Sett verdien i anførselstegn i CSS, særlig for prosentkodet SVG.Må jeg angi et tegnsett?
text/plain eller text/html som inneholder ikke-ASCII-tegn: ja. Legg til ;charset=UTF-8 etter medietypen, ellers kan standardverdien US-ASCII forvrenge dem. Binære typer som image/png trenger ikke tegnsett.