Co je to Base64 a proč se používá pro obrázky?
Base64 je kódovací schéma, které převádí binární data (jako jsou fotky, soubory) do formátu obyčejného textu (skládajícího se z písmen a čísel). Ve webovém vývoji to umožňuje použít tzv. Data URI. Místo toho, abyste prohlížeči řekli "běž na server a stáhni obrázek.png", řeknete mu "tady máš textový řetězec, který se rovná obrázku, rovnou ho vykresli".
Kdy je vhodné Base64 obrázky použít?
- HTML e-maily (Newslettery): E-mailoví klienti často blokují stahování externích obrázků z bezpečnostních důvodů. Vložení loga pomocí Base64 zaručí, že se příjemci zobrazí ihned.
- Drobné ikony a loga: Pokud máte na webu malou SVG ikonku nebo loader (točící se kolečko), vložením do Base64 ušetříte jeden HTTP požadavek na server, což může mírně zrychlit načítání stránky (LCP / FCP metriky).
- Jednosouborové weby: Když chcete vytvořit ukázkovou HTML stránku, která musí fungovat offline a nesmí záviset na žádných externích složkách.
Na co si dát pozor (Nevýhody)
Převod do Base64 obvykle zvětší datovou velikost souboru o 30 %. Pokud převedete velkou 2MB fotku z dovolené, váš HTML nebo CSS soubor naroste o 2,6 MB! Prohlížeč navíc takto vložené obrázky nemůže efektivně ukládat do mezipaměti (cache) tak, jako běžné `.jpg` soubory. Nástroj proto vždy používejte pouze na malé obrázky s velikostí v řádech desítek kilobajtů.
Lokální a bezpečné zpracování: Váš obrázek se po přetažení nikam neodesílá. Nástroj používá API vašeho internetového prohlížeče (FileReader) k přečtení a kódování souboru přímo na vašem zařízení.