Jak na úspěšný web

Base64 - online konvertor jakýchkoliv souborů

Převod libovolného souboru do Base64 online

Přetáhněte sem libovolný soubor nebo sem klikněte a vyberte z vašeho zařízení
Zkopírovat base64 do schránky
Base64 zkopírováno do schránky. Vložíte ho Ctrl + V

Jak konvertor do base64 funguje

Vše se děje přímo ve vašem prohlížeči. Data se nikam neposílají ani neuploadují. Po načtení této stránky můžete klidně své zařízení odpojit od internetu, a vše bude stále fungovat.

Soubor načtete přímo z vašeho zařízení tak, že kliknete na oblast pro nahrání souboru, a soubor vyberete, nebo můžete soubor rovnou na tuto oblast přetáhnout myší. Je to na vás, funguje to stejně.

V poli pod nahráním obrázku se následně zobrazí soubor překonverovaný do base64, které si můžete překopírovat nebo snadno využít i tlačítko pod výsledným textem, které vám celý obsah souboru rovnou zkopíruje do schránky, a vy pak jen tento text vložíte zkratkou CTRL + V.

Poznámka: Na malých obrazovkách je toto tlačítko pro zkopírováno do schránky skryto, protože na telefonech je tato funkce znatelně omezena pamětí.

Konvertor není nijak omezený formátem nebo velikostí souboru, takže ho můžete využít na obrázky v jpg, png, gif, webp nebo i svg, ale třeba hudbu v mp3, videa v mp4 nebo prostě libovolné dokumenty či soubory nebo jakékoliv jiné soubory, které chcete na base64 překonvertovat. Převést tak můžete klidně soubory txt, css, html, js a další. Omezení se pak týká spíše paměti vašeho zařízení, kdy budou operace s většími soubory déle trvat, nebo nebude správně fungovat funkce zkopírování do schránky. U těchto souborů ale převod do base64 stejně nedává z hlediska webové optimalizace smysl, ale samotná funkce konvertoru není z hlediska kódu omezena nijak.

Co je Base64 a kdy ho využijeme na webu

Base64 je způsob, jak jakýkoliv soubor i v bitové podobě převést do textu. Můžeme takto převést i textové soubory, ale v praxi se nám toto kódování hodí hlavně při převodu obrázků, které pak můžeme umístit inline přímo do HTML, tedy bez načítání z externích zdrojů. Má to své výhody i nevýhody, ale pro obrázky, které se nacházejí v horní části obrazovky, se načtení může hodit, protože se obrázky nedonačítají postupně, i když za cenu zvětšení HTML dokumentu a celkového zvětšení samotného obrázku.

Jde tedy o dvojsečnou zbraň, kdy je potřeba myslet na to, že zvětšení HTML dokumentu znamená odložení zobrazení čehokoliv z webové stránky (HTML dokument se prostě musí nejdříve celý stáhnout, kdy jsou v samotném dokumentu navíc právě prvky v base64, které jsou navíc v případě obrázků cca o 30 % větší, než klasické formáty jpg/png/gif).

Na druhou stranu tím, že jsou některé prvky vloženy ve formátu base64, se zobrazí prostě okamžitě. U některých prvků je toto žádané, třeba u loga, ale rozhodně bychom takto neměli vkládat prvky, které jsou na stránce níže nebo které jsou samy o sobě veliké, a tedy je vkládat jako součást HTML dokumentu, ne jako externí soubor, může znamenat i značné zpomalení celého webu.

V praxi tak sice o něco zvyšujeme čas na načtení čehokoliv na webové stránce, na druhou stranu je ono načtení plynulejší. U menších obrázků typu logo webu by pak zvětšení HTML nemělo být nijak razantní, takže třeba tento obrázek bych klidně v base64 doporučil načítat.

Testujte tedy opatrně a zkoušejte, jestli tyto prvky v base64 naopak nezpomalují web.

Jak base64 vložit na web

Base64 má vlastně formát URL. Cokoliv byste tedy vkládali jako URL, můžete namísto této adresy vložit jako text base64. Pokud jde třeba o obrázek (nebo libovolný soubor, který internetový prohlížeč přečte, tedy klidně celý html dokument), tak si můžete tento text překopírovat do adresního řádku vašeho internetového prohlížeče, a prohlížeč zobrazí tento obrázek již ve správné podobě, tedy jako obrázek.

 

Podobné články

Back to top button