Utilia
Kategóriák ▾
Nyelv: hu ▾

Kép–Base64 konverter

Alakíts képet Base64-gyé vagy data URI-vá, kész CSS- és HTML-kóddal, vagy fejtsd vissza a Base64-et képpé előnézettel. Ingyenes, feltöltés nélkül.

Kép → Base64

Base64 → kép

Hogyan alakíts képet Base64-gyé

  1. A Kép → Base64 részben húzz egy képet a megjelölt területre, vagy kattints rá, és válassz egyet (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
  2. Válaszd ki a Kimenet típusát: Data URI (data:image/png;base64,…), Csak Base64, CSS background-image vagy HTML címke, amely a kép szélességét és magasságát is tartalmazza.
  3. Kattints a Másolás gombra, hosszú eredménynél pedig a Letöltés .txt fájlként gombra.

A megjelölt terület alatti sor megmutatja a valódi formátumot (a fájl bájtjaiból olvassa ki, nem a nevéből), a méreteket, a fájlméretet és a data URI hosszát.

Hogyan fejtsd vissza a Base64-et képpé

  1. A Base64 → kép részben illeszd be a szöveget a Base64 szöveg vagy data URI mezőbe. Beilleszthetsz puszta Base64-karakterláncot, teljes data URI-t, sőt egy egész CSS-szabályt vagy <img> címkét is: a data URI-t megtalálja benne. A sortöréseket és szóközöket figyelmen kívül hagyja, és az URL-biztos Base64 (- és _ karakterekkel) is működik.
  2. Kattints a Kép dekódolása gombra. Megjelenik az előnézet, a típus, a méretek és a fájlméret.
  3. A Kép letöltése gombbal a megfelelő fájlkiterjesztéssel mentheted el.

A típust a fájl „mágikus bájtjaival” ellenőrzi, vagyis az egyes képformátumok elején álló aláírással (például 89 50 4E 47 a PNG-nél vagy FF D8 FF a JPEG-nél). Ha egy data URI image/jpeg típust állít, de PNG-t tartalmaz, az eszköz szól, és a valódi típust használja. Ami nem ismert képformátum, azt elutasítja, a határ pedig 20 MB képadat.

Hogyan működik a Base64

A Base64 a fájl minden 3 bájtját 4 nyomtatható karakterré alakítja az A–Z, a–z, 0–9, + és / készletből, a végén = kitöltéssel. Ezért a kódolt szöveg nagyjából 33%-kal nagyobb a fájlnál: egy 30 KB-os ikonból körülbelül 40 KB szöveg lesz. A data URI egy rövid fejlécet is hozzáad, data:<típus>;base64,, hogy a böngésző tudja, hogyan olvassa.

Mikor érdemes a képeket data URI-ként beágyazni

A data URI-k hasznosak:

  • kis ikonokhoz, logókhoz és háttérképekhez CSS-ben, egy kérés megspórolásához;
  • HTML-e-mailekhez és egyfájlos HTML-dokumentumokhoz, amelyeknek külső fájlok nélkül is működniük kell;
  • JSON API-khoz és konfigurációs fájlokhoz, amelyek csak szöveget tudnak hordozni.

Nagy fotókhoz nem jók. A szöveg egyharmaddal nagyobb a fájlnál, nem gyorsítótárazható külön az azt tartalmazó oldaltól vagy stíluslaptól, és késlelteti a megjelenítést. Nagyjából 10–100 KB fölött általában egy jó gyorsítótárazással kiszolgált hagyományos képfájl a jobb, ezért jelez az eszköz emlékeztetőt a 100 KB-nál nagyobb képeknél.

Minden a böngésződben fut: a képek és a beillesztett szöveg soha nem kerül feltöltésre.

Gyakori kérdések

A Base64 a kép tömörítésének vagy védelmének módja?

Nem. A Base64 körülbelül 33%-kal megnöveli az adatot, és bárki vissza tudja fejteni. Csak a bináris adatot alakítja szöveggé, hogy olyan helyen is átvihető legyen, ahol a bináris adat nem.

Miért nem jelenik meg a data URI-m?

A leggyakoribb okok: hiányzó vagy hibás típus a fejlécben, a karakterlánc közepére bemásolt szóközök vagy idézőjelek, illetve csonka szöveg. Illeszd be a Base64 → kép részbe: az eszköz jelzi az érvénytelen karaktereket, és ellenőrzi a valódi típust.

Használhatok SVG-t data URI-ként?

Igen. Az SVG is kódolható Base64-be, mint bármelyik kép. SVG-nél az URL-kódolású data URI (data:image/svg+xml,%3Csvg…) gyakran rövidebb; ez az eszköz mindkét formát dekódolja.

Működik HEIC vagy AVIF képekkel?

A kódolás bármilyen képfájllal működik. Az előnézet csak akkor jelenik meg, ha a böngésződ meg tudja jeleníteni a formátumot, de a Base64-szöveg és a letöltés mindig helyes.

Van méretkorlát?

Igen, 20 MB képadat mindkét irányban. A nagyobb karakterláncoktól lelassulnak a böngészők, és egy weboldalon ritkán jó ötlet.

Kapcsolódó eszközök