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.
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.
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ě.
Č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.