Utilia
Kategorie ▾
Jazyk: cs ▾

Převodník obrázku na Base64

Převeď obrázek na Base64 nebo data URI s hotovým CSS a HTML, nebo dekóduj Base64 zpět na obrázek s náhledem. Zdarma, soukromě, bez nahrávání.

Obrázek → Base64

Base64 → obrázek

Jak převést obrázek na Base64

  1. V části Obrázek → Base64 přetáhni obrázek do vyznačené oblasti, nebo na ni klikni a vyber ho (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
  2. Vyber Výstup: Data URI (data:image/png;base64,…), Pouze Base64, CSS background-image nebo Značka HTML , která obsahuje i šířku a výšku obrázku.
  3. Klikni na Kopírovat, nebo u dlouhých výsledků na Stáhnout jako .txt.

Řádek pod oblastí pro soubor uvádí skutečný formát (zjištěný z bajtů souboru, ne z jeho názvu), rozměry, velikost souboru a délku data URI.

Jak převést Base64 zpět na obrázek

  1. V části Base64 → obrázek vlož text do pole Text Base64 nebo data URI. Můžeš vložit samotný řetězec Base64, celé data URI, nebo dokonce celé pravidlo CSS či značku <img>: data URI se v nich najde. Zalomení řádků a mezery se ignorují a funguje i Base64 bezpečný pro adresy URL (se znaky - a _).
  2. Klikni na Dekódovat obrázek. Zobrazí se náhled, typ, rozměry a velikost.
  3. Klikni na Stáhnout obrázek a ulož ho se správnou příponou souboru.

Typ se ověřuje pomocí „magických bajtů“, tedy podpisu na začátku každého formátu obrázku (například 89 50 4E 47 u PNG nebo FF D8 FF u JPEG). Pokud data URI tvrdí, že jde o image/jpeg, ale obsahuje PNG, nástroj to oznámí a použije skutečný typ. Cokoli, co není rozpoznaný obrázek, se odmítne, a limit je 20 MB obrazových dat.

Jak Base64 funguje

Base64 mění každé 3 bajty souboru na 4 tisknutelné znaky z A–Z, a–z, 0–9, + a /, přičemž = slouží jako výplň na konci. Proto je zakódovaný text asi o 33 % větší než soubor: ikona o velikosti 30 KB se změní na zhruba 40 KB textu. Data URI přidává krátkou hlavičku data:<typ>;base64,, aby prohlížeč věděl, jak data přečíst.

Kdy vkládat obrázky jako data URI

Data URI se hodí pro:

  • malé ikony, loga a pozadí v CSS, abys ušetřil(a) jeden požadavek;
  • e-maily HTML a jednosouborové dokumenty HTML, které musí fungovat bez externích souborů;
  • rozhraní API s JSON a konfigurační soubory, které umějí přenášet jen text.

Pro velké fotky se nehodí. Text je o třetinu větší než soubor, nelze ho ukládat do mezipaměti odděleně od stránky nebo šablony stylů, která ho obsahuje, a zpožďuje vykreslení. Nad zhruba 10 až 100 KB obvykle vyhraje běžný soubor obrázku s dobrým ukládáním do mezipaměti, a proto nástroj u obrázků nad 100 KB zobrazí upozornění.

Všechno běží ve tvém prohlížeči: obrázky a vložený text se nikdy nenahrávají.

Časté dotazy

Je Base64 způsob, jak obrázek zkomprimovat nebo ochránit?

Ne. Base64 zvětší data asi o 33 % a kdokoli je dokáže dekódovat. Jen mění binární data na text, který může putovat tam, kam binární data nemohou.

Proč se moje data URI nezobrazuje?

Nejčastější příčiny jsou chybějící nebo špatný typ v hlavičce, mezery či uvozovky vložené doprostřed řetězce nebo useknutý text. Vlož ho do části Base64 → obrázek: nástroj ohlásí neplatné znaky a ověří skutečný typ.

Můžu SVG použít jako data URI?

Ano. SVG lze zakódovat do Base64 jako každý obrázek. U SVG bývá kratší data URI kódované jako URL (data:image/svg+xml,%3Csvg…); tento nástroj dekóduje obě podoby.

Funguje to s obrázky HEIC nebo AVIF?

Kódování funguje s jakýmkoli souborem obrázku. Náhled se zobrazí jen tehdy, když formát prohlížeč umí zobrazit, ale text Base64 i stažení jsou vždy správné.

Existuje limit velikosti?

Ano, 20 MB obrazových dat v obou směrech. Delší řetězce zpomalují prohlížeče a ve webové stránce jsou málokdy dobrý nápad.

Související nástroje