Sådan bruger du værktøjet
- Vælg Tekst eller Fil under Kilde, og skriv teksten, eller vælg den fil, du vil indlejre.
- Kontrollér eller angiv MIME-typen, for eksempel image/png eller image/svg+xml, og vælg Base64 eller Procentkodning under Kodning.
- Kopiér den genererede data URI ind i din HTML, CSS eller JSON.
- Vil du undersøge en eksisterende data URI, så indsæt den under Fortolk for at se MIME-type, tegnsæt, størrelse og en forhåndsvisning, og download den indlejrede fil.
Syntaks for data URI'er
En data URI, defineret i RFC 2397, indeholder en lille fil direkte i selve URL'en:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Medietypen fortæller browseren, hvordan dataene skal fortolkes. Udelades den, antages text/plain;charset=US-ASCII. Flaget ;base64 betyder, at delen efter kommaet er Base64. Uden det er dataene almindelig tekst, hvor specialtegn er procentkodede.
Base64 eller procentkodning
Base64 er det rigtige valg til binære filer som PNG, JPEG, WebP, skrifttyper og PDF'er. Det lægger altid cirka 33 % til. Til tekstformater giver procentkodning ofte et mindre resultat, fordi de fleste tegn forbliver uændrede, og kun nogle få, for eksempel <, >, #, % og dobbelte anførselstegn, skal escapes. Det gør procentkodning velegnet til SVG-ikoner, og det læsbare resultat komprimeres også bedre med gzip eller Brotli. Hver byte i ikke-ASCII-tekst bliver dog til tre tegn, så til kinesisk eller kyrillisk tekst er Base64 som regel kortere. Er du i tvivl, så prøv begge muligheder, og behold det korteste resultat.
/* Procentkodet SVG i CSS: enkelte anførselstegn indeni, # 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"); }Hvornår indlejring betaler sig
En data URI sparer en HTTP-anmodning, men dataene bliver en del af det dokument, der indeholder dem:
- Ingen separat caching. Et billede, der er indlejret i HTML, downloades igen med hver side. Et billede, der er indlejret i et stylesheet, caches sammen med den fil, og ændrer du det, bliver hele stylesheetet ugyldigt i cachen.
- Langsommere første gengivelse. Store data URI'er i CSS forsinker gengivelsen, fordi browseren først skal downloade og fortolke hele stylesheetet.
- Ekstra størrelse. Base64 lægger en tredjedel til, og kun en del af det vindes tilbage ved at komprimere HTML eller CSS.
Med HTTP/2 og HTTP/3 er ekstra anmodninger billige, så indlejr kun små ressourcer på nogle få kilobyte, for eksempel ikoner, små pladsholdere eller en kritisk baggrund, og lever alt andet som almindelige filer. Websites med en Content Security Policy skal tillade data: i img-src eller font-src, for at indlejrede billeder og skrifttyper kan indlæses.
Ofte stillede spørgsmål
Er der en størrelsesgrænse for data URI'er?
RFC 2397 fastsætter ingen grænse, og moderne browsere accepterer data URI'er på flere megabyte i billeder og stylesheets. Store data URI'er er alligevel en dårlig idé: De gør siden tungere, kan ikke caches separat og tager længere tid at fortolke.
Hvorfor åbner en data URI ikke, når jeg klikker på et link til den?
De fleste browsere forhindrer websider i at navigere hovedvinduet til en data:-URL som beskyttelse mod phishing. Brug data URI'er i billeder, CSS eller downloadlinks, eller indsæt URI'en under Fortolk her for at forhåndsvise den og downloade indholdet.
Hvordan bruger 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. Sæt værdien i anførselstegn i CSS, især ved procentkodet SVG.Skal jeg angive et tegnsæt?
text/plain eller text/html, der indeholder ikke-ASCII-tegn: Tilføj ;charset=UTF-8 efter medietypen, ellers kan standardværdien US-ASCII forvanske dem. Binære typer som image/png behøver intet tegnsæt.