Ingen uppladdning, 100% lokalt, inget konto

Bild → Base64-konverterare

Koda valfri bild till en Base64 data-URI, eller klistra in en data-URI för att avkoda den tillbaka till en bild. Kopiera resultatet eller ta CSS url()-kodstycket. Ingenting lämnar din enhet.

Så fungerar Bild till Base64

Bild till Base64 läser din bildfil och kodar den som en Base64-data-URI som du kan bädda in direkt i HTML, CSS eller JSON utan att behöva en separat filbegäran. Konverteringen använder FileReader API i din webbläsare; inga bytes från din bild skickas till en server. Du kan också klistra in en Base64-sträng tillbaka för att avkoda den och förhandsgranska bilden, allt lokalt.

En Base64-data-URI är ungefär 33 % större än det binära originalet eftersom varje grupp om tre bytes expanderar till fyra ASCII-tecken. Denna storleksökning är den förväntade avvägningen för bekvämligheten att infoga en bild i ett dokument eller en stilmall. Verktyget visar dig både den råa Base64-strängen och ett klart-att-använda HTML img-tagg-utdrag och ett CSS background-image-utdrag för snabb kopiering till ditt projekt.

Skrivet av Bastien Sulyan

Så här använder du Bild till Base64, steg för steg

  1. Släpp en bildfil i uppladdningsområdet eller klicka för att bläddra. Format som accepteras: JPEG, PNG, WebP, GIF, SVG.
  2. Base64-data-URI:en visas omedelbart i utdatafältet.
  3. Kopiera den råa Base64-strängen, eller använd det förformaterade HTML img-tagg-utdraget eller CSS background-image-utdraget.
  4. För avkodning, klistra in en Base64-sträng i indatafältet och byt till avkodningsläge för att förhandsgranska bilden.
  5. Klicka på kopieringsknappen bredvid ett utdrag för att kopiera det till urklipp.

Vanliga användningsområden

  • En front-end-utvecklare infogar en liten ikon som en data-URI i en CSS-fil för att undvika en extra HTTP-begäran.
  • En utvecklare bäddar in en liten laddningsspinnare som ett Base64 src-attribut så att platshållarbilden är tillgänglig innan JavaScript-paketet laddas.
  • En QA-ingenjör kopierar Base64-koden för en testbild för att klistra in direkt i ett JSON-data-paket för ett API-test.
  • En e-postmallsbyggare infogar en signaturlogotyp som en Base64-data-URI eftersom vissa e-postklienter blockerar externa bildbegäranden.

Vanliga frågor

Varför är Base64-utdata ungefär en tredjedel större än min originalfil?

Base64-kodning representerar var tredje binär byte som fyra ASCII-tecken (ett 4/3-förhållande). En bild som är 100 KB i binär form blir ungefär 133 KB som en Base64-sträng. Detta är inneboende i kodningsschemat, inte en begränsning i verktyget.

Överförs bildinnehållet till en server under kodningen?

Nej. FileReader API läser den binära filen från din lokala disk och skickar resultatet direkt till JavaScript-kodningsfunktionen inuti din webbläsarflik. Bilddata lämnar inte din enhet.

Kan jag använda data-URI-utdata i vilket HTML- eller CSS-sammanhang som helst?

Ja. En data-URI som börjar med data:image/jpeg;base64, följt av den kodade strängen kan användas som src-attribut för en img-tagg eller som url()-värdet i en CSS background-image-egenskap. Alla moderna webbläsare stöder data-URI:er. Mycket stora data-URI:er kan sakta ner sidrendering, så infogning är vanligtvis reserverat för små bilder under några kilobyte.

Stöder verktyget animerade GIF:ar?

Verktyget kodar det fullständiga binära innehållet i vilken fil du än tillhandahåller, inklusive animerade GIF:ar. Den resulterande data-URI:en, när den används som src för en img-tagg, spelar upp animationen i webbläsare som stöder GIF-animation.

Hur gör jag det omvända och avkodar en Base64-sträng tillbaka till en bild?

Byt verktyget till avkodningsläge, klistra in din Base64-sträng (med eller utan data:-prefixet) och verktyget avkodar den och erbjuder den binära bilden som en nedladdning samt visar en förhandsgranskning.

Relaterade verktyg

Håll allt lokalt, utforska kompletterande verktyg.

Alla bildverktyg