Ingen opplasting, 100% lokalt, ingen konto

Bilde → Base64-konverterer

Koder et bilde til en Base64-data-URI, eller lim inn en data-URI for å dekode den tilbake til et bilde. Kopier resultatet eller ta CSS url()-fragmentet. Ingenting forlater enheten din.

Slik fungerer Bilde til Base64

Bilde til Base64 leser bildefilen din og koder den som en Base64-data-URI som du kan bygge direkte inn i HTML, CSS eller JSON uten å trenge en separat filforespørsel. Konverteringen bruker FileReader API i nettleseren din; ingen byte fra bildet ditt sendes til en server. Du kan også lime inn en Base64-streng for å dekode den og forhåndsvise bildet, alt lokalt.

En Base64-data-URI er omtrent 33% større enn den binære originalen fordi hver gruppe med tre byte utvides til fire ASCII-tegn. Denne størrelsesøkingen er den forventede avveiningen for bekvemmeligheten av å bygge inn et bilde i et dokument eller stilark. Verktøyet viser deg både den rå Base64-strengen og et klart-til-bruk HTML img-tag-utdrag og et CSS background-image-utdrag for rask kopiering og innliming i prosjektet ditt.

Skrevet av Bastien Sulyan

Slik bruker du Bilde til Base64, steg for steg

  1. Slipp en bildefil på opplastingsområdet eller klikk for å bla gjennom. Godkjente formater: JPEG, PNG, WebP, GIF, SVG.
  2. Base64-data-URIen vises umiddelbart i utdatafeltet.
  3. Kopier den rå Base64-strengen, eller bruk det forhåndsformaterte HTML img-tagget eller CSS background-image-utdraget.
  4. For dekoding, lim inn en Base64-streng i inndatafeltet og bytt til demodusmodus for å forhåndsvise bildet.
  5. Klikk kopieringsknappen ved siden av et utdrag for å kopiere det til utklippstavlen.

Vanlige bruksområder

  • En frontend-utvikler bygger inn et lite ikon som en data-URI i en CSS-fil for å eliminere en ekstra HTTP-forespørsel.
  • En utvikler bygger inn en liten lastespinner som et Base64 src-attributt slik at plassholderbildet er tilgjengelig før JavaScript-pakken lastes.
  • En QA-ingeniør kopierer Base64 for et testbilde for å lime det direkte inn i en JSON-nyttelast for en API-test.
  • En e-postmalbygger bygger inn en signaturlogo som en Base64-data-URI fordi noen e-postklienter blokkerer eksterne bildeforespørsler.

Ofte stilte spørsmål

Hvorfor er Base64-utdata omtrent en tredjedel større enn den originale filen?

Base64-koding representerer hver tre binære byte som fire ASCII-tegn (et 4/3-forhold). Et bilde som er 100 KB i binær form blir omtrent 133 KB som en Base64-streng. Dette er iboende til kodingsskjemaet, ikke en verktøybegrensning.

Overføres bildeinnholdet til en server under koding?

Nei. FileReader API leser den binære filen fra din lokale disk og sender resultatet direkte til JavaScript-koderingsfunksjonen inne i nettleserfanen din. Bildedataene forlater ikke enheten din.

Kan jeg bruke data-URI-utdata i en hvilken som helst HTML- eller CSS-kontekst?

Ja. En data-URI som starter med data:image/jpeg;base64, etterfulgt av den kodede strengen, kan brukes som src-attributtet til et img-tag eller som url()-verdien i en CSS background-image-egenskap. Alle moderne nettlesere støtter data-URIer. Svært store data-URIer kan bremse siderendering, så innbygging er vanligvis forbeholdt små bilder under noen få kilobyte.

Støtter verktøyet animerte GIF-er?

Verktøyet koder det fullstendige binære innholdet i en hvilken som helst fil du gir, inkludert animerte GIF-er. Den resulterende data-URIen, når den brukes som src for et img-tag, vil spille av animasjonen i nettlesere som støtter GIF-animasjon.

Hvordan går jeg den andre veien og dekoder en Base64-streng tilbake til et bilde?

Bytt verktøyet til demodusmodus, lim inn Base64-strengen din (med eller uten data:-prefikset), og verktøyet vil dekode den og tilby det binære bildet som en nedlasting samt vise en forhåndsvisning.