CodeKitHubHvad er dette værktøj?
Base64 er en måde at repræsentere binære data — som et billedes rå bytes — som almindelig tekst, ved brug af kun bogstaver, tal og enkelte symboler. Fordi det er almindelig tekst, kan et Base64-kodet billede indlejres direkte i HTML, CSS eller JSON i stedet for at blive henvist til som en separat fil.
En "data-URL" pakker den Base64-tekst ind med et lille præfiks (data:image/png;base64,), der fortæller browseren, hvilken filtype der er tale om, så den kan sættes direkte ind i et src- eller url()-attribut og vises uden yderligere forespørgsel.
Hvorfor bruge det?
- Få begge formater på én gang — den fulde data-URL til HTML/CSS og den rå Base64 (uden præfiks) til indlejring i JSON eller konfigurationsfiler.
- Ingen server-tur: eliminerer en HTTP-forespørgsel for små ikoner, avatarer eller indlejrede billeder.
- Bevarer de originale filbytes præcist — ingen genkodning eller kvalitetstab, i modsætning til værktøjer der afkoder og gemmer billedet igen.
- Viser størrelsesforskellen, så du ved, hvad du bytter for bekvemmeligheden.
- Privat: filen læses lokalt med browserens FileReader API og forlader aldrig din enhed.
Sådan bruger du det
- Klik på upload-området, eller træk en billedfil hen på det.
- Kopiér den fulde data-URL, hvis du indsætter den i en <img src> eller CSS background-image.
- Kopiér den rå Base64 (uden data:-præfiks), hvis du indlejrer værdien i JSON, YAML eller et andet konfigurationsformat, der allerede kender filtypen.
- Tjek størrelsesnoten — Base64-tekst er omkring en tredjedel større end den oprindelige binære fil.
Eksempel
Input
En 12 KB PNG-ikonfil.Output
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB tekst) plus den samme streng uden data:-præfikset.Den ~33% større størrelse er en iboende egenskab ved Base64-kodning (3 bytes binært bliver til 4 tegn tekst) — det er ikke en fejl i værktøjet.
Hvor hvert format bruges
| Format | Typisk brug |
|---|---|
| Fuld data-URL | HTML <img src="...">, CSS background-image: url(...), indlejrede billeder i e-mails |
| Rå Base64 | JSON API-payloads, YAML/konfigurationsfiler, database-BLOB-felter, brugerdefinerede binærprotokoller |
Base64 og billedstørrelse — afvejningen i praksis
De ~33% overhead betyder, at Base64-indlejring bedst egner sig til små filer: et 2 KB-ikon bliver til harmløse ~2,7 KB indlejret tekst, men et 500 KB-foto bliver til ~665 KB tekst siddende inde i din HTML, hvilket sinker parsing og ikke kan caches separat fra siden.
Hvis du indlejrer mange billeder eller større billeder, skal du veje besparelsen på én forespørgsel op mod den ekstra sidevægt — og overveje at komprimere først.
Ofte stillede spørgsmål
Hvorfor er Base64-strengen så meget større end min billedfil?
Base64 koder hver 3 bytes binære data som 4 tekst-tegn, hvilket er en fast overhead på ~33%. For et 100 KB billede kan du forvente omkring 133 KB Base64-tekst. Det er normalt og uundgåeligt — det er prisen for at repræsentere binære data som sikker, transportabel tekst.
Hvad er forskellen på data-URL'en og den rå Base64-streng?
Data-URL'en inkluderer et præfiks data:image/png;base64,, der fortæller en browser eller renderer, hvilken MIME-type den følgende tekst afkoder til. Indsæt den fulde data-URL i en HTML src eller CSS url(). Den rå Base64 (alt efter kommaet) er det, du vil bruge, når et system allerede kender filtypen separat — for eksempel et JSON-felt som { "format": "png", "data": "<rå base64>" }.
Hvornår bør jeg indlejre et billede som Base64 i stedet for at linke til en fil?
Base64-indlejring er nyttig til små, ofte genbrugte billeder (ikoner, logoer, små UI-grafikker), hvor det at spare én HTTP-forespørgsel opvejer ~33% størrelsestillægget, eller i sammenhænge hvor en separat fil ikke er praktisk, som indlejrede e-mails eller enkeltfils-HTML-eksporter. For store fotos eller alt der genbruges på tværs af mange sider, er en almindelig linket fil med browser-caching næsten altid bedre.
Ændrer eller komprimerer konvertering til Base64 mit billede?
Nej. Base64 er en tabsfri tekstkodning af de præcis oprindelige bytes — den rører hverken pixels, opløsning eller komprimering. Hvis du vil have en mindre fil, skal du komprimere billedet først med en billedkomprimering og derefter konvertere det komprimerede resultat til Base64.
Bliver mit billede uploadet nogen steder?
Nej. Filen læses direkte i din browser med FileReader API'et og kodes lokalt — den bliver aldrig sendt over netværket.