Jak funguje převod obrázku do Base64
Celý převod běží ve vašem prohlížeči pomocí File API a vestavěné funkce btoa — není stažena žádná knihovna kodeků a žádný server nevidí obrázek. Zde je pipeline od začátku do konce:
- Přetáhnete nebo vyberete obrázek. Prohlížeč jej přečte jako Blob z vašeho lokálního disku, nikdy nekopíruje bajty na server.
- Soubor je čten v 1 MB blocích a bajty každého bloku jsou připojeny k binárnímu řetězci. Blokování udržuje velké obrázky před přetečením JavaScript zásobníku.
- Binární řetězec je předán btoa, která mapuje každé tři bajty na čtyři Base64 znaky z abecedy A–Z, a–z, 0–9, plus a lomítko.
- MIME typ souboru (image/png, image/jpeg atd.) je přečten z File objektu a připojen jako data: prefix, čímž vzniká kompletní data:image/…;base64,… URI.
- Stránka sestaví čtyři výstupy z této URI — plné data URI, surové Base64 bez prefixu, hotový
tag k vložení a CSS background-image úryvek — každý s vlastním tlačítkem kopírování.
Proč kódovat obrázek jako data URI?
- Vložení malého loga nebo ikony jako data URI odstraňuje samostatný síťový round-trip, takže stránka nebo e-mail vykreslí svůj první snímek o něco dříve.
- Stránka nebo stylopis s inline obrázky je soběstačný. Funguje offline a můžete jej kopírovat bez tahání složky aktiv s sebou.
- Mnoho e-mailových klientů blokuje propojené vzdálené obrázky ve výchozím nastavení. Vložte logo jako Base64 a zobrazí se v okamžiku otevření zprávy, bez nutnosti vzdáleného načítání.
- Kódování probíhá zcela ve vašem prohlížeči, takže citlivé obrázky nikdy necestují na server třetí strany. To pokrývá screenshoty, skeny ID a interní diagramy.
Běžná použití Base64 obrázků
Data URI se objevují všude, kde je obrázek dostatečně malý na to, že samostatný požadavek stojí víc než ~33% nafouknutí velikosti, které Base64 přidává. Tři vzory se objevují neustále:
- Inline CSS ikony: 1–2 KB sprite nebo ikona vložená do stylopisu jako background-image: url(data:…) tak, že pravidlo je plně soběstačné.
- E-mailové podpisy a newslettery: logo vložené jako
s data URI src se zobrazí, i když klient blokuje vzdálené obrázky.
- Inline do build nástrojů: bundlery jako Webpack a Vite vkládají assety pod bajtovým prahem automaticky a tento nástroj vám umožní náhled přesně toho, jak takový výstup vypadá.
Jak vypadá Base64 obrázek?
Vezměte malý 1×1 průhledný PNG. Jeho surové bajty jsou pouze 67 bajtů, ale zakódovaný se stane řetězcem iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M8AAAMEAYC0aGgAAAAASUVORK5CYII= a plné data URI je data:image/png;base64,iVBORw0KGgo…. Všimněte si, že kódovaná forma je zhruba o třetinu větší než originál. To je kompromis za to, že binární data jsou bezpečná k přímému vložení do textu.
Je můj obrázek někam nahrán?
Ne. Převod používá File API prohlížeče a nativní funkci btoa k zakódování obrázku zcela na vašem zařízení. Můžete se přesvědčit sami: otevřete vývojářské nástroje prohlížeče, přepněte na panel Sítě a převeďte obrázek — jediné požadavky, které uvidíte, jsou načtení stránky a případné reklamy. Nic ve tvaru obrázku není odesláno na server, což je důvod, proč je to bezpečné pro screenshoty, ID dokumenty a interní diagramy.
Proč je Base64 výstup větší než můj původní obrázek?
Base64 představuje každé tři bajty binárních dat čtyřmi ASCII znaky, takže kódovaný text je asi o 33 % větší než zdrojový soubor. Údaj o velikosti data URI na této stránce ukazuje přesnou nafouknutou délku. Tato režie je důvod, proč data URI dávají smysl pouze pro malé obrázky — vložení 2 MB fotografie by nafouklo vaše HTML nebo CSS mnohem víc, než by stál samostatný požadavek. Jako pravidlo palce vkládejte obrázky pod zhruba 4 KB a na větší odkazujte.
Které formáty obrázků mohu převést?
Funguje jakýkoli formát, který váš prohlížeč rozpozná jako obrázek, protože nástroj čte surové bajty místo dekódování obrázku. To zahrnuje PNG, JPEG, GIF, WebP, SVG a BMP. MIME typ je přečten přímo ze souboru, takže data: prefix vždy odpovídá skutečnému formátu — JPEG vytváří data:image/jpeg a SVG vytváří data:image/svg+xml. SVG stojí za zvláštní poznámku: je to již text, takže pro SVG je URL-kódované data URI často menší než Base64 verze, i když tento nástroj vydává Base64 formu pro konzistenci.
Přetáhněte obrázek, zkopírujte data URI nebo úryvek, který potřebujete, a vložte jej do svého HTML, CSS nebo e-mailové šablony. Každý bajt zůstává na vašem zařízení. Žádné nahrávání, žádný účet, žádný serverový round-trip.