Adat-URI HTML-hez és CSS-hez
Hozz létre data:image/...;base64 karakterláncot egy HTML img elem forrásához vagy a CSS background-image tulajdonságához. A Képelőtag beállítással válthatsz a teljes adat-URI és a nyers Base64 között.
Kép átalakítása Base64-be
Alakíts képet Base64-szöveggé, vagy másolj adat-URI-t HTML-hez és CSS-hez.
Átalakítási mód
További műveletek
Base64-karaktertáblázat
A Base64 64 karaktert használ: A–Z, a–z, 0–9, + és /. Az = jel kitöltő karakterként szolgál.
Kattints egy értékre a másolásához.
| Index | Bináris | Karakter |
|---|---|---|
| 0 | A | |
| 1 | B | |
| 2 | C | |
| 3 | D | |
| 4 | E | |
| 5 | F | |
| 6 | G | |
| 7 | H | |
| 8 | I | |
| 9 | J | |
| 10 | K | |
| 11 | L | |
| 12 | M | |
| 13 | N | |
| 14 | O | |
| 15 | P |
| Index | Bináris | Karakter |
|---|---|---|
| 16 | Q | |
| 17 | R | |
| 18 | S | |
| 19 | T | |
| 20 | U | |
| 21 | V | |
| 22 | W | |
| 23 | X | |
| 24 | Y | |
| 25 | Z | |
| 26 | a | |
| 27 | b | |
| 28 | c | |
| 29 | d | |
| 30 | e | |
| 31 | f |
| Index | Bináris | Karakter |
|---|---|---|
| 32 | g | |
| 33 | h | |
| 34 | i | |
| 35 | j | |
| 36 | k | |
| 37 | l | |
| 38 | m | |
| 39 | n | |
| 40 | o | |
| 41 | p | |
| 42 | q | |
| 43 | r | |
| 44 | s | |
| 45 | t | |
| 46 | u | |
| 47 | v |
| Index | Bináris | Karakter |
|---|---|---|
| 48 | w | |
| 49 | x | |
| 50 | y | |
| 51 | z | |
| 52 | 0 | |
| 53 | 1 | |
| 54 | 2 | |
| 55 | 3 | |
| 56 | 4 | |
| 57 | 5 | |
| 58 | 6 | |
| 59 | 7 | |
| 60 | 8 | |
| 61 | 9 | |
| 62 | + | |
| 63 | / |
Kapcsolódó eszközök
Statisztikáid
0
Átalakítások
0
Másolások
0
Feldolgozott karakterek
Szöveg
Leggyakoribb mód
0
Átlagos méret
100%
Használati pontszám
Kép átalakítása Base64-be lépésről lépésre
A videó nem tölthető be. Az alábbi útmutatót továbbra is követheted.
A videó az angol felületet mutatja.
Az eszköz megnyitásakor a Kép kódolása mód aktív. Kattints az Importálás vagy a Fájlok kiválasztása gombra, és válassz egy képet. Ellenőrizd az előnézetben, hogy a megfelelő fájlt adtad-e meg. Az eredeti fájl nem változik. A Base64-kimenet szöveg, amely nagyobb lehet a képfájlnál.
A kép Base64-kódolásának beállításai
Támogatott képformátumok
Kódolj JPG-, PNG-, GIF-, WebP-, AVIF-, BMP- vagy ICO-fájlt. Az SVG-fájlt húzd az oldalra. A HEIC és HEIF importáláskor JPEG-gé alakul, TIFF esetén pedig az első kép kerül be PNG-ként.
Kódolás és dekódolás
Kódolj egy importált képet, vagy állíts vissza képet Base64-adatokból. A Kép kódolása módban szöveget tölthetsz le. A Kép dekódolása módban a megjelenített képet mentheted, ha az előnézet betöltődött.
További 3 megjelenítéseKevesebb megjelenítése
Képek a vágólapról
Kép kódolása módban a Beillesztés gombbal olvashatsz be másolt képet, ha a böngésző engedélyezi a vágólap elérését.
Importálás 50 MiB-ig
A képfájl legfeljebb 50 MiB lehet. Az előnézet megjelenítését a böngésző formátumtámogatása és a rendelkezésre álló memória is befolyásolja.
Átalakítás a böngészőben
Olvasd be az importált képet Base64-szövegként. A szokásos bemeneti képformátumoknál a fájl eredeti bájtjai változatlanok maradnak.
Gyakori kérdések
Hogyan alakíthatok képet Base64-be?
Válaszd a Kép kódolása módot, és add hozzá a képet. A teljes adat-URI-hoz kapcsold be a Képelőtag beállítást, a nyers Base64-hez kapcsold ki. Másold ki az eredményt, vagy töltsd le szövegfájlként.
Hogyan használhatok Base64-képet HTML-ben vagy CSS-ben?
Kapcsold be a Képelőtag beállítást, és másolj egy data:image/png;base64,... alakú értéket a HTML img elem src attribútumába vagy a CSS background-image: url(...) értékébe.
Hogyan alakíthatom vissza a Base64-et képpé?
Válaszd a Kép dekódolása módot, és add meg a kép Base64-adatait adat-URI-előtaggal vagy anélkül. Ha a böngésző meg tudja jeleníteni a visszaállított formátumot, ellenőrizd az előnézetet, majd mentsd a képet a Letöltés gombbal.
Milyen képformátumokat importálhatok?
A fájlválasztó JPG, PNG, GIF, WebP, AVIF, BMP, TIFF, ICO, HEIC és HEIF formátumot fogad el. Az SVG-fájlt húzd az oldalra. A HEIC és HEIF JPEG-gé alakul, a TIFF első képe pedig PNG-vé. Más támogatott bemeneti formátumoknál az eredeti bájtok változatlanok maradnak. Az importálási korlát 50 MiB.
További 2 megjelenítéseKevesebb megjelenítése
Érdemes nagy képeket Base64-ként közvetlenül az oldalba ágyazni?
A Base64 minden három bemeneti bájthoz négy karaktert használ, és szükség esetén kitöltést is hozzáad. Nagy adatoknál ez körülbelül egyharmados méretnövekedést jelent. A beágyazott kép külön fájlként nem gyorsítótárazható. Nagy vagy több helyen használt képekhez válassz hagyományos képfájlokat.
Feltöltődik a képem egy szerverre?
A kódolás és a dekódolás a böngészőben fut, a bemenet nem kerül átalakítást végző szerverre. A használati számlálók a lap bezárása után is megmaradhatnak a helyi tárhelyen.
Technikai részletek
UTF-8-szöveg kódolása
A TextEncoder UTF-8-bájtokká alakítja a szöveget, majd a btoa Base64-et készít belőlük. A dekódolás atob-ot és TextDecoder-t használ. Az importált szövegfájlok beolvasása UTF-8-ként történik, az érvénytelen UTF-8-bájtsorozatok helyére helyettesítő karakterek kerülnek. A képek importálása külön feldolgozási útvonalon zajlik.
Hol történik az átalakítás?
A szöveges mód UTF-8-bájtokkal dolgozik. A Kép kódolása mód az importált kép adatait olvassa be. A Kép dekódolása mód a böngésző képdekóderével ellenőrzi a visszaállított adatokat.
További 4 megjelenítéseKevesebb megjelenítése
Képformátumok és átalakítás
A Kép kódolása mód megőrzi a szokásos képformátumok bájtjait. A HEIC- és HEIF-képeket először a böngésző próbálja dekódolni, ha képes rá, egyébként a libheif végzi ezt. Az eredmény JPEG lesz. TIFF esetén az UTIF az első képet alakítja PNG-vé. A Kép dekódolása mód a visszaállított képet a böngésző saját dekóderének adja át.
Feldolgozás és memória
A szöveg átalakítása és a Base64 ellenőrzése a böngésző háttérszálán fut. A nagy bemenetek és eredmények továbbra is memóriát foglalnak, a képelőnézetekhez pedig a dekódolt pixeleknek is hely kell. A hosszú szöveg csak olvasható előnézetként jelenik meg, de a teljes eredmény másolható és letölthető marad.
Adat-URI-k HTML-hez és CSS-hez
A Képelőtag beállítás adat-URI-t készít, például data:image/png;base64,... értékkel, HTML img elem src attribútumához vagy CSS url() értékhez. Az előtagos kimenet mindig szabványos Base64-et, kitöltő karaktereket és egyetlen, törés nélküli sort használ. Nyers Base64-hez és a URL-biztos változathoz kapcsold ki az előtagot.
Szöveg és kép bevitele
Először válaszd ki az átalakítási módot. Ezután gépelj vagy illessz be szöveget, importálj szövegfájlt, vagy húzz képet a Kép kódolása módba. A Kép kódolása mód Beillesztés gombjával a vágólapról is beolvashatsz képet, ha a böngésző engedi. Behúzással TXT, JSON és XML importálható. A fájlválasztó emellett CSV-, HTML-, CSS- és JavaScript-fájlokat is kínál.