Kép → Base64 / Data URI Konvertáló
Alakítsd képeidet Base64 kódolt Data URI stringgé HTML/CSS beágyazáshoz. JPG, PNG, WebP, SVG – böngészőben, szerver nélkül.
Miről szól ez az eszköz?
Alakítsd át képeidet Base64 kódolt szöveggé, amelyet közvetlenül beágyazhatsz HTML, CSS vagy JavaScript fájlokba külön HTTP kérés nélkül. Kis ikonokhoz, e-mail sablonokhoz és inline CSS háttérképekhez ideális megoldás – a konvertálás a böngésződben történik.
Hogyan használd a(z) Kép → Base64 / Data URI Konvertáló-t?
-
Kép feltöltése
Húzd be a képet a feltöltési területre, vagy kattints a tallózás gombra. Támogatott formátumok: JPG, PNG, WebP, SVG és GIF – a legtöbb webes képformátum.
-
Kimeneti formátum kiválasztása
Válaszd ki, milyen formátumban szeretnéd a Base64 kódot: HTML <img> tag (beilleszthető HTML-be), CSS background-image (háttérképként használható), vagy nyers data URI (bármilyen célra).
-
Előnézet és ellenőrzés
Az eszköz azonnal megjeleníti a generált kódot és az előnézeti képet. Ellenőrizd, hogy a kép megfelelően renderelődik-e a Base64 verzióban.
-
Másolás a vágólapra
Kattints a másolás gombra a generált kód vágólapra másolásához, majd illeszd be közvetlenül a HTML, CSS vagy JavaScript fájlodba.
Mikor van rá szükséged?
-
E-mail sablonok
E-mail kliensek gyakran blokkolják a külső képeket. Base64-ként beágyazott képek minden levelezőprogramban azonnal megjelennek, külön letöltés nélkül.
-
Kritikus above-the-fold képek
A hajtás feletti kis képeket (logó, ikonok) Base64-ként beágyazva elkerülheted a render-blocking HTTP kéréseket és gyorsíthatod az oldal első megjelenítését.
-
CSS sprite alternatíva
Kis ikonokat és dekoratív elemeket CSS-ben Base64-ként beágyazva egyszerűsítheted a build pipeline-t és csökkentheted a HTTP kérések számát.
-
Önálló HTML dokumentumok
Egyetlen HTML fájlba ágyazott képekkel önálló, hordozható dokumentumokat hozhatsz létre, amelyeket offline is meg lehet nyitni.
A Base64 képkódolásról részletesen
A Base64 egy kódolási séma, amely bináris adatot ASCII szövegként ábrázol. A képek esetében ez azt jelenti, hogy a kép teljes tartalma szöveges formában beágyazható HTML-be, CSS-be vagy JavaScript-be, egy ún. data URI segítségével (pl. data:image/png;base64,iVBOR...).
A beágyazott képek előnye, hogy nem igényelnek külön HTTP kérést, így csökkentik a hálózati overhead-et. Ez kis képeknél (5-50 KB) nettó előnyt jelent, de nagyobb fájloknál a 33%-os méretfelár és a cachelhetetlenség miatt a külön fájlként való betöltés hatékonyabb.
A modern webfejlesztésben a Base64 kódolás elsősorban e-mail sablonoknál, kritikus CSS-ben (above-the-fold képek), valamint önálló HTML dokumentumoknál és prototípusoknál terjedt el. Build eszközök (Webpack, Vite) automatikusan is Base64-re alakíthatják a kis képeket.
Hasznos tippek
-
Csak 5-50 KB alatti képeknél érdemes Base64-et használni. Ennél nagyobb fájloknál a méretfelár és a cachelhetetlenség több hátrányt okoz, mint amennyit az HTTP kérés megtakarítása ér.
-
E-mail sablonokban a Base64 a legmegbízhatóbb módszer a képek megjelenítésére, mivel a legtöbb levelezőkliens alapértelmezetten blokkolja a külső képeket.
-
Modern build eszközök (Vite, Webpack) automatikusan Base64-re konvertálják a kis képeket – érdemes ellenőrizni, hogy a build konfigurációd nem duplikálja-e a munkát.
-
Ne ágyazz be nagy képeket Base64-ként: a HTML/CSS fájl mérete felduzzad, ami lassítja a feldolgozást és lehetetlenné teszi a külön cachelést.
Gyakori kérdések
- A Base64 Data URI lehetővé teszi, hogy képet közvetlenül HTML vagy CSS fájlba ágyazz be, HTTP kérés nélkül. Kis ikonokhoz, logókhoz és e-mail sablonokhoz ideális.
- A kimenet data:image/jpeg;base64,/9j/4AA... alakú string, amit közvetlenül beilleszthetsz <img src> tagbe vagy CSS background-image tulajdonságba.
- Technikailag nincs, de nagy képeknél a Base64 string 33%-kal nagyobb lesz az eredeti fájlméretnél. 50KB feletti képeknél külső fájlként ajánlott tárolni.
- Elsősorban 5-50 KB alatti kis képeknél, ikonoknál, logóknál és dekoratív elemeknél érdemes, ahol az extra HTTP kérés elkerülése fontosabb, mint a fájlméret-növekedés. E-mail sablonokban különösen hasznos, mivel a legtöbb levelezőkliens blokkolja a külső képeket.
- A Base64 kódolás 33%-kal növeli a fájlméretet a bináris eredetihez képest. Emellett a beágyazott képek nem cachelhetők külön a böngésző által, és a nagy Base64 blokkok lassíthatják a HTML/CSS feldolgozását.
- Igen, a Base64 kódolás teljes egészében a böngésződben történik. A képed nem kerül szerverre – a JavaScript FileReader API végzi a konvertálást.
- JPG, PNG, WebP, SVG és GIF formátumú képeket egyaránt Base64-re kódolhatsz. A kimeneti data URI automatikusan tartalmazza a helyes MIME típust.
- Az ajánlott maximum 5-50 KB. Ennél nagyobb képeknél a 33%-os méretfelár és a cachelhetetlenség miatt hatékonyabb a külön fájlként való betöltés.
- A generált data URI-t közvetlenül beillesztheted az <img> tag src attribútumába, vagy CSS-ben a background-image: url() értékeként. Az eszköz mindkét formátumban előállítja a kódot.