Obrázek do Base64
Base64 kóduje binární bajty obrázku jako ASCII text, který můžete vložit do HTML img src, CSS url() nebo JSON dat. Užitečné pro malé ikony, identifikátory URI dat v prototypech a rozhraní API, která očekávají vložené obrázky. Kódování probíhá lokálně — nic se nenahrává.
Jak kódovat obrázek do Base64
1. Nahrajte soubor obrázku (udržujte jej malý — praktické je méně než 100 kB).
2. Zkopírujte vygenerovaný řetězec Base64 nebo úplnou adresu URL dat.
3. Vložte do kódu HTML, CSS nebo konfigurace.
4. Test v cílovém prostředí — někteří e-mailoví klienti omezují URI dat.
Příklady kódování
Vložené logo v HTML e-mailu
Logo PNG o velikosti 2 kB jako data:image/png;base64,... zabraňuje externímu blokování obrázků v přísných podnikových schránkách.
CSS pozadí pro prototyp
Vložte texturu Base64 do jednosouborového dema bez hostování aktiv.
Testovací přípravek API
Zahrňte malý Base64 JPEG do těla požadavku JSON pro testování koncového bodu nahrávání obrázků.
Když obrázky Base64 pomáhají
• Pro velmi malá aktiva, kde jeden požadavek HTTP stojí více než režie velikosti inline.
• Pro offline prototypy HTML s jedním souborem.
• Když je externí hosting nedostupný v uzamčených prostředích.
Kdy se vyhnout obrázkům Base64
• Pro velké fotografie — Base64 roste o ~33 % a přeplňuje mezipaměť HTML.
• Když je k dispozici ukládání do mezipaměti CDN a responzivní sada srcset.
• Když mnoho e-mailových klientů blokuje URI dat, použijte místo toho hostované obrázky.
Base64 v rozpočtech na výkon
Inlining odstraňuje zpáteční cesty, ale zabraňuje samostatnému ukládání obrázku do mezipaměti prohlížeče. Pro kritické drobné ikony nad ohybem používejte střídmě; líně vkládejte velká média normálně.
Vtipy e-mailového klienta
Desktop Outlook má historicky omezenou podporu URI dat. Než se v kampaních spolehnete na vložené obrázky, vyzkoušejte Gmail, Apple Mail a Outlook.
Zabezpečení
Nevkládejte nedůvěryhodný Base64 na stránky, aniž byste rozuměli obsahu — stále je to spustitelný kontext v HTML. Kódujte pouze svůj vlastní majetek.
Časté dotazy
Proč je Base64 větší než soubor?
Kódování používá 4 znaky na každé 3 bajty — zhruba 33 % režie plus předpona datové adresy URL.
Co je datová adresa URL?
Formát: data:image/png;base64,iVBORw0KG... — typ MIME plus zakódované užitečné zatížení.
Maximální velikost pro e-mail?
Udržujte celkový nárůst zpráv pod 10—20 kB; mnoho klientů se dusí obrovskými inline obrázky.
Dekódovat zpět do souboru?
V případě potřeby použijte kodér/dekodér Base64 k obrácení ASCII na binární.
Jsou obrázky nahrané?
Ne — FileReader čte lokálně v prohlížeči.
SVG na Base64?
Možné pro malý text SVG; rastrové formáty jsou běžnější pro datové URI.