CodeKitHubMi ez az eszköz?
A Base64 egy módszer bináris adatok — például egy kép nyers bájtjai — sima szövegként való ábrázolására, kizárólag betűket, számjegyeket és néhány szimbólumot használva. Mivel sima szöveg, egy Base64-kódolt kép közvetlenül beágyazható HTML-be, CSS-be vagy JSON-ba, ahelyett hogy külön fájlként hivatkoznánk rá.
A "data URL" egy kis előtaggal (data:image/png;base64,) csomagolja be ezt a Base64 szöveget, amely megmondja a böngészőnek, milyen típusú fájlról van szó, így közvetlenül beilleszthető egy src vagy url() attribútumba, és extra kérés nélkül megjeleníthető.
Miért érdemes használni?
- Egyszerre kapd meg mindkét formátumot — a teljes data URL-t HTML/CSS-hez, és a nyers Base64-et (előtag nélkül) JSON-ba vagy konfigurációs fájlba ágyazáshoz.
- Nincs szerver-visszautazás: kiküszöböl egy HTTP kérést kis ikonoknál, profilképeknél vagy beágyazott képeknél.
- Pontosan megőrzi az eredeti fájl bájtjait — nincs újrakódolás vagy minőségromlás, ellentétben az olyan eszközökkel, amelyek dekódolják és újra elmentik a képet.
- Megmutatja a méretkülönbséget, hogy tudd, mit kapsz cserébe a kényelemért.
- Privát: a fájlt a böngésző FileReader API-ja olvassa be helyben, és soha nem hagyja el az eszközödet.
Használati útmutató
- Kattints a feltöltési területre, vagy húzz rá egy képfájlt.
- Másold ki a teljes data URL-t, ha egy <img src>-be vagy CSS background-image-be illeszted be.
- Másold ki a nyers Base64-et (data: előtag nélkül), ha az értéket JSON-ba, YAML-be vagy más olyan konfigurációs formátumba ágyazod, amely már ismeri a fájltípust.
- Ellenőrizd a méretmegjegyzést — a Base64 szöveg körülbelül egyharmaddal nagyobb, mint az eredeti bináris fájl.
Példa
Bemenet
Egy 12 KB-os PNG ikon fájl.Kimenet
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB szöveg), plusz ugyanez a karakterlánc a data: előtag nélkül.A ~33%-os méretnövekedés a Base64 kódolás velejárója (3 bájt bináris adat 4 karakter szöveggé válik) — ez nem hiba az eszközben.
Hol használjuk az egyes formátumokat
| Formátum | Tipikus felhasználás |
|---|---|
| Teljes data URL | HTML <img src="...">, CSS background-image: url(...), beágyazott e-mail képek |
| Nyers Base64 | JSON API adatcsomagok, YAML/konfigurációs fájlok, adatbázis BLOB mezők, egyedi bináris protokollok |
Base64 és képméret — a kompromisszum a gyakorlatban
A ~33%-os többletköltség azt jelenti, hogy a Base64-beágyazás legjobban kis fájlokhoz illik: egy 2 KB-os ikonból ártalmatlan ~2,7 KB beágyazott szöveg lesz, de egy 500 KB-os fotóból ~665 KB szöveg lesz, amely beágyazva ül a HTML-edben, ami lassítja az elemzést, és nem tárolható gyorsítótárban külön az oldaltól.
Ha több vagy nagyobb képet ágyazol be, mérlegeld a megspórolt kérés előnyét az oldal súlyának költségével szemben — és fontold meg az előzetes tömörítést.
Gyakori kérdések
Miért ennyivel nagyobb a Base64 karakterlánc, mint a képfájlom?
A Base64 minden 3 bájt bináris adatot 4 szöveges karakterként kódol, ami egy fix ~33%-os méretnövekedést jelent. Egy 100 KB-os kép esetén körülbelül 133 KB Base64 szövegre számíthatsz. Ez normális és elkerülhetetlen — ez az ára annak, hogy a bináris adatot biztonságos, hordozható szövegként ábrázoljuk.
Mi a különbség a data URL és a nyers Base64 karakterlánc között?
A data URL tartalmaz egy data:image/png;base64, előtagot, amely megmondja a böngészőnek vagy a megjelenítőnek, milyen MIME-típussá kódolja vissza a következő szöveget. Illeszd be a teljes data URL-t egy HTML src-be vagy CSS url()-be. A nyers Base64 (a vessző utáni rész) akkor kell, ha egy rendszer már külön ismeri a fájltípust — például egy JSON mező, mint { "format": "png", "data": "<nyers base64>" }.
Mikor ágyazzak be egy képet Base64-ként, ahelyett hogy fájlra hivatkoznék?
A Base64 beágyazás hasznos kis, gyakran újrahasznált képekhez (ikonok, logók, apró UI grafikák), ahol egy HTTP kérés megspórolása felülmúlja a ~33%-os méretnövekedést, vagy olyan helyzetekben, ahol egy külön fájl nem praktikus, például beágyazott e-mailekben vagy egyfájlos HTML exportokban. Nagy fotókhoz vagy sok oldalon újrahasznált tartalomhoz szinte mindig jobb egy normál, böngésző-gyorsítótárazással linkelt fájl.
A Base64-re konvertálás megváltoztatja vagy tömöríti a képet?
Nem. A Base64 az eredeti bájtok veszteségmentes szöveges kódolása — nem nyúl a pixelekhez, felbontáshoz vagy tömörítéshez. Ha kisebb fájlt szeretnél, tömörítsd először a képet egy kép tömörítővel, majd konvertáld Base64-re a tömörített eredményt.
Feltöltésre kerül valahova a képem?
Nem. A fájlt a böngésződ olvassa be közvetlenül a FileReader API segítségével, és helyben kódolja — soha nincs elküldve a hálózaton.