Ingen upload, 100% lokalt, ingen konto

Billede → Base64-konverter

Kodér et billede til en Base64 data-URI, eller indsæt en data-URI for at dekode den tilbage til et billede. Kopiér resultatet eller hent CSS url()-snippetten. Intet forlader din enhed.

Sådan virker Billede til Base64

Billede til Base64 læser din billedfil og koder den som en Base64-data-URI, som du kan indlejre direkte i HTML, CSS eller JSON uden at have brug for en separat filanmodning. Konverteringen bruger FileReader API i din browser; ingen bytes fra dit billede sendes til en server. Du kan også indsætte en Base64-streng tilbage for at dekode den og forhåndsvise billedet, alt lokalt.

En Base64-data-URI er ca. 33% større end det binære original, fordi hver gruppe af tre bytes udvides til fire ASCII-tegn. Denne størrelsesforøgelse er den forventede afvejning for bekvemmeligheden ved at indlejre et billede i et dokument eller stylesheet. Værktøjet viser dig både den rå Base64-streng og et klar-til-brug HTML img-tag-snippet og et CSS background-image-snippet til hurtig kopiering til dit projekt.

Skrevet af Bastien Sulyan

Sådan bruger du Billede til Base64, trin for trin

  1. Slip en billedfil på upload-området, eller klik for at browse. Understøttede formater: JPEG, PNG, WebP, GIF, SVG.
  2. Base64-data-URI vises øjeblikkeligt i outputfeltet.
  3. Kopier den rå Base64-streng, eller brug det forudformaterede HTML img-tag eller CSS background-image-snippet.
  4. For at dekode, indsæt en Base64-streng i inputfeltet og skift til dekode-tilstand for at forhåndsvise billedet.
  5. Klik på kopiknappen ved siden af et snippet for at kopiere det til udklipsholderen.

Almindelige anvendelser

  • En frontend-udvikler indlejrer et lille ikon som en data-URI i en CSS-fil for at eliminere en ekstra HTTP-anmodning.
  • En udvikler indlejrer en lille indlæsingsspinner som et Base64-src-attribut, så pladsholderbilledet er tilgængeligt, inden JavaScript-bundten indlæses.
  • En QA-ingeniør kopierer Base64-repræsentationen af et testbillede for at indsætte det direkte i en JSON-payload til en API-test.
  • En e-mail-skabelonbygger indlejrer et signaturlogo som en Base64-data-URI, fordi nogle e-mail-klienter blokerer eksterne billedanmodninger.

Ofte stillede spørgsmål

Hvorfor er Base64-outputtet ca. en tredjedel større end min originalfil?

Base64-kodning repræsenterer hver tre binære bytes som fire ASCII-tegn (et 4/3-forhold). Et billede på 100 KB i binær bliver ca. 133 KB som en Base64-streng. Dette er iboende i kodningsskemaet, ikke en begrænsning i værktøjet.

Overføres billedindholdet til en server under kodning?

Nej. FileReader API læser den binære fil fra din lokale disk og sender resultatet direkte til JavaScript-kodningsfunktionen inde i din browser-fane. Bildedataene forlader ikke din enhed.

Kan jeg bruge data-URI-outputtet i enhver HTML- eller CSS-kontekst?

Ja. En data-URI, der starter med data:image/jpeg;base64, efterfulgt af den kodede streng, kan bruges som src-attributten for et img-tag eller som url()-værdien i en CSS background-image-egenskab. Alle moderne browsere understøtter data-URI'er. Meget store data-URI'er kan forsinke sidegengive, så indlejring er typisk forbeholdt små billeder under nogle kilobytes.

Understøtter værktøjet animerede GIF'er?

Værktøjet koder det fulde binære indhold af enhver fil, du angiver, inklusive animerede GIF'er. Den resulterende data-URI, når den bruges som src for et img-tag, vil afspille animationen i browsere, der understøtter GIF-animation.

Hvordan går jeg den anden vej og dekoder en Base64-streng tilbage til et billede?

Skift værktøjet til dekode-tilstand, indsæt din Base64-streng (med eller uden data:-præfikset), og værktøjet vil dekode den og tilbyde det binære billede som download samt vise en forhåndsvisning.

Relaterede værktøjer

Hold alt lokalt, udforsk komplementære værktøjer.

Alle billedværktøjer