Bild till Base64
Gör om vilken bild som helst till en Base64-data-URI för att bädda in den direkt i HTML eller CSS. Slå in den som en CSS-bakgrund om du vill och kopiera den sedan - allt görs i din webbläsare.
Loading…
Om verktyget Bild till Base64
Det här verktyget kodar en bild som en Base64-data-URI - en textsträng på formen data:image/png;base64,... som innehåller hela filen inbäddad. Eftersom bilden färdas som text kan du klistra in den direkt i HTML eller CSS och slippa en separat bildbegäran. Det är populärt för små ikoner, e-postsignaturer, demonstrationer i en enda fil och för att bunta ihop en liten resurs där en extra HTTP-rundtur inte är värd besväret.
Så använder du det
- Välj bilden du vill koda.
- Kopiera den genererade data-URI:n, eller använd omslaget CSS-bakgrund för att få en färdig
background-image-regel. - Klistra in den i
srcpå dinimg-tagg, i din stilmall eller i din markup.
En avvägning att känna till: Base64 gör datan ungefär 33 procent större än den ursprungliga binären, så det passar bäst för små bilder - stora filer sväller din HTML eller CSS och är oftast bättre att låta vara vanliga länkade filer som webbläsaren kan cacha. Inbäddade bilder laddas ner på nytt vid varje sidvisning istället för att cachas separat. Kodningen sker helt i din webbläsare, så bilden laddas aldrig upp till en server.
Vanliga frågor
Vad är en Base64-data-URI?
Det är en sträng som data:image/png;base64,iVBORw0... som bäddar in hela bilden som text. Webbläsare behandlar den som en fristående bildkälla, så ingen separat filbegäran behövs.
När bör jag bädda in en bild som Base64 istället för att länka den?
Inbäddning passar små resurser som ikoner eller en logotyp i en e-postsignatur, där det hjälper att slippa en extra begäran. För större eller återanvända bilder är en vanlig länkad fil bättre, eftersom webbläsaren kan cacha den.
Gör Base64 bilden större?
Ja. Base64-kodning lägger till ungefär 33 procent till storleken i byte jämfört med den råa binären, så det passar dåligt för stora bilder du bäddar in i HTML eller CSS.
Laddas bilden upp för att generera Base64-strängen?
Nej. Kodningen görs i din webbläsare, så filen stannar på din enhet och inget skickas till en server.