Bilde ⇔ Base64 Konverter

Konverter mellom bildefiler og Base64 (Data URI)

Kod bilder til Base64 Data URI eller dekod Base64-strenger tilbake til bilder. Støtter PNG, JPEG, GIF og WebP-formater. Enkel dra-og-slipp-operasjon. All behandling gjøres i nettleseren din - ingen data lagres eller overføres.

Hvordan Bruke

Konverter i 3 enkle trinn:

Velg konverteringsmodus
Velg enten fanen 'Bilde → Base64' eller 'Base64 → Bilde'.
Legg inn dataene dine
For bildemodus: dra og slipp, eller velg en bildefil. For Base64-modus: lim inn Base64-strengen din.
Bruk resultatet
Konverteringsresultater vises umiddelbart. Kopier Base64 med kopieringsknappen, eller last ned bildet med nedlastingsknappen.

Personvern: All behandling gjøres i nettleseren din. Bildedata sendes eller lagres aldri på noen server.

Bilde ⇔ Base64 Konverter

📁

Dra og slipp bildefil her, eller klikk for å velge

Støttede formater: PNG, JPEG, GIF, WebP, SVG (maks 10MB anbefales)

Forhåndsvisning

Filnavn

Filstørrelse

Dimensjoner

Format

Base64 Kodet Resultat (Data URI)

Skriv inn Base64-streng

Forhåndsvisning

Praktiske Bruksområder for Bilde Base64 Konvertering

Base64-koding av bilder brukes ofte i webutvikling til følgende formål:

1. Bygge inn bilder i HTML eller CSS

Bygg inn små ikoner eller logobilder direkte i HTML <img>-tagger eller CSS background-image-egenskaper for å redusere HTTP-forespørsler og forbedre sideinnlastingstiden. Spesielt nyttig som et alternativ til ikonfonter.

2. Alternativ til CSS sprites

I stedet for å kombinere flere små bilder i én enkelt 'CSS sprite'-fil, kod hvert bilde til Base64 og bygg inn i CSS for enklere administrasjon.

3. Bygge inn bilder i HTML-e-poster

Noen e-postklienter blokkerer ekstern bildeinnlasting. Innebygging av viktige bilder (som logoer) som Data URIs sikrer at de vises pålitelig.

4. Bildeoverføring via REST API

Når du sender/mottar bildedata via JSON API-er, tillater Base64-koding håndtering av binære data som tekstformat. Overfør bilder i enkelt JSON-format uten flerparts-kommunikasjon.

5. Frakoblede applikasjoner

I Progressive Web Apps (PWA) eller Electron-apper sikrer innebygging av Base64-kodede bilder i HTML at bilder vises pålitelig selv i frakoblede miljøer.

6. Utvikling av mobilapper

Bruk av Base64-kodede bilder i tverrplattformrammeverk som React Native, Ionic og Flutter forener bildehåndtering på tvers av plattformer.

Hva er Data URI? Forstå Mekanismen

Data URI (også kalt Data URL) er et URL-skjema som tillater innebygging av små filer som bilder eller fonter direkte i HTML eller CSS. Den konverterer filinnholdet til tekst ved hjelp av Base64-koding og representerer det som en del av en URL.

Data URI Format

Data URI er skrevet i følgende format:

data:[MIME type];[kodingsmetode],[kodede data]

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

Fordeler med Data URI

Reduserte HTTP-forespørsler: Ingen eksterne filforespørsler nødvendig, noe som forbedrer sideinnlastingstiden
Enkeltfilpakking: Fullstendig i en enkelt HTML- eller CSS-fil for enkel distribusjon og administrasjon
Pålitelig visning: Unngår ødelagte eksterne bildelenker eller blokkering

Ulemper med Data URI

Økt filstørrelse: Base64-koding øker datastørrelsen med omtrent 33%
Lavere cache-effektivitet: Oppdatering av bilder krever nedlasting av hele HTML/CSS-filen på nytt
Redusert lesbarhet: Kildekoden blir lang og vanskeligere å vedlikeholde

Beste Praksis

Når skal du Bruke Data URI

✅ Små ikoner eller logoer (5KB eller mindre anbefales)
✅ Ofte brukte dekorative bilder (knappebakgrunner, osv.)
✅ Viktige bilder som krever frakoblet støtte

Når du IKKE skal Bruke Data URI

❌ Store bilder (10KB+): Filstørrelsen blir for stor
❌ Ofte oppdaterte bilder: Dårlig cache-effektivitet
❌ Bilder gjenbrukt på flere sider: Duplisert innebygging på hver side

⚠️ Generelt anbefales det å bruke Data URI for små bilder (5KB eller mindre). For større bilder er standard <img>-tagger eller ekstern filinnlasting mer effektiv.

Ofte Stilte Spørsmål (OSS)

Hvilke bildeformater støttes?

Alle nettleserstøttede bildeformater, inkludert PNG, JPEG, GIF, WebP og SVG, kan konverteres. PNG og JPEG er de vanligste.

Er det en størrelsesbegrensning for bildekonvertering?

Det er ingen teknisk grense, men av hensyn til ytelse og nettleserminnet anbefales 10MB eller mindre. I praksis er bilder på 5KB eller mindre mest effektive.

Hvor mye øker bildestørrelsen med Base64-koding?

Base64-koding øker filstørrelsen til omtrent 133% av originalen (ca. 33% økning). For eksempel blir et 9KB bilde omtrent 12KB Base64-streng.

Kan gjennomsiktige PNG-bilder Base64-konverteres?

Ja, gjennomsiktige PNG-bilder kan konverteres som de er. Gjennomsiktighetsinformasjonen bevares, slik at de vises riktig med gjennomsiktighet når de er bygd inn i HTML eller CSS.

Hvordan bygger jeg inn Base64-strengen i HTML?

Lim inn direkte i src-attributtet til <img>-taggen. Eksempel: <img src="data:image/png;base64,iVBORw0KG...">

Hvordan brukes det som background-image i CSS?

Lim inn i url()-funksjonen som: background-image: url('data:image/png;base64,iVBORw0KG...');

Lagres opplastede bilder på serveren?

Nei, all behandling gjøres i nettleseren din. Bildedata overføres aldri til noen server.

Kan jeg bruke dette for kommersielle nettsteder?

Ja, dette verktøyet er helt gratis og kan brukes fritt til både kommersielle og ikke-kommersielle formål.