Kép kódolása Base64 / Data URI-be

A Data URI egy olyan URL, amely egy távoli fájlra való mutatás helyett közvetlenül tartalmazza egy erőforrás adatait. Általános formája: data:[<mediatype>][;base64],<data>. Egy kép esetén ez jellemzően data:image/png;base64,iVBORw0KGgo…. Az erőforrás beágyazódik a HTML, CSS vagy JSON kódba, és minden további HTTP kérés nélkül betöltődik.

A leggyakoribb okok:

• HTTP kérések csökkentése: egy ikon közvetlen beágyazása a CSS-be ahelyett, hogy külön töltenénk be a dokumentum mellett.
• E-mail aláírás beágyazott képpel: nincs kockázata annak, hogy a képet távoli tartalomként blokkolják.
• Web Components / Web Workers: ahol egy külső erőforrás betöltése gyakran scope vagy CORS problémákat okoz.
• Helyi tárolás (LocalStorage, IndexedDB, adatbázis): egy avatár bélyegképének sorosítása karakterláncként.
• Önálló kódrészletek: egy HTML fájl, amely önmagában is működőképes, külső függőségek nélkül.

Néhány konkrét kontextus, ahol a Base64 képkódolás indokolt:

• Beágyazott SVG ikonok CSS-ben (background-image: url("data:image/svg+xml;base64,…"))
• Személyre szabott e-mail aláírások logóval
• E-mailben megosztott önálló oldalak gyors prototipizálása
• Önálló webkomponensek (egyetlen telepíthető fájl)
• PDF generálás böngésző oldalon (jsPDF) beágyazott bélyegképekkel
• Képeket tartalmazó tesztadatok (mockok)

Három lépés:

1. Töltse fel a képet (PNG, JPG, SVG, WebP, GIF) a feltöltési zónán keresztül.
2. Kattintson a „Kódolás” gombra.
3. Másolja ki a kapott Data URI-t a megfelelő gombbal, és illessze be a HTML, CSS vagy JSON kódjába.

A Base64 nem csodaszer. Néhány óvintézkedés:

• A Base64 ~33%-kal növeli a méretet: 4 ASCII karakter minden 3 bináris bájt után.
• A kódolt képeket a böngésző nem gyorsítótárazza külön; azokat a tartalmukkal együtt tölti be újra a HTML/CSS-sel.
• Érdemes 10 KB alatti képeknél használni; e felett általában hatékonyabb egy külső fájl.
• SVG esetén preferálja az URL kódolást (encodeURIComponent-en keresztül) a Base64 helyett: az eredmény rövidebb és szövegként olvasható marad.
• Modern build eszközök (Webpack, Vite) automatizálják a választást a Base64 és a külső fájl között egy beállítható méretkorlát alapján.

HTML:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS:

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (mock adatok):

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

Mi a különbség a Base64 és a bináris között?

A bináris a fájl nyers bájtjait képviseli. A Base64 egy kódolás, amely ezeket a bájtokat 64 nyomtatható ASCII karakterré alakítja (A-Z, a-z, 0-9, +, /). A szöveges környezetek (HTML, JSON, e-mail) nem tudnak bináris adatokat továbbítani; a Base64 megoldja ezt a problémát 33%-os méretnövekedés árán.

Miért olyan hosszú a Data URI-m?

Egy 30 KB-os bináris kép ~40 KB-os lesz Base64-ben. És minden karakter egy ASCII bájt, tehát igen, a karakterlánc hosszú. Ez a kódolás velejárója. Nagy képek esetén tartsa meg a külső fájlt.

Minden böngésző támogatja a Data URI-kat?

Igen, a modern böngészők kivétel nélkül (Chrome, Firefox, Safari, Edge, még az IE8 óta). Korábbi korlátok: az IE8-nál 32 KB volt a limit. Ma már nincs ilyen gond a weben.

Hogyan dekódoljunk egy Data URI-t?

A Base64 képdekódoló eszközünk elvégzi a fordított műveletet: illessze be a Data URI-t, és kapja meg a feltöltésre vagy mentésre kész képfájlt (PNG, JPG, SVG, WebP).

Base64 vs. URL kódolás SVG-nél?

SVG esetén az URL kódolás (encodeURIComponent segítségével) rövidebb karakterláncot eredményez, mint a Base64, és szövegként olvasható marad. Ez a javasolt választás CSS-ben, ha beágyazott SVG-t használunk. Bináris formátumok (PNG, JPG) esetén a Base64 továbbra is kötelező.

Befolyásolja-e a Base64 kódolás a képminőséget?

Nem. A kódolás lossless (veszteségmentes): ez egy bináris bájt ↔ Base64 karakterlánc megfeleltetés. Az eredeti pixelek szigorúan megőrződnek. Csak a továbbított fájl mérete nő meg 33%-kal.