Hogyan működik a kép-Base64 konverzió
A teljes konverzió a böngésződben fut a File API és a beépített btoa függvény segítségével.
- Dobsz be vagy kiválasztasz egy képet. A böngésző Blob-ként olvassa be a helyi lemezről.
- A fájl 1 MB-os darabokban kerül beolvasásra.
- A bináris karakterlánc átadásra kerül a btoa függvénynek.
- A fájl MIME típusa beolvasásra kerül, és data: előtagként kerül hozzáfűzésre.
- Az oldal négy kimenetet állít össze ebből az URI-ból.
Miért érdemes egy képet data URI-ként kódolni?
- Egy kis logó vagy ikon data URI-ként való inline-olása eltávolít egy külön hálózati körutat.
- Egy oldal vagy stíluslap a képeivel inline önálló. Offline is működik.
- Sok levelező kliens blokkolja a távoli képeket. Egy logó Base64-ként való inline-olása azonnal megjelenik.
- A kódolás teljesen a böngésződben történik, így érzékeny képek soha nem kerülnek harmadik fél szerverére.
A Base64 képek gyakori felhasználásai
A data URI-k ott jelennek meg, ahol egy kép elég kicsi ahhoz, hogy egy külön kérés többe kerüljön:
- Inline CSS ikonok: 1-2 KB-os sprite vagy ikon bedobva egy stíluslapba.
- E-mail aláírások és hírlevelek: logó beágyazva
tag-ként.
- Build-eszköz inline-olás: Webpack és Vite inline-olja az eszközöket.
Hogyan néz ki egy Base64 kép?
Vegyünk egy apró 1×1 átlátszó PNG-t. A nyers bájtjai csak 67 bájtosak, de kódolva a iVBORw0KGgoAAAA... karakterlánccá válik.
A képem feltöltődik bárhova?
Nem. A konverzió a böngésző File API-ját és a natív btoa függvényt használja. A kép teljesen az eszközödön van kódolva.
Miért nagyobb a Base64 kimenet, mint az eredeti kép?
A Base64 minden három bájtot négy ASCII karakterrel reprezentál, így a kódolt szöveg kb. 33%-kal nagyobb.
Milyen képformátumokat tudok konvertálni?
Bármely formátumot, amit a böngésződ képként ismer fel: PNG, JPEG, GIF, WebP, SVG és BMP.
Dobj be egy képet, másold ki a data URI-t vagy a szükséges részletet, és illeszd be a HTML-edbe, CSS-edbe vagy e-mail sablonodba.