Co je Base64 a kdy jej použít pro vkládání obrázků?

Pokud jste strávili nějaký čas prací s moderním webovým vývojem, pravděpodobně jste se setkali se zdánlivě nekonečným, chaotickým řetězcem znaků začínajícím data:image/png;base64, po kterém následuje čistý nesmysl. Toto je obrázek zakódovaný v Base64.

Co přesně je kódování Base64?

Base64 je ve svém jádru schéma binárního kódování na text. Přebírá binární data (jako obrázek, zvukový soubor nebo kompilovaný dokument) a převádí je do formátu řetězce ASCII. Název "Base64" pochází ze skutečnosti, že k reprezentaci dat používá abecedu 64 znaků (A-Z, a-z, 0-9, + a /).

Tato konverze je neuvěřitelně užitečná, protože mnoho internetových protokolů (jako HTTP, HTML a CSS) je navrženo speciálně pro bezpečné zpracování prostého textu. Převedením binárních dat na text zaručujeme, že data mohou být přenášena těmito protokoly bez poškození.

Kdy byste měli vkládat obrázky pomocí Base64?

Vložení řetězců Base64 přímo do kódu HTML (`<img src="data:image...">`) nebo CSS (`background-image: url("data:image...")`) namísto použití standardní adresy URL může mít významné výhody, ale pouze ve velmi specifických případech použití:

• Mikroikony a číselníky: Máte-li drobné prvky uživatelského rozhraní (jako je číselník načítání o velikosti 1 kB nebo značka zaškrtnutí), jejich kódování jako Base64 eliminuje potřebu, aby prohlížeč pro načtení souboru obrázku zadával samostatný požadavek HTTP. To urychluje vykreslování kritického uživatelského rozhraní.
• E-maily HTML: Mnoho e-mailových klientů blokuje načítání externích obrázků z důvodu ochrany osobních údajů. Vložení loga přímo do HTML pomocí Base64 může tyto bloky obejít a zajistit, aby váš e-mail vypadal dokonale.
• Webové aplikace s jedním souborem: Pokud vytváříte nástroj, který je třeba distribuovat jako jeden soubor `.html`, který funguje zcela offline, vložení všech prostředků přes Base64 je jediný způsob, jak jej správně zabalit.

Kdy byste se měli vyhnout Base64?

Největší nevýhodou kódování Base64 je, že zvětšuje velikost souboru podkladu o přibližně 33 %. Z obrázku o velikosti 1 MB se stane textový řetězec o velikosti 1,33 MB.

Prohlížeče navíc nemohou mezipaměti řetězce Base64 nezávisle. Pokud do svého souboru CSS vložíte masivní řetězec Base64, prohlížeč musí tento masivní soubor CSS stáhnout při každém načtení stránky a analýza velkých textových řetězců blokuje hlavní vlákno, což způsobuje vážné zpoždění (špatný čas na interakci).

Zlaté pravidlo: Nikdy Base64 nekóduje velké fotografie nebo obrázky hrdinů. Kódujte pouze malé ikony SVG nebo mikroskopické rastrové soubory, kde je režie požadavku HTTP horší než 33% penalizace velikosti souboru.