Kép Base64 konvertáló
Alakíts egy képet Base64 data URI-vá HTML-be, CSS-be vagy JSON-ba ágyazáshoz, teljesen a böngésződben.
Kapcsolódó eszközök
Így használd a következőt: Kép Base64-re
- 01
Válassz egy képet az eszközödről.
- 02
Másold a data URI-t, vagy a kész CSS kódrészletet.
- 03
Illeszd be a HTML-edbe, CSS-edbe vagy JSON-odba.
Mit csinál ez az átalakító
Ez a kép-Base64 átalakító adat-URI-vá alakít egy képet, vagyis egy hosszú szöveggé, amely közvetlenül beágyazza a képet, és egy használatra kész CSS-háttérrészletet is ad. Így külön fájlra hivatkozás helyett közvetlenül beágyazhatod a képet.
Helyben, a böngésződben fut, tehát a képed az eszközödön kerül beolvasásra, és soha nem töltődik fel.
Miért ágyazz be egy képet
Az adat-URI a teljes képet a jelölésen belül hordozza, így a böngészőnek nem kell külön hálózati kérést indítania a letöltéséhez. Kis elemeknél, például ikonoknál, ez a megspórolt oda-vissza út gyorsabbá teheti egy oldal érzetét.
A csere: méret és gyorsítótárazás
A bökkenő a méret és a gyorsítótárazás. A Base64 nagyjából 33 százalék többletet ad, mert korlátozott szöveges ábécével ábrázolja a bináris adatot, és a beágyazott kép nem gyorsítótárazható külön, tehát minden olyan oldallal újra letöltődik, amely tartalmazza.
Az ökölszabály az, hogy a kis képeket, ikonokat, apró logókat vagy egy sprite-ot ágyazd be, ahol a kérés megspórolása megéri a többletet, a nagyobb képeket pedig hagyd meg rendes fájlként, amelyet a böngésző gyorsítótárazhat és párhuzamosan tölthet be.
Hol működnek az adat-URI-k
Az adat-URI-k mindenütt működnek, ahol URL-t fogadnak el: egy img src attribútumban, egy CSS-háttérben, vagy egy JSON- vagy e-mail-sablonmezőben. Ettől jól használhatók magukban álló részletekhez.
Gyakran ismételt kérdések
Feltöltődik a képem egy szerverre?
Nem. A képet teljesen a böngésződben olvassa, így soha nem hagyja el az eszközöd.
Mikor használjak data URI-t?
Kis képekhez, mint az ikonok, ahol egy extra hálózati kérés elkerülése megéri a méretnövekedést. Nagy képekhez egy normál fájl jobb.
Miért nagyobb a Base64, mint a fájl?
A Base64 kódolás körülbelül 33 százalék többletet ad, mert a bináris adatokat egy korlátozott szöveges ábécével ábrázolja.