Slik bruker du det
- Velg Bilde → Base64 og velg en bildefil, eller velg Base64 → Bilde for å gå den andre veien.
- Velg resultatet du trenger: data-URL, vanlig Base64, en HTML img-tag, en CSS background-image-regel eller Markdown.
- Kopier resultatet og lim det inn i koden, e-postmalen eller JSON.
- For å dekode limer du inn en data-URL eller vanlig Base64; bildet forhåndsvises og kan lastes ned.
Slik fungerer det
Base64 representerer binære data med 64 utskrivbare tegn, slik at et bilde kan skrives direkte inn i tekstformater. En data-URL legger medietypen foran, for eksempel data:image/png;base64, etterfulgt av de kodede bytene. Nettlesere godtar data-URL-er overalt hvor en bilde-URL er tillatt: i src-attributtet til et img-element, i CSS url(), eller i en SVG-bildereferanse.
Den kodede teksten er alltid omtrent en tredjedel større enn den opprinnelige filen (4 tegn for hver 3 byte). Innebygging av små ikoner og plassholdere kan spare en separat nettverksforespørsel, men innebygde data kan ikke hurtigbufres alene og lastes ned på nytt med hver side eller stilark som inneholder dem, så det lønner seg sjelden for mer enn noen få kilobyte. Mange e-postklienter blokkerer eller fjerner data-URL-bilder, så test før du bruker dem i nyhetsbrev.
Filen kodes byte for byte: ingenting komprimeres på nytt, og metadata i filen (for eksempel EXIF) beholdes. Ved dekoding godtar verktøyet en full data-URL, vanlig Base64, URL-sikker Base64 og tekst kopiert sammen med en CSS url(…)-innpakning. Bildetypen oppdages ut fra de avkodede bytene i stedet for å stole på den oppgitte etiketten.
Eksempler
Lite ikon i et stilark
Et PNG-ikon på 600 byte blir en Base64-streng på 800 tegn. Ved å bruke CSS-resultatet får du en background-image-regel du kan lime inn i en klasse uten å måtte ha en separat fil.
Bilde fra et API-svar
En API returnerer et JSON-felt som "iVBORw0KGgoAAAANSUhEUg…". Lim det inn i Base64 → Bilde for å se bildet, sjekke størrelsen og laste det ned som PNG.
SVG-logo i HTML
Å kode en SVG gir en data:image/svg+xml;base64-URL som fungerer i en img-tag. For SVG er selve den ukomprimerte SVG-markeringen ofte kortere enn Base64, så vurder å sette inn SVG-en direkte.
Ofte stilte spørsmål
Hvorfor er Base64-versjonen større enn bildet mitt?
Base64 bruker 4 teksttegn for å lagre 3 byte, noe som legger til omtrent 33 % pluss litt for data-URL-prefikset. Gzip- eller Brotli-komprimering på en webserver reduserer forskjellen, men fjerner den ikke.
Endrer eller komprimerer kodingen bildet?
Nei. De nøyaktige bytene i filen kodes, inkludert all metadata. For å gjøre strengen kortere, komprimer eller endre størrelsen på bildet først.
Hva er forskjellen mellom en data-URL og vanlig Base64?
Vanlig Base64 er bare de kodede bytene. En data-URL legger til et prefiks som data:image/jpeg;base64, som forteller nettleseren hva slags fil det er, slik at den kan brukes direkte som bildekilde.
Er det en størrelsesgrense?
Filer opptil 10 MB kan kodes her. Svært lange strenger kan gjøre tekstfelt og editorer trege, og så store data-URL-er er ikke praktiske på nettsteder.
Personvern
Koding og dekoding skjer i nettleseren din. Bildet og Base64-teksten blir ikke lastet opp, lagret eller inkludert i analyse.