CodeKitHubHva er dette verktøyet?
Base64 er en måte å representere binærdata — som et bildes rå bytes — som ren tekst, ved å bruke bare bokstaver, tall og noen få symboler. Fordi det er ren tekst, kan et Base64-kodet bilde limes direkte inn i HTML, CSS eller JSON i stedet for å bli referert som en separat fil.
En «data-URL» pakker den Base64-teksten med et lite prefiks (data:image/png;base64,) som forteller nettleseren hva slags fil det er, slik at den kan slippes rett inn i et src- eller url()-attributt og gjengis uten noen ekstra forespørsel.
Hvorfor bruke det?
- Få begge formatene på én gang — hele data-URL-en for HTML/CSS, og rå Base64 (uten prefiks) for innlemming i JSON eller konfigfiler.
- Ingen server-tur-retur: eliminerer én HTTP-forespørsel for små ikoner, avatarer eller innebygde bilder.
- Bevarer de originale filbytene nøyaktig — ingen ny koding eller kvalitetstap, i motsetning til verktøy som avkoder og lagrer bildet på nytt.
- Viser størrelsesforskjellen slik at du vet hva du bytter bort mot bekvemmeligheten.
- Privat: filen leses lokalt med nettleserens FileReader-API og forlater aldri enheten din.
Slik bruker du det
- Klikk på opplastingsområdet eller dra en bildefil på det.
- Kopier hele data-URL-en hvis du limer inn i en <img src> eller CSS background-image.
- Kopier rå Base64 (uten data:-prefiks) hvis du legger verdien inn i JSON, YAML eller et annet konfigformat som allerede vet filtypen.
- Sjekk størrelsesnotatet — Base64-tekst er omtrent en tredjedel større enn den originale binærfilen.
Eksempel
Inndata
En 12 KB PNG-ikonfil.Resultat
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB tekst) pluss den samme strengen uten data:-prefikset.Økningen på ~33 % i størrelse er iboende i Base64-koding (3 bytes binærdata blir 4 tegn tekst) — det er ikke en feil i verktøyet.
Hvor hvert format brukes
| Format | Typisk bruk |
|---|---|
| Hele data-URL-en | HTML <img src="...">, CSS background-image: url(...), innebygde e-postbilder |
| Rå Base64 | JSON API-nyttelaster, YAML/konfigfiler, database-BLOB-felt, egendefinerte binærprotokoller |
Base64 og bildestørrelse — avveiningen i praksis
Overheaden på ~33 % betyr at Base64-innlemming best beholdes for små ressurser: et 2 KB-ikon blir en harmløs ~2,7 KB innebygd tekst, men et 500 KB-bilde blir ~665 KB tekst som ligger inline i HTML-en din, noe som bremser parsing og ikke kan caches separat fra siden.
Hvis du legger inn mange bilder eller større bilder, vei fordelen av én spart forespørsel opp mot kostnaden for sidevekt — og vurder å komprimere først.
Ofte stilte spørsmål
Hvorfor er Base64-strengen så mye større enn bildefilen min?
Base64 koder hver 3 bytes binærdata som 4 tegn tekst, noe som er en fast overhead på ~33 %. For et 100 KB-bilde, forvent omtrent 133 KB Base64-tekst. Dette er normalt og uunngåelig — det er prisen for å representere binærdata som trygg, portabel tekst.
Hva er forskjellen mellom data-URL-en og den rå Base64-strengen?
Data-URL-en inkluderer et data:image/png;base64,-prefiks som forteller en nettleser eller renderer hvilken MIME-type teksten som følger avkodes til. Lim hele data-URL-en inn i en HTML src eller CSS url(). Rå Base64 (alt etter kommaet) er det du vil ha når et system allerede vet filtypen separat — for eksempel et JSON-felt som { "format": "png", "data": "<rå base64>" }.
Når bør jeg legge inn et bilde som Base64 i stedet for å lenke til en fil?
Base64-innlemming er nyttig for små, ofte gjenbrukte bilder (ikoner, logoer, små UI-grafikker) der å spare én HTTP-forespørsel oppveier ~33 % størrelsesstraff, eller i sammenhenger der en separat fil ikke er praktisk, som innebygde e-poster eller ett-fil HTML-eksporter. For store bilder eller noe som gjenbrukes på mange sider er en vanlig lenket fil med nettleser-caching nesten alltid bedre.
Endrer eller komprimerer konvertering til Base64 bildet mitt?
Nei. Base64 er en tapsfri tekstkoding av de eksakte originale bytene — den rører ikke piksler, oppløsning eller komprimering. Hvis du vil ha en mindre fil, komprimer bildet først med en bildekomprimering, og konverter deretter det komprimerte resultatet til Base64.
Blir bildet mitt lastet opp noe sted?
Nei. Filen leses direkte i nettleseren din med FileReader-API-et og kodes lokalt — den sendes aldri over nettverket.