Sådan bruger du det
- Vælg Billede → Base64 og vælg en billedfil, eller vælg Base64 → Billede for at gøre det omvendt.
- Vælg det output, du har brug for: data-URL, ren Base64, et HTML img-tag, en CSS background-image-regel eller Markdown.
- Kopier resultatet, og sæt det ind i din kode, e-mail-skabelon eller JSON.
- For at afkode skal du indsætte en data-URL eller ren Base64; billedet forhåndsvises og kan downloades.
Sådan fungerer det
Base64 repræsenterer binære data med 64 printbare tegn, så et billede kan skrives direkte ind i tekstformater. En data-URL tilføjer medietypen foran, f.eks. data:image/png;base64, efterfulgt af de kodede bytes. Browsere accepterer data-URL'er overalt, hvor en billed-URL er tilladt: i src på et img-tag, i en CSS url() eller i en SVG-billedreference.
Den kodede tekst er altid cirka en tredjedel større end den oprindelige fil (4 tegn for hver 3 byte). At indlejre små ikoner og pladsholdere kan spare en separat netværksanmodning, men indlejrede data kan ikke cachelagres selvstændigt og downloades igen med hver side eller hvert stylesheet, der indeholder dem, så det sjældent kan betale sig over nogle få kilobyte. Mange e-mailklienter blokerer eller fjerner data-URL-billeder, så test dem, før du bruger dem i nyhedsbreve.
Filen kodes byte for byte: intet komprimeres igen, og metadata i filen (såsom EXIF) bevares. Ved afkodning accepterer værktøjet en fuld data-URL, almindelig Base64, URL-sikker Base64 og tekst, der er kopieret sammen med en CSS url(…)-wrapper. Billedtypen registreres ud fra de afkodede bytes frem for at stole på etiketten.
Eksempler
Lille ikon i et stylesheet
Et PNG-ikon på 600 byte bliver til en Base64-streng på 800 tegn. Med CSS-outputtet får du en background-image-regel, som du kan indsætte i en klasse uden at hoste en separat fil.
Billede fra et API-svar
En API returnerer et JSON-felt som f.eks. "iVBORw0KGgoAAAANSUhEUg…". Indsæt det i Base64 → Billede for at se billedet, tjekke størrelsen og downloade det som PNG.
SVG-logo i HTML
Kodning af en SVG giver en data:image/svg+xml;base64-URL, der fungerer i et img-tag. For SVG er selve SVG-markeringen ofte kortere end Base64, så overvej at indlejre SVG'en direkte.
Ofte stillede spørgsmål
Hvorfor er Base64-versionen større end mit billede?
Base64 bruger 4 teksttegn til at gemme 3 bytes, hvilket tilføjer ca. 33 % plus lidt til data-URL-præfikset. Gzip- eller Brotli-komprimering på en webserver mindsker forskellen, men fjerner den ikke.
Ændrer eller komprimerer kodningen billedet?
Nej. Filens nøjagtige bytes bliver kodet, inklusive eventuelle metadata. For at gøre strengen kortere skal du først komprimere eller ændre størrelsen på billedet.
Hvad er forskellen på en data-URL og ren Base64?
Ren Base64 er blot de kodede bytes. En data-URL tilføjer et præfiks som data:image/jpeg;base64, som fortæller browseren, hvilken type fil det er, så den kan bruges direkte som billedkilde.
Er der en størrelsesgrænse?
Filer på op til 10 MB kan kodes her. Meget lange strenge kan gøre tekstfelter og editorer langsomme, og så store data-URL'er er ikke praktiske på websteder.
Privatliv
Kodning og afkodning foregår i din browser. Dit billede og Base64-teksten bliver ikke uploadet, gemt eller inkluderet i analyser.