Kép Base64-be

Kódolj egy képet Base64 data URI-vé CSS-hez vagy HTML-hez.

#photo#development

Húzz ide egy képet

vagy kattints a kiválasztáshoz · PNG, JPG, WebP, GIF

Kép kiválasztása

A(z) Kép Base64-be névjegye

Dobj be bármilyen képet, és azonnal megkapod a Base64 kódolását három, azonnal beilleszthető formában: teljes data URI-ként img tagekhez, nyers Base64 szövegként API-khoz és payloadokhoz, valamint CSS background-image szabályként, amit egyenesen a stíluslapba illeszthetsz. Az élő előnézet és a méretkijelzés pontosan megmutatja, mit ágyazol be másolás előtt, így soha nem csúszik be észrevétlenül túlméretes elem a kódbázisodba.

Egy kép Base64 kódolásával közvetlenül beágyazhatod HTML-be, CSS-be, JSON-ba vagy egy e-mail-sablonba — nincs külön fájl és nincs plusz HTTP-kérés. Az átalakítás teljes egészében az eszközödön történik a böngésző saját FileReader API-jával, így a kép soha nem kerül feltöltésre sehová. Ez számít, amikor logókat, mockupokat vagy bármilyen titoktartás alá eső anyagot kódolsz: ami az oldalra kerül, a gépeden marad.

Funkciók

  • Másold a teljes data URI-t, a nyers Base64-et vagy a CSS-részletet
  • Élő előnézet a ténylegesen kódolt képről
  • Megmutatja a kódolt méretet másolás előtt
  • Működik PNG, JPG, WebP, GIF és SVG fájlokkal
  • Helyben kódolva FileReaderrel — semmi sem kerül feltöltésre
  • Ingyenes, azonnali és nem kell hozzá fiók

Így konvertálj képet Base64 formátumba online

  1. Húzd a képet az eszközre, vagy kattints a fájl kiválasztásához.
  2. Ellenőrizd az előnézetet és az alatta látható kódolt méretet.
  3. Kattints a data URI másolására img tagekhez vagy JSON-hoz.
  4. Vagy másold a nyers Base64 szöveget, illetve a CSS background-image részletet.
  5. Illeszd az eredményt a kódodba, a stíluslapodba vagy az API-kérésbe.

Gyakran ismételt kérdések

Mi az a Base64 data URI?

A data URI egy fájl tartalmát csomagolja szöveges karakterláncba, a MIME-típusával az elején — például data:image/png;base64,iVBOR… . A böngészők pontosan úgy jelenítik meg, mint egy normál kép-URL-t, így képeket ágyazhatsz közvetlenül HTML-be, CSS-be vagy Markdownba, külön tárolt fájl nélkül.

Rontja a Base64 kódolás a kép minőségét?

Nem. A Base64 a fájl pontos bájtjainak veszteségmentes szöveges ábrázolása — dekódolva pixelre pontos másolatot kapsz vissza az eredetiről. A kompromisszum a méret, nem a minőség: mivel a bináris adat szöveges karakterekkel van kiírva, a kódolt szöveg nagyjából 33%-kal nagyobb az eredeti fájlnál.

Mikor érdemes képet Base64-ként beágyazni?

Kis elemeknél ragyog: ikonok, logók, apró hátterek, e-mail-aláírások és egyfájlos HTML-dokumentumok esetén, ahol egy HTTP-kérés megspórolása többet ér a méretnövekedésnél. Nagy fotókhoz általában a hagyományos képfájl a jobb választás, mert a Base64 felfújja a kódot, és nem gyorsítótárazható külön.

Van fájlméret-korlát?

Nincs kemény plafon — a kódolás a böngésződ memóriájában fut, így a tipikus ikonok, logók és fotók azonnal konvertálódnak. A több megabájtos fájlok is működnek, de az eredmény szövege kezelhetetlenül hosszú lesz kódba illesztéshez, és a szerkesztők is lassan birkóznak meg vele — ez gyakorlati, nem technikai korlát.

Feltöltődik a képem egy szerverre?

Nem. A fájl beolvasása és kódolása teljes egészében az eszközödön történik a böngésző FileReader API-jával — a képadataiddal semmilyen hálózati kérés nem indul. Akár be is töltheted az oldalt, lekapcsolódhatsz az internetről, és a konvertálás továbbra is működik.