Dekodér Base64 obrázků | Dekódování a náhled obrázků online

Co je dekodér obrázků base64?

Dekodér obrázků base64 je nástroj, který převádí textový řetězec zakódovaný v base64 zpět na obrázek. Base64 je způsob zápisu binárních dat, například bajtů obrazového souboru, pomocí pouhých 64 běžných textových znaků (písmen, číslic, +, / a = pro doplnění). Prohlížeče, e-mailové zprávy a mnohá rozhraní API ukládají obrázky tímto způsobem, takže obrázek může cestovat uvnitř běžného textu místo jako samostatný soubor. Dekodér tento proces obrací: po vložení řetězce se zobrazí původní obrázek.

Formát datové URL

Na webu se obrázek base64 obvykle zapisuje jako datová URL. Vzor je:

Například:

Každá část má svůj účel:

• data: označuje, že jde o datovou URL, nikoli o běžnou webovou adresu.
• image/png je typ MIME, který prohlížeči říká, o jaký druh souboru jde.
• ;base64 označuje, že data za čárkou jsou zakódována v base64.
• Vše za čárkou je samotný zakódovaný obrázek.

Jak dekodér funguje

Dekódování probíhá ve čtyřech krocích.

1. Nástroj ověří, zda řetězec začíná řetězcem data:. Datová URL označující jiný typ média než obrázek, například data:text/plain, je okamžitě odmítnuta, protože ji nelze zobrazit jako obrázek.
2. Odstraní všechny mezery, tabulátory a konce řádků, protože dlouhé řetězce base64 jsou někdy zalomeny do více řádků. Obsah používající místo base64 procentové kódování, které povoluje také RFC 2397, se ponechá beze změny.
3. Dekóduje text base64 zpět na nezpracované bajty.
4. Prohlédne prvních několik bajtů výsledku. Každý běžný obrazový formát začíná pevně danou posloupností bajtů, které se říká signatura neboli „magické číslo“. Soubory PNG začínají řetězcem 89 50 4E 47, soubory JPEG řetězcem FF D8 FF a podobně. Dekodér tyto signatury porovná a označí obrázek typem, který identifikují.

Rozhodují bajty, nikoli popisek. Pokud datová URL uvádí data:image/png, ale bajty začínají FF D8 FF, dekodér URL sestaví znovu jako data:image/jpeg, takže řetězec nabízený tlačítkem „Kopírovat URL obrázku“ nikdy nesprávně nepopisuje svůj obsah.

Pokud řetězec nemá předponu data:, dekodér s ním zachází jako s nezpracovanými daty base64, dekóduje ho a stejným způsobem přečte signaturu. Pokud bajty neodpovídají žádné známé signatuře obrázku a nevypadají jako text SVG, dekodér oznámí, že řetězec zřejmě není obrázek. Formát neodhadne ani nepoužije žádný výchozí typ.

SVG se zpracovává odlišně, protože jde o textový formát (XML), nikoli o binární formát, a proto nemá pevnou bajtovou signaturu. Dekodér v prvních 1024 bajtech dekódovaného textu hledá značku <svg, deklaraci XML, například <?xml version="1.0"?>, po níž následuje uvedená značka, nebo deklaraci typu dokumentu SVG, po níž následuje uvedená značka. Značka pořadí bajtů na úplném začátku, kterou některé editory přidávají do souborů UTF-8, se ignoruje. Protože SVG nelze identifikovat pomocí bajtové signatury, datová URL deklarující image/svg+xml si ponechává deklarovaný typ.

Vzorec pro velikost obrázku base64

Base64 převádí každé 3 bajty binárních dat na 4 textové znaky. Vzorec pro délku kódovaného řetězce je:

Symboly ⌈ ⌉ znamenají „zaokrouhlit nahoru na nejbližší celé číslo“, protože base64 vždy pracuje ve skupinách po 4 znacích a neúplnou skupinu doplňuje znaky =.

U velkých souborů to znamená přibližně 33 % nárůst velikosti, protože 4 ÷ 3 ≈ 1,33. U malých souborů může být procentní nárůst větší, protože zaokrouhlení nahoru na další skupinu 4 znaků má při malém množství dat větší vliv.

Příklad výpočtu

Výše uvedený příklad PNG se dekóduje na 85 bajtů obrazových dat. Při použití vzorce:

Řetězec base64 má skutečně délku 116 znaků, což odpovídá výpočtu. To je 36 % nárůst oproti původním 85 bajtům (116 ÷ 85 ≈ 1,36), tedy o něco více než 33 %, protože soubor je velmi malý.

Podporované obrazové formáty

Dekodér přečte bajtovou signaturu dekódovaných dat a podle ní určí formát. Rozpoznává tyto typy:

Jak dekódovat obrázek base64

1. Zkopírujte řetězec base64, s předponou data:image/... nebo bez ní, z HTML, CSS, odpovědi API či e-mailu.
2. Vložte jej do vstupního pole.
3. Obrázek se dekóduje automaticky okamžik po ukončení psaní nebo po stisknutí tlačítka pro dekódování.
4. Dekódovaný obrázek se zobrazí v oblasti náhledu. Jeho datovou URL lze zkopírovat tlačítkem „Kopírovat URL obrázku“ a samotný obrázek lze uložit kliknutím pravým tlačítkem v náhledu a volbou uložení obrázku, protože se v prohlížeči vykresluje jako běžný prvek obrázku.

Běžné použití obrázků base64

• Vložení do HTML, CSS nebo JavaScriptu: vložení obrazových dat přímo do kódu eliminuje požadavek na samostatný soubor.
• E-mailové šablony: některé e-mailové klienty ve výchozím nastavení blokují obrázky odkazované z externích zdrojů, ale vložený obrázek base64 se přesto zobrazí.
• Nástroje HTML v jediném souboru: celá stránka včetně obrázků může být distribuována jako jeden samostatný soubor.
• Odpovědi API: obrázek může cestovat uvnitř dat JSON, aniž by potřeboval vlastní koncový bod.
• Pozadí a ikony CSS: malé ikony se někdy zapisují přímo do šablony stylů jako datová URL.

Nevýhody obrázků base64

Kódování base64 je praktické, ale má své nevýhody:

• Zakódovaný text je přibližně o třetinu větší než původní soubor.
• Prohlížeče nemohou vložený obrázek ukládat do mezipaměti stejným způsobem jako odkazovaný soubor, takže se stáhne znovu při každém načtení okolní stránky nebo šablony stylů.
• Prohlížeč musí text base64 před zobrazením obrázku dekódovat, což vyžaduje malé množství dodatečného zpracování.
• Kvůli nárůstu velikosti a nemožnosti využít mezipaměť je vkládání base64 vhodné pro malé obrázky, například ikony a jednoduchá loga. Větší fotografie se obvykle lépe poskytují jako běžné obrazové soubory.

Často kladené otázky

Co je dekodér obrázků base64?

Jde o nástroj, který převádí textový řetězec zakódovaný v base64 zpět na zobrazitelný obrázek, například soubor PNG, JPEG, GIF, WebP, BMP nebo SVG.

Jak dekóduji obrázek base64?

Vložte řetězec base64 s předponou data:image/... nebo bez ní do dekodéru. Ten řetězec přečte, dekóduje jej a zobrazí výsledný obrázek.

Lze řetězec base64 dekódovat bez předpony datové URL?

Ano. Dekodér s ním zachází jako s nezpracovanými daty base64, dekóduje bajty a podle prvních několika bajtů určí formát z jeho signatury, například PNG, JPEG, GIF, WebP, BMP nebo ICO. SVG se rozpoznává hledáním značky <svg v dekódovaném textu. Pokud žádná z těchto možností neodpovídá, dekodér oznámí, že řetězec zřejmě není obrázek, místo aby formát odhadoval.

Proč se můj obrázek base64 nedekóduje?

Ve většině případů jde o jednu ze tří příčin. Řetězec může obsahovat znaky mimo standardní abecedu base64, kterou tvoří A–Z, a–z, 0–9, +, / a =; varianta base64url používaná v některých webových tokenech místo nich zapisuje - a _ a není přijímána. Řetězec mohl být uprostřed zkrácen, takže jeho délka je o jedna větší než násobek čtyř, což žádný platný řetězec base64 nemá. Nebo bajty jednoduše nemusí patřit k žádnému podporovanému obrazovému formátu. Chybějící doplnění = samo o sobě není problém a mezery či konce řádků se před dekódováním odstraňují.

Je kódování base64 formou zabezpečení nebo šifrování?

Ne. Base64 je pouze způsob reprezentace bajtů jako textu; nic neskrývá. Kdokoli může řetězec base64 během několika sekund dekódovat pomocí bezplatného nástroje, takže by se nikdy neměl používat k ochraně soukromých obrázků ani jiných dat.

O kolik je řetězec base64 větší než původní obrázek?

U větších souborů přibližně o třetinu, protože každé 3 bajty původních dat se převedou na 4 textové znaky. Obrázek o velikosti 100 KB bude po zakódování mít přibližně 133 KB. U malých obrázků může být procentní nárůst poněkud vyšší kvůli zaokrouhlování.

Dějiny

Base64 vzniklo z kódovacích schémat vytvořených v 1970. a 1980. letech pro přenos binárních dat poštovními systémy, které zpracovávaly pouze běžný text; pro e-mail bylo formalizováno v RFC 989 (1987) a později v RFC 1421. Jeho používání pro vkládání obrázků do webových stránek umožnilo definování schématu URL data: v RFC 2397 (1998) a v polovině 2000. let se rozšířilo, když vývojáři hledali způsoby, jak omezit počet samostatných požadavků HTTP, zejména na pomalých mobilních připojeních.

Reference

1. RFC 4648: Kódování dat Base16, Base32 a Base64
2. RFC 2397: Schéma URL „data“
3. MDN Web Docs: datové URL
4. Standard WHATWG pro rozpoznávání typu MIME