Převodník Obrázek ⇔ Base64

Převádějte mezi soubory obrázků a Base64 (Data URI)

Zakódujte obrázky do Base64 Data URI nebo dekódujte řetězce Base64 zpět do obrázků. Podporuje formáty PNG, JPEG, GIF a WebP. Snadné ovládání přetažením. Veškeré zpracování probíhá ve Vašem prohlížeči – žádná data nejsou ukládána ani přenášena.

Jak Používat

Převeďte ve 3 jednoduchých krocích:

Vyberte režim konverze
Vyberte kartu 'Obrázek → Base64' nebo 'Base64 → Obrázek'.
Vložte svá data
Pro režim obrázku přetáhněte a pusťte nebo vyberte soubor s obrázkem. Pro režim Base64 vložte Váš řetězec Base64.
Použijte výsledek
Výsledky konverze se zobrazí okamžitě. Zkopírujte Base64 pomocí tlačítka pro kopírování, nebo stáhněte obrázek pomocí tlačítka pro stažení.

Ochrana soukromí: Veškeré zpracování probíhá ve Vašem prohlížeči. Data obrázků nejsou nikdy odesílána ani ukládána na žádný server.

Převodník Obrázek ⇔ Base64

📁

Přetáhněte soubor obrázku sem, nebo klikněte pro výběr

Podporované formáty: PNG, JPEG, GIF, WebP, SVG (doporučeno max. 10MB)

Náhled

Název souboru

Velikost souboru

Rozměry

Formát

Base64 zakódovaný výsledek (Data URI)

Zadejte řetězec Base64

Náhled

Praktické Případy Použití pro Konverzi Obrázků do Base64

Base64 kódování obrázků se běžně používá ve vývoji webu pro následující účely:

1. Vkládání obrázků do HTML nebo CSS

Vložte malé ikony nebo obrázky loga přímo do HTML tagů <img> nebo vlastností CSS background-image, abyste snížili počet HTTP požadavků a zlepšili rychlost načítání stránky. Obzvláště užitečné jako alternativa k fontům s ikonami.

2. Alternativa k CSS spritům

Namísto kombinování více malých obrázků do jednoho souboru 'CSS sprite', zakódujte každý obrázek do Base64 a vložte jej do CSS pro snazší správu.

3. Vkládání obrázků do HTML e-mailů

Některé e-mailové klienty blokují načítání externích obrázků. Vložení důležitých obrázků (jako jsou loga) jako Data URIs zajišťuje jejich spolehlivé zobrazení.

4. Přenos obrázků přes REST API

Při odesílání/přijímání dat obrázků prostřednictvím JSON API umožňuje Base64 kódování manipulaci s binárními daty jako textovým formátem. Přenášejte obrázky v jednoduchém formátu JSON bez multipart komunikace.

5. Offline aplikace

V progresivních webových aplikacích (PWA) nebo aplikacích Electron zajišťuje vkládání Base64-kódovaných obrázků do HTML spolehlivé zobrazení obrázků i v offline prostředích.

6. Vývoj mobilních aplikací

Používání Base64-kódovaných obrázků v multiplatformních frameworkách, jako jsou React Native, Ionic a Flutter, sjednocuje zpracování obrázků napříč platformami.

Co je Data URI? Pochopení Mechanismu

Data URI (nazývaná také Data URL) je schéma URL, které umožňuje vkládat malé soubory, jako jsou obrázky nebo fonty, přímo do HTML nebo CSS. Převádí obsah souboru na text pomocí kódování Base64 a reprezentuje jej jako součást URL adresy.

Formát Data URI

Data URI je psáno v následujícím formátu:

data:[MIME typ];[metoda kódování],[zakódovaná data]

Příklad (PNG):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

Výhody Data URI

Snížení HTTP požadavků: Není potřeba externích požadavků na soubory, což zlepšuje rychlost načítání stránky
Balení do jednoho souboru: Dokončeno v jediném HTML nebo CSS souboru pro snadnou distribuci a správu
Spolehlivé zobrazení: Zabraňuje nefunkčním externím odkazům na obrázky nebo jejich blokování

Nevýhody Data URI

Zvýšená velikost souboru: Kódování Base64 zvětšuje velikost dat přibližně o 33%
Nižší efektivita cache: Aktualizace obrázků vyžaduje opětovné stažení celého HTML/CSS souboru
Snížená čitelnost: Zdrojový kód se stává dlouhým a obtížněji se udržuje

Doporučené Postupy

Kdy Použít Data URI

✅ Malé ikony nebo loga (doporučeno 5KB nebo méně)
✅ Často používané dekorativní obrázky (pozadí tlačítek atd.)
✅ Důležité obrázky vyžadující offline podporu

Kdy NEPOUŽÍVAT Data URI

❌ Velké obrázky (10KB+): Velikost souboru se stává příliš velkou
❌ Často aktualizované obrázky: Špatná efektivita cache
❌ Obrázky znovu použité na více stránkách: Duplicitní vkládání na každé stránce

⚠️ Obecně se doporučuje používat Data URI pro malé obrázky (5KB nebo méně). Pro větší obrázky jsou efektivnější standardní tagy <img> nebo externí načítání souborů.

Často Kladené Otázky (FAQ)

Jaké formáty obrázků jsou podporovány?

Lze převádět všechny formáty obrázků podporované prohlížečem, včetně PNG, JPEG, GIF, WebP a SVG. PNG a JPEG jsou nejběžnější.

Existuje omezení velikosti obrázku pro konverzi?

Neexistuje žádné technické omezení, ale z důvodu výkonu a paměti prohlížeče se doporučuje 10MB nebo méně. Prakticky jsou nejefektivnější obrázky o velikosti 5KB nebo menší.

O kolik se zvýší velikost obrázku při kódování Base64?

Kódování Base64 zvyšuje velikost souboru na přibližně 133% původní velikosti (nárůst asi o 33%). Například obrázek o velikosti 9KB se stane řetězcem Base64 o velikosti přibližně 12KB.

Lze převádět transparentní obrázky PNG pomocí Base64?

Ano, transparentní obrázky PNG lze převést tak, jak jsou. Informace o průhlednosti se zachovají, takže se zobrazují správně s průhledností, když jsou vloženy do HTML nebo CSS.

Jak vložím řetězec Base64 do HTML?

Vložte přímo do atributu src tagu <img>. Příklad: <img src="data:image/png;base64,iVBORw0KG...">

Jak to použít jako background-image v CSS?

Vložte dovnitř funkce url() takto: background-image: url('data:image/png;base64,iVBORw0KG...');

Jsou nahrané obrázky uloženy na serveru?

Ne, veškeré zpracování probíhá ve Vašem prohlížeči. Data obrázků nejsou nikdy přenášena na žádný server.

Mohu to použít pro komerční webové stránky?

Ano, tento nástroj je zcela zdarma a lze jej volně používat jak pro komerční, tak i nekomerční účely.