Bild ⇔ Base64 Konverterare

Konvertera mellan bildfiler och Base64 (Data URI)

Koda bilder till Base64 Data URI eller avkoda Base64-strängar tillbaka till bilder. Stöder PNG, JPEG, GIF och WebP-format. Enkel dra-och-släpp-operation. All bearbetning sker i din webbläsare - ingen data lagras eller överförs.

Så Här Använder Du

Konvertera i 3 enkla steg:

Välj konverteringsläge
Välj antingen fliken 'Bild → Base64' eller 'Base64 → Bild'.
Mata in dina data
För bildläge: dra och släpp eller välj en bildfil. För Base64-läge: klistra in din Base64-sträng.
Använd resultatet
Konverteringsresultat visas omedelbart. Kopiera Base64 med kopieringsknappen, eller ladda ner bilden med nedladdningsknappen.

Integritetsskydd: All bearbetning sker i din webbläsare. Bilddata skickas eller lagras aldrig på någon server.

Bild ⇔ Base64 Konverterare

📁

Dra och släpp bildfil här, eller klicka för att välja

Format som stöds: PNG, JPEG, GIF, WebP, SVG (max 10MB rekommenderas)

Förhandsgranskning

Filnamn

Filstorlek

Dimensioner

Format

Base64 Kodat Resultat (Data URI)

Ange Base64-sträng

Förhandsgranskning

Praktiska Användningsområden för Bild till Base64 Konvertering

Base64-kodning av bilder används vanligtvis i webbutveckling för följande ändamål:

1. Bädda in bilder i HTML eller CSS

Bädda in små ikoner eller logotypbilder direkt i HTML <img>-taggar eller CSS background-image-egenskaper för att minska HTTP-förfrågningar och förbättra sidladdningshastigheten. Särskilt användbart som ett alternativ till ikonfonter.

2. Alternativ till CSS sprites

Istället för att kombinera flera små bilder i en enda 'CSS sprite'-fil, koda varje bild till Base64 och bädda in i CSS för enklare hantering.

3. Bädda in bilder i HTML-e-postmeddelanden

Vissa e-postklienter blockerar extern bildladdning. Inbäddning av viktiga bilder (som logotyper) som Data URIs säkerställer att de visas pålitligt.

4. Bildöverföring via REST API

När bilddata skickas/tas emot via JSON API:er, möjliggör Base64-kodning hantering av binär data som textformat. Överför bilder i enkelt JSON-format utan flerparts-kommunikation.

5. Offline-applikationer

I Progressive Web Apps (PWA) eller Electron-appar säkerställer inbäddning av Base64-kodade bilder i HTML att bilder visas pålitligt även i offline-miljöer.

6. Utveckling av mobilappar

Användning av Base64-kodade bilder i plattformsoberoende ramverk som React Native, Ionic och Flutter förenar bildhanteringen över plattformar.

Vad är Data URI? Förstå Mekanismen

Data URI (även kallad Data URL) är ett URL-schema som tillåter inbäddning av små filer som bilder eller typsnitt direkt i HTML eller CSS. Den konverterar filinnehållet till text med Base64-kodning och representerar det som en del av en URL.

Data URI Format

Data URI skrivs i följande format:

data:[MIME typ];[kodningsmetod],[kodad data]

Exempel (PNG):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

Fördelar med Data URI

Minskade HTTP-förfrågningar: Inga externa filförfrågningar behövs, vilket förbättrar sidladdningshastigheten
Enkelfilspaket: Komplett i en enda HTML- eller CSS-fil för enkel distribution och hantering
Pålitlig visning: Undviker trasiga eller blockerade externa bildlänkar

Nackdelar med Data URI

Ökad filstorlek: Base64-kodning ökar datastorleken med cirka 33%
Lägre cache-effektivitet: Uppdatering av bilder kräver nedladdning av hela HTML/CSS-filen på nytt
Minskad läsbarhet: Källkoden blir lång och svårare att underhålla

Bästa Praxis

När Man Ska Använda Data URI

✅ Små ikoner eller logotyper (5KB eller mindre rekommenderas)
✅ Ofta använda dekorativa bilder (knappbakgrunder etc.)
✅ Viktiga bilder som kräver offline-stöd

När Man INTE Ska Använda Data URI

❌ Stora bilder (10KB+): Filstorleken blir uppblåst
❌ Ofta uppdaterade bilder: Dålig cache-effektivitet
❌ Bilder som återanvänds på flera sidor: Dubbel inbäddning på varje sida

⚠️ Generellt rekommenderas det att använda Data URI för små bilder (5KB eller mindre). För större bilder är standard <img>-taggar eller extern filinläsning mer effektiv.

Vanliga Frågor (FAQ)

Vilka bildformat stöds?

Alla webbläsarstödda bildformat, inklusive PNG, JPEG, GIF, WebP och SVG, kan konverteras. PNG och JPEG är de vanligaste.

Finns det en storleksgräns för bildkonvertering?

Det finns ingen teknisk gräns, men för prestanda och webbläsarens minne rekommenderas 10MB eller mindre. I praktiken är bilder på 5KB eller mindre mest effektiva.

Hur mycket ökar bildstorleken med Base64-kodning?

Base64-kodning ökar filstorleken till cirka 133% av originalet (cirka 33% ökning). Till exempel blir en 9KB bild en Base64-sträng på cirka 12KB.

Kan transparenta PNG-bilder Base64-konverteras?

Ja, transparenta PNG-bilder kan konverteras som de är. Transparensinformationen bevaras, så de visas korrekt med transparens när de är inbäddade i HTML eller CSS.

Hur bäddar jag in Base64-strängen i HTML?

Klistra in direkt i src-attributet för <img>-taggen. Exempel: <img src="data:image/png;base64,iVBORw0KG...">

Hur använder jag det som background-image i CSS?

Klistra in i url()-funktionen så här: background-image: url('data:image/png;base64,iVBORw0KG...');

Lagras uppladdade bilder på servern?

Nej, all bearbetning sker i din webbläsare. Bilddata överförs aldrig till någon server.

Kan jag använda detta för kommersiella webbplatser?

Ja, detta verktyg är helt gratis och kan användas fritt för både kommersiella och icke-kommersiella ändamål.