Så använder du verktyget
- Välj Text och skriv texten, eller välj Fil och öppna filen som du vill bädda in.
- Kontrollera eller ange MIME-typen, till exempel image/png eller image/svg+xml, och välj Base64 eller Procentkodning under Kodning.
- Kopiera den genererade data URI:n till din HTML, CSS eller JSON.
- Vill du granska en befintlig data URI väljer du Tolka och klistrar in den. Då ser du MIME-typ, teckenuppsättning, storlek och en förhandsvisning, och kan ladda ned den inbäddade filen.
Syntax för data URI
En data URI, som definieras i RFC 2397, bär en liten fil inuti själva URL:en:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...Mediatypen talar om för webbläsaren hur datan ska tolkas; om den utelämnas antas text/plain;charset=US-ASCII. Flaggan ;base64 betyder att delen efter kommatecknet är Base64. Utan den är datan vanlig text där specialtecken är procentkodade.
Base64 eller procentkodning
Base64 är rätt val för binärfiler som PNG, JPEG, WebP, typsnitt och PDF:er. Det lägger alltid till ungefär 33 %. För textformat blir procentkodning ofta mindre, eftersom de flesta tecken förblir som de är och bara ett fåtal, till exempel <, >, #, % och dubbla citattecken, behöver kodas. Därför passar den bra för SVG-ikoner, och det läsbara resultatet komprimeras dessutom bättre med gzip eller Brotli. Varje byte av text utanför ASCII blir däremot tre tecken, så för kinesisk eller kyrillisk text är Base64 oftast kortare. Är du osäker kan du prova båda alternativen och behålla det kortaste resultatet.
/* Procentkodad SVG i CSS: enkla citattecken inuti, # skrivs 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 inbäddning lönar sig
En data URI sparar ett HTTP-anrop, men datan blir en del av dokumentet som innehåller den:
- Ingen separat cachning. En bild som bäddats in i HTML laddas ned på nytt med varje sida. En bild som bäddats in i en formatmall cachas tillsammans med den filen, och om bilden ändras blir hela formatmallen ogiltig i cachen.
- Långsammare första rendering. Stora data URI:er i CSS fördröjer renderingen, eftersom webbläsaren först måste ladda ned och tolka hela formatmallen.
- Större storlek. Base64 lägger till en tredjedel, som bara delvis vinns tillbaka när HTML- eller CSS-filen komprimeras.
Med HTTP/2 och HTTP/3 är extra anrop billiga, så bädda bara in små resurser på några kilobyte, till exempel ikoner, små platshållare eller en kritisk bakgrund, och leverera allt annat som vanliga filer. Webbplatser med Content Security Policy måste tillåta data: i img-src eller font-src för att inbäddade bilder och typsnitt ska kunna laddas.
Vanliga frågor
Finns det en storleksgräns för data URI:er?
RFC 2397 anger ingen gräns, och moderna webbläsare accepterar data URI:er på flera megabyte i bilder och formatmallar. Stora data URI:er är ändå en dålig idé: de blåser upp sidan, kan inte cachas separat och tar längre tid att tolka.
Varför öppnas inte en data URI när jag klickar på en länk till den?
De flesta webbläsare hindrar webbsidor från att navigera huvudfönstret till en data:-URL, som skydd mot nätfiske. Använd data URI:er i bilder, CSS eller nedladdningslänkar, eller klistra in URI:n i tolkaren här för att förhandsvisa den och ladda ned innehållet.
Hur använder jag en data URI i HTML och CSS?
<img src="data:image/png;base64,..."> i HTML eller background-image: url("data:image/svg+xml,...") i CSS. Sätt värdet inom citattecken i CSS, särskilt för procentkodad SVG.Måste jag ange en teckenuppsättning?
text/plain eller text/html som innehåller tecken utanför ASCII, ja: lägg till ;charset=UTF-8 efter mediatypen, annars kan standardvärdet US-ASCII förvanska dem. Binära typer som image/png behöver ingen teckenuppsättning.