Kép a Base64-hez
A Base64 ASCII-szövegként kódolja a bináris képbájtokat, amelyeket beilleszthet a HTML img src, CSS url() vagy JSON fájlba. Hasznos apró ikonokhoz, prototípusokban lévő adat-URI-khoz és API-khoz, amelyek soron belüli képeket várnak el. A kódolás helyben történik — semmi sem kerül feltöltésre.
Hogyan lehet képet kódolni Base64-be
1. Töltsd fel a képfájlt (legyen kicsi — ~100 KB alatt praktikus).
2. Másold a generált Base64 karakterláncot vagy a teljes adat URL-címét.
3. Illessze be a HTML-be, CSS-be vagy konfigurációjába.
4. Teszt a célkörnyezetben — egyes levelezőkliensek korlátozzák az adat-URI-kat.
Kódolási példák
Inline logó HTML e-mailben
A 2 KB-os PNG logó data:image/png;base64,... elkerüli a külső képblokkolást szigorú vállalati dobozokban.
CSS háttér a prototípushoz
Illesszen be egy Base64 textúrát egy egyfájlos demóba eszköztárhely nélkül.
API teszt fixture
Szereljen be egy apró Base64 JPEG-fájlt a JSON-kérelem törzsébe a képfeltöltési végpont teszteléséhez.
Mikor használd ezt az eszközt
• Nagyon kis eszközökhöz, ahol egy HTTP-kérés többe kerül, mint a soron belüli méret feletti költség.
• Offline egyfájlos HTML prototípusokhoz.
• Ha a külső tárhely nem érhető el zárt környezetben.
Mikor válassz mást
• Nagy fotók esetén — a Base64 ~33%-kal növekszik, és felduzzasztja a HTML-gyorsítótárat.
• Ha elérhető a CDN-gyorsítótár és az érzékeny srcset.
• Amikor sok e-mail kliens blokkolja az adat-URI-kat, használjon ehelyett tárolt képeket.
A Base64 teljesítményköltségvetésekben
A beágyazás eltávolítja az oda-vissza utakat, de megakadályozza a kép külön-külön történő gyorsítótárazását a böngésződben. Használd takarékosan a hajtás feletti kritikus apró ikonokhoz; A nagy médiát általában lustán töltse be.
Az e-mail kliens furcsaságai
Az Outlook desktop korábban korlátozott adat-URI-támogatással rendelkezik. Tesztelje a Gmailt, az Apple Mailt és az Outlookot, mielőtt a beágyazott képekre hagyatkozna a kampányokban.
Biztonság
Ne illesszen be nem megbízható Base64-et az oldalakba anélkül, hogy megértené a tartalmat — ez továbbra is végrehajtható kontextus a HTML-ben. Csak a saját eszközeit kódolja.
Gyakori kérdések
>>>> fájl?
A kódolás 4 karaktert használ 3 bájtonként — ez nagyjából 33% többletköltség plusz az adatok URL előtagja.
Mi az adat URL?
Formátum: data:image/png;base64,iVBORw0KG... — MIME-típus plusz kódolt hasznos teher.
Maximális e-mail-méret?
Az üzenetek száma 10–20 KB alatt legyen; sok ügyfél megfullad a hatalmas beágyazott képektől.
Visszakódolni a fájlba?
Használd a Base64 kódoló/dekódoló eszközt az ASCII binárissá alakításához, ha szükséges.
Fel vannak töltve képek?
Nem — a FileReader helyben olvasd a böngésződben.
SVG a Base64-hez?
Kis SVG szöveg esetén lehetséges; A raszteres formátumok gyakoribbak az adat-URI-k esetében.