tigtools

Bild till Base64

Gör om en PNG-, JPEG-, WebP-, GIF-, SVG- eller ICO-fil till Base64-text som du kan bädda in i HTML, CSS eller JSON, eller avkoda Base64 tillbaka till en bild. Filen lämnar aldrig din webbläsare.

Körs i din webbläsare Ingen registrering

Riktning

eller släpp den här (upp till 10 MB). Filen stannar på din enhet.

Så här använder du det

  1. Välj Bild → Base64 och välj en bildfil, eller välj Base64 → Bild för att gå åt andra hållet.
  2. Välj det format du behöver: data-URL, vanlig Base64, en HTML img-tagg, en CSS background-image-regel eller Markdown.
  3. Kopiera resultatet och klistra in det i din kod, e-postmall eller JSON.
  4. För att avkoda klistrar du in en data-URL eller vanlig Base64; bilden förhandsgranskas och kan laddas ned.

Så fungerar det

Base64 representerar binär data med 64 utskrivbara tecken, så att en bild kan skrivas direkt i textformat. En data-URL lägger mediatypen framför, till exempel data:image/png;base64, följt av de kodade byten. Webbläsare accepterar data-URL:er överallt där en bild-URL är tillåten: i src på en img-tagg, i en CSS url(), eller i en SVG-bildreferens.

Den kodade texten är alltid ungefär en tredjedel större än originalfilen (4 tecken för varje 3 byte). Att bädda in små ikoner och platshållare kan spara en separat nätverksbegäran, men inbäddade data kan inte cachas separat och laddas ned igen med varje sida eller stilmall som innehåller dem, så det lönar sig sällan för mer än några kilobyte. Många e-postklienter blockerar eller tar bort data-URL-bilder, så testa innan du använder dem i nyhetsbrev.

Filen kodas byte för byte: inget komprimeras om, och metadata i filen (till exempel EXIF) behålls. Vid avkodning accepterar verktyget en fullständig data-URL, vanlig Base64, URL-säker Base64 och text som kopierats tillsammans med en CSS url(…)-omslutning. Bildtypen identifieras utifrån de avkodade byten snarare än att lita på etiketten.

Exempel

Liten ikon i en stilmall

En PNG-ikon på 600 byte blir en Base64-sträng på 800 tecken. Med CSS-utdata får du en background-image-regel som du kan klistra in i en klass utan att behöva hosta en separat fil.

Bild från ett API-svar

Ett API returnerar ett JSON-fält som till exempel "iVBORw0KGgoAAAANSUhEUg…". Klistra in det i Base64 → Bild för att se bilden, kontrollera storleken och ladda ned den som PNG.

SVG-logotyp i HTML

Att koda en SVG ger en data:image/svg+xml;base64-URL som fungerar i en img-tagg. För SVG är själva okomprimerade SVG-koden ofta kortare än Base64, så överväg att infoga SVG:en direkt.

Vanliga frågor

Varför är Base64-versionen större än min bild?

Base64 använder 4 texttecken för att lagra 3 byte, vilket lägger till cirka 33 % plus lite för data-URL-prefixet. Gzip- eller Brotli-komprimering på webbservern minskar skillnaden men tar inte bort den.

Ändrar eller komprimerar kodningen bilden?

Nej. Filens exakta byte kodas, inklusive eventuell metadata. För att göra strängen kortare bör du först komprimera eller ändra storlek på bilden.

Vad är skillnaden mellan en data-URL och vanlig Base64?

Vanlig Base64 är bara de kodade byten. En data-URL lägger till ett prefix som data:image/jpeg;base64, som talar om för webbläsaren vilken filtyp det är, så att den kan användas direkt som bildkälla.

Finns det en storleksgräns?

Filer upp till 10 MB kan kodas här. Mycket långa strängar kan göra textfält och redigerare långsamma, och så stora data-URL:er är inte praktiska på webbplatser.

Integritet

Kodning och avkodning sker i din webbläsare. Din bild och Base64-texten laddas inte upp, lagras inte och ingår inte i analyser.