Jak nástroj použít
- 1.Pro zakódování nechte zvolené „Obrázek do Base64“ a přetáhněte obrázek na stránku, vložte ho ze schránky nebo klikněte na „Vybrat obrázek“.
- 2.Zkopírujte verzi, kterou potřebujete: data URI pro
srcnebourl(), čisté Base64 pro API, nebo hotovou značku HTML či pravidlo CSS. Soubory SVG dostanou navíc kratší data URI kódovanou pro URL. - 3.Pro dekódování přepněte na „Base64 na obrázek“ a vložte data URI nebo čisté Base64. Funguje i kód CSS nebo HTML, který ji obsahuje.
- 4.Zkontrolujte náhled, formát a velikost a kliknutím na Stáhnout uložte obrázek se správnou příponou.
Co je data URI
Data URI vloží celý soubor přímo do URL, takže stránka může zobrazit obrázek bez samostatného stahování. Zápis vypadá takto: data:[<media type>][;base64],<data>, například data:image/png;base64,iVBORw0KGgo…. Typ média říká prohlížeči, o jaká data jde, a ;base64 znamená, že jsou zakódovaná v Base64, a ne jako text kódovaný pro URL.
Base64 zapíše každé 3 bajty souboru jako 4 obyčejné znaky ASCII, a proto je výsledek zhruba o třetinu větší než obrázek. Gzip a Brotli část toho při přenosu stránky získají zpět, prohlížeč ale stejně musí dekódovat celý text.
Kdy vložení obrázku pomůže a kdy uškodí
Vložení se vyplatí u velmi malých obrázků: ikon, drobných pozadí a zástupných obrázků o velikosti kilobajtu či dvou, kde by samostatný požadavek stál víc než samotné bajty. Hodí se také pro HTML reporty v jediném souboru, testovací data a API nebo dokumenty JSON, které očekávají obrázek jako text.
U větších obrázků stránky obvykle zpomalí. Obrázek se nedá samostatně uložit do mezipaměti, takže se stahuje znovu s každou stránkou nebo stylem, který ho obsahuje. V CSS navíc zdržuje vykreslení, protože prohlížeč čeká na celý soubor se styly. Přes HTTP/2 jsou další požadavky levné, takže nad pár kilobajtů je lepší volbou běžný soubor s obrázkem.
Zvláštním případem je e-mail: Gmail ani Outlook obrázky v data URI nezobrazují, takže newslettery by měly odkazovat na obrázky na serveru, nebo je přikládat jako vložené přílohy (CID).
Kratší data URI pro SVG
SVG je text, takže Base64 vůbec nepotřebuje. SVG data URI kódovaná pro URL, například data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'…, bývá o 15 až 25 % kratší, lépe se komprimuje a ve vašem CSS zůstane čitelná.
Nahradit stačí jen pár znaků: <, > a hlavně # (zapsaný jako %23), který by jinak URL ukončil, například v barvě fill='%23f00'. Nástroj navíc sloučí mezery a přepne na jednoduché uvozovky, aby se URI vešla do url("…") bez dalšího escapování.
Otázky a odpovědi
Nahrává se můj obrázek někam?
Ne. Obrázek načte a zakóduje váš prohlížeč přímo ve vašem zařízení a vložené Base64 se dekóduje tamtéž. Nic se neposílá do nestoo ani nikam jinam.
Proč je verze v Base64 větší než soubor s obrázkem?
Base64 zapisuje každé 3 bajty pomocí 4 znaků z abecedy o 64 znacích, takže text je zhruba o 33 % větší než soubor, plus krátká předpona data:image/…;base64,. To je cena za uložení binárních dat jako prostého textu.
Jak použít data URI v HTML, CSS, Markdownu nebo JSON?
V HTML ji vložte do atributu src obrázku: <img src="data:image/png;base64,…" alt="">. V CSS ji použijte v url(): background-image: url("data:…");. V JSON je to obyčejný řetězec, mnoho API ale chce jen část s Base64 bez předpony data:. Markdown v zásadě přijímá , GitHub a mnoho dalších webů ale obrázky v data URI odstraňují, takže tam odkažte na obrázek na serveru.
Jak velký může obrázek být?
Nástroj zakóduje obrázky až do 20 MB a prohlížeče zobrazí data URI o velikosti několika megabajtů. V praxi ale vkládané obrázky držte na několika kilobajtech: větší nafukují HTML nebo CSS a nedají se samostatně uložit do mezipaměti.
Jak převedu data URI zpět na soubor s obrázkem?
Přepněte na „Base64 na obrázek“ a vložte data URI nebo samotné Base64. Nástroj rozpozná skutečný formát přímo z dat, zobrazí náhled a uloží soubor se správnou příponou, i když URI uváděla jiný typ.