CodeKitHubVad är detta verktyg?
Base64 är ett sätt att representera binär data — som en bilds råa byte — som vanlig text, med endast bokstäver, siffror och en handfull symboler. Eftersom det är vanlig text kan en Base64-kodad bild bäddas in direkt i HTML, CSS eller JSON istället för att refereras som en separat fil.
En "data-URL" omsluter denna Base64-text med ett litet prefix (data:image/png;base64,) som talar om för webbläsaren vilken filtyp det rör sig om, så att den kan släppas direkt in i ett src- eller url()-attribut och renderas utan extra förfrågan.
Varför använda det?
- Få båda formaten på en gång — den fullständiga data-URL:en för HTML/CSS och den rena Base64-strängen (utan prefix) för inbäddning i JSON eller konfigfiler.
- Ingen serverrundtur: eliminerar en HTTP-förfrågan för små ikoner, avatarer eller inbäddade bilder.
- Bevarar de ursprungliga filbytena exakt — ingen omkodning eller kvalitetsförlust, till skillnad från verktyg som avkodar och sparar om bilden.
- Visar storleksskillnaden så att du vet vad du byter bekvämlighet mot.
- Privat: filen läses lokalt med webbläsarens FileReader-API och lämnar aldrig din enhet.
Så använder du det
- Klicka på uppladdningsytan eller dra en bildfil till den.
- Kopiera den fullständiga data-URL:en om du klistrar in i en <img src> eller CSS background-image.
- Kopiera den rena Base64-strängen (utan data:-prefix) om du bäddar in värdet i JSON, YAML eller ett annat konfigformat som redan känner till filtypen.
- Kolla storleksnotisen — Base64-text är ungefär en tredjedel större än den ursprungliga binärfilen.
Exempel
Inmatning
En 12 KB PNG-ikonfil.Resultat
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB text) plus samma sträng utan data:-prefixet.Ökningen på ~33% är en inneboende egenskap hos Base64-kodning (3 byte binärdata blir 4 tecken text) — det är inte en bugg i verktyget.
Var respektive format används
| Format | Typisk användning |
|---|---|
| Fullständig data-URL | HTML <img src="...">, CSS background-image: url(...), inbäddade e-postbilder |
| Ren Base64 | JSON API-payloads, YAML/konfigfiler, databas-BLOB-fält, egna binärprotokoll |
Base64 och bildstorlek — avvägningen i praktiken
Overheaden på ~33% innebär att Base64-inbäddning är bäst lämpat för små tillgångar: en 2 KB-ikon blir en ofarlig ~2,7 KB inbäddad text, men ett 500 KB-foto blir ~665 KB text inbäddat i din HTML, vilket saktar ner parsningen och inte kan cachas separat från sidan.
Om du bäddar in många bilder eller större sådana, väg nyttan av en sparad förfrågan mot kostnaden i sidvikt — och överväg att komprimera först.
Vanliga frågor
Varför är Base64-strängen så mycket större än min bildfil?
Base64 kodar varje 3 byte binärdata som 4 texttecken, vilket ger en fast overhead på ~33%. För en 100 KB-bild kan du förvänta dig ungefär 133 KB Base64-text. Det här är normalt och oundvikligt — det är priset för att representera binärdata som säker, portabel text.
Vad är skillnaden mellan data-URL:en och den rena Base64-strängen?
Data-URL:en innehåller ett prefix data:image/png;base64, som talar om för en webbläsare eller renderare vilken MIME-typ texten avkodas till. Klistra in hela data-URL:en i en HTML src eller CSS url(). Den rena Base64-strängen (allt efter kommat) är vad du vill ha när ett system redan känner till filtypen separat — till exempel ett JSON-fält som { "format": "png", "data": "<ren base64>" }.
När ska jag bädda in en bild som Base64 istället för att länka till en fil?
Base64-inbäddning är användbart för små, ofta återanvända bilder (ikoner, logotyper, små UI-grafik) där man sparar in på en HTTP-förfrågan mot ~33% storleksökning, eller i sammanhang där en separat fil inte är praktisk, som inbäddade e-postbilder eller HTML-exporter i en enda fil. För stora foton eller sådant som återanvänds på många sidor är en vanlig länkad fil med webbläsarcache nästan alltid bättre.
Ändrar eller komprimerar Base64-konvertering min bild?
Nej. Base64 är en förlustfri textkodning av exakt de ursprungliga bytena — den rör inte pixlar, upplösning eller komprimering. Om du vill ha en mindre fil, komprimera bilden först med en bildkomprimerare och konvertera sedan det komprimerade resultatet till Base64.
Laddas min bild upp någonstans?
Nej. Filen läses direkt i din webbläsare med FileReader-API:et och kodas lokalt — den skickas aldrig över nätverket.