tigtools

Kép → Base64

Alakítson egy PNG, JPEG, WebP, GIF, SVG vagy ICO fájlt Base64 szöveggé, amelyet HTML-be, CSS-be vagy JSON-be ágyazhat, vagy dekódolja a Base64 szöveget képpé. A fájl soha nem hagyja el a böngészőjét.

Böngészőben fut Regisztráció nélkül

Irány

vagy húzza ide (legfeljebb 10 MB). A fájl az eszközén marad.

Használata

  1. Válassza a Kép → Base64 lehetőséget, és válasszon egy képfájlt, vagy a Base64 → Kép lehetőséget a fordított irányhoz.
  2. Válassza ki a kívánt kimenetet: data URL, sima Base64, HTML img címke, CSS background-image szabály vagy Markdown.
  3. Másolja ki az eredményt, és illessze be a kódjába, e-mail sablonba vagy JSON-be.
  4. Dekódoláshoz illesszen be egy data URL-t vagy sima Base64 szöveget; a rendszer megjeleníti a kép előnézetét, és letöltheti.

Hogyan működik

A Base64 64 nyomtatható karakterrel ábrázolja a bináris adatokat, így a kép közvetlenül szöveges formátumokba írható. A data URL az elejére teszi a médiatípust, például data:image/png;base64, majd a kódolt bájtok következnek. A böngészők bárhol elfogadják a data URL-eket, ahol kép URL engedélyezett: az img elem src attribútumában, CSS url() hívásban vagy SVG képhivatkozásban.

A kódolt szöveg mindig körülbelül egyharmadával nagyobb, mint az eredeti fájl (minden 3 bájthoz 4 karakter). Kis ikonok és helyőrző képek beágyazása megtakaríthat egy külön hálózati kérést, de a beágyazott adat önmagában nem gyorsítótárazható, és minden olyan oldallal vagy stíluslappal együtt újra letöltődik, amely tartalmazza, ezért néhány kilobájt felett ritkán éri meg. Sok e-mail kliens blokkolja vagy eltávolítja a data URL-es képeket, ezért hírlevelekben való használat előtt tesztelje.

A fájl bájtról bájtra kerül kódolásra: semmi sem lesz újratömörítve, és a fájlban lévő metaadatok (például EXIF) megmaradnak. Dekódoláskor az eszköz elfogad teljes data URL-t, sima Base64-et, URL-safe Base64-et és CSS url(…) csomagolással együtt másolt szöveget is. A képtípus a dekódolt bájtokból kerül megállapításra, nem pedig a címkéből.

Példák

Kis ikon stíluslapban

Egy 600 bájtos PNG ikonból 800 karakteres Base64 szöveg lesz. A CSS kimenet használatával olyan background-image szabályt kap, amelyet beilleszthet egy osztályba, anélkül hogy külön fájlt kellene kiszolgálnia.

Kép API-válaszból

Egy API JSON mezőt ad vissza, például "iVBORw0KGgoAAAANSUhEUg…". Illessze be a Base64 → Kép eszközbe, hogy lássa a képet, ellenőrizze a méretét, és letöltse PNG formátumban.

SVG logó HTML-ben

Egy SVG kódolása egy data:image/svg+xml;base64 URL-t ad, amely img címkében működik. SVG esetén a tömörítetlen SVG jelölőnyelv maga gyakran rövidebb, mint a Base64, ezért érdemes megfontolni az SVG közvetlen beillesztését.

Gyakori kérdések

Miért nagyobb a Base64 verzió, mint a képem?

A Base64 4 szöveges karaktert használ 3 bájt tárolásához, így körülbelül 33%-kal növeli a méretet, plusz egy kevés a data URL előtag miatt. A webkiszolgálón alkalmazott Gzip vagy Brotli tömörítés csökkenti a különbséget, de nem szünteti meg.

Megváltoztatja vagy tömöríti a kódolás a képet?

Nem. A fájl pontos bájtjai kódolódnak, beleértve az összes metaadatot is. Ha rövidebb karakterláncot szeretne, először tömörítse vagy méretezze át a képet.

Mi a különbség a data URL és a sima Base64 között?

A sima Base64 csak a kódolt bájtokat tartalmazza. A data URL egy előtagot ad hozzá, például data:image/jpeg;base64, amely megmondja a böngészőnek, milyen típusú fájlról van szó, így közvetlenül képforrásként használható.

Van-e méretkorlát?

Itt legfeljebb 10 MB méretű fájlok kódolhatók. A nagyon hosszú karakterláncok lelassíthatják a szövegmezőket és a szerkesztőket, az ilyen nagy data URL-ek pedig nem praktikusak weboldalakon.

Adatvédelem

A kódolás és a dekódolás a böngészőjében történik. A kép és a Base64 szöveg nem kerül feltöltésre, tárolásra, és nem szerepel az elemzésekben.