Kod et billede til Base64 / Data URI

En Data-URI er en URL, der direkte indeholder data fra en ressource i stedet for pege på en ekstern fil. Dens generelle form er data:[][;base64],. For et billede har vi typisk data:image/png;base64,iVBORw0KGgo…. Ressourcen er indlejret i HTML, CSS eller JSON og indlæst uden yderligere HTTP-anmodning.

Fælles motiver:

• Reducer HTTP-anmodninger: Integrer et ikon direkte i CSS'en i stedet for at indlæse det som supplement til dokumentet
• E-mailsignatur med indbygget billede: ingen risiko for, at billedet blokeres som fjernindhold
• Webkomponenter / Webarbejdere: hvor indlæsning af en ekstern ressource ofte udgør et scoping- eller CORS-problem
• Lokal lagring (LocalStorage, IndexedDB, database): serialiser et avatar-miniaturebillede til streng
• Selvstændige uddrag: en selvstændig HTML-fil uden eksterne afhængigheder

Nogle konkrete sammenhænge, hvor Base64-billedkodning er berettiget:

• SVG-inline-ikoner i CSS (baggrundsbillede: url("data:image/svg+xml;base64,…"))
• Personlige e-mailsignaturer med logo
• Hurtig prototyping af en selvstændig side delt via e-mail
• Fristående webkomponenter (en enkelt deployerbar fil)
• PDF-generering på browsersiden (jsPDF) med indlejrede miniaturebilleder
• Testdata (håner), der indeholder billeder

Tre trin:

1. Upload dit billede (PNG, JPG, SVG, WebP, GIF) via dropzonen
2. Klik på "Encode"
3. Kopiér den resulterende data-URI med den dedikerede knap, og indsæt den i din HTML, CSS eller JSON

Base64 er ikke en sølvkugle. Nogle forholdsregler:

• Base64 øger størrelsen med ~33 %: 4 ASCII-tegn for hver 3 binære bytes
• Kodede billeder cachelagres ikke separat af browseren; de genindlæses med HTML/CSS, der indeholder dem
• Foretrukket for billeder mindre end 10 KB; derudover er en ekstern fil generelt mere effektiv
• For SVG skal du foretrække URL-kodning (via encodeURIComponent) frem for Base64: Resultatet er kortere og forbliver parserbart som tekst
• Moderne byggeværktøjer (Webpack, Vite) automatiserer valget mellem Base64 og Base64. ekstern fil via en konfigurerbar tærskelstørrelse

HTML:

CSS:

.ikon {
  baggrund: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  bredde: 16px;
  højde: 16px;
}

JSON (mock data):

{
  "bruger": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Hvad er forskellen mellem Base64 og binær?

Binær repræsenterer de rå bytes af en fil. Base64 er en kodning, der transformerer disse bytes i 64 printbare ASCII-tegn (A-Z, a-z, 0-9, +, /). Det gør tekstkontekster (HTML, JSON, e-mail) ikke kan ikke bære binær; Base64 løser dette problem på bekostning af en størrelse overhead på 33 %.

Hvorfor er min data-URI så lang?

Et 30 KB-billede i binært bliver ~40 KB i Base64. Og hvert tegn er en ASCII-byte, så ja, kæden er lang. Dette er iboende til kodningen. For store billeder skal du beholde en ekstern fil.

Understøtter alle browsere data-URI'er?

Ja, uden undtagelse blandt moderne browsere (Chrome, Firefox, Safari, Edge siden IE8 endda). Grænser historisk: IE8 begrænset til 32 KB. Ikke flere bekymringer i dag på nettet.

Hvordan afkoder man en data-URI?

Vores Base64 billeddekoder gør det modsatte: indsæt din data-URI, få billedfilen (PNG, JPG, SVG, WebP) klar til at uploade eller gemme.

Base64 vs. URL-kodning til SVG'er?

For SVG producerer URL-kodning (med encodeURIComponent) en kortere streng end Base64 og forbliver læsbar som tekst. Dette er det anbefalede valg i CSS, når du integrerer en SVG inline. For binære formater (PNG, JPG) forbliver Base64 obligatorisk.

Påvirker Base64-kodning billedkvaliteten?

Nej. Kodningen er tabsfri: det er en binær byte ↔ Base64 strengbijektion. Pixels originalen er strengt bevaret. Kun størrelsen på den transporterede fil stiger med 33 %.