tigtools

Obrázek na Base64

Převeďte soubor PNG, JPEG, WebP, GIF, SVG nebo ICO na text Base64, který můžete vložit do HTML, CSS nebo JSON, nebo dekódujte Base64 zpět na obrázek. Soubor nikdy neopustí váš prohlížeč.

Běží ve vašem prohlížeči Bez registrace

Směr

nebo jej sem přetáhněte (až 10 MB). Soubor zůstane ve vašem zařízení.

Jak používat

  1. Zvolte možnost Obrázek → Base64 a vyberte soubor obrázku, nebo zvolte Base64 → Obrázek pro opačný směr.
  2. Vyberte požadovaný výstup: data URL, prostý Base64, značku img v HTML, pravidlo CSS background-image nebo Markdown.
  3. Zkopírujte výsledek a vložte ho do kódu, e-mailové šablony nebo JSON.
  4. Pro dekódování vložte data URL nebo prostý Base64; zobrazí se náhled obrázku a obrázek lze stáhnout.

Jak to funguje

Base64 představuje binární data pomocí 64 tisknutelných znaků, takže obrázek lze zapsat přímo do textových formátů. Data URL před něj umístí typ média, například data:image/png;base64, za kterým následují zakódované bajty. Prohlížeče přijímají data URL všude tam, kde je povolena adresa obrázku: v atributu src značky img, v CSS url() nebo v odkazu na obrázek v SVG.

Zakódovaný text je vždy přibližně o třetinu větší než původní soubor (4 znaky na každé 3 bajty). Vložení malých ikon a zástupných obrázků může ušetřit samostatný síťový požadavek, ale vložená data nelze samostatně ukládat do mezipaměti a stahují se znovu s každou stránkou či šablonou stylů, která je obsahuje, takže nad několik kilobajtů se to obvykle nevyplatí. Mnoho e-mailových klientů obrázky v data URL blokuje nebo odstraňuje, proto je před použitím v newsletterech otestujte.

Soubor je zakódován bajt po bajtu: nic se znovu nekomprimuje a metadata uvnitř souboru (například EXIF) zůstávají zachována. Při dekódování nástroj přijme úplnou data URL, obyčejný Base64, URL-safe Base64 i text zkopírovaný spolu s obalem CSS url(…). Typ obrázku se zjišťuje z dekódovaných bajtů, nikoli podle popisku.

Příklady

Malá ikona v CSS

Ikona PNG o velikosti 600 bajtů se stane řetězcem Base64 o 800 znacích. Pomocí výstupu CSS získáte pravidlo background-image, které můžete vložit do třídy, aniž byste museli hostovat samostatný soubor.

Obrázek z odpovědi API

API vrátí pole JSON, například "iVBORw0KGgoAAAANSUhEUg…". Vložte ho do nástroje Base64 → Obrázek, abyste viděli obrázek, zkontrolovali jeho velikost a stáhli ho jako PNG.

SVG logo v HTML

Kódování SVG vytvoří URL data:image/svg+xml;base64, která funguje ve značce img. U SVG bývá samotné nekomprimované značkování SVG často kratší než Base64, proto zvažte vložení SVG přímo.

Časté dotazy

Proč je verze Base64 větší než můj obrázek?

Base64 uloží 3 bajty do 4 textových znaků, takže přidává asi 33 % plus něco navíc za prefix data URL. Komprese Gzip nebo Brotli na webovém serveru rozdíl zmenšuje, ale neodstraňuje.

Změní kódování obrázek, nebo ho zkomprimuje?

Ne. Kódují se přesné bajty souboru včetně všech metadat. Aby byl řetězec kratší, nejprve obrázek zkomprimujte nebo zmenšete.

Jaký je rozdíl mezi data URL a prostým Base64?

Prostý Base64 jsou pouze zakódované bajty. Data URL přidává prefix, například data:image/jpeg;base64, který prohlížeči řekne, o jaký typ souboru jde, takže ho lze použít přímo jako zdroj obrázku.

Existuje nějaký limit velikosti?

Zde lze kódovat soubory až do 10 MB. Velmi dlouhé řetězce mohou zpomalit textová pole a editory a takto velká data URL nejsou na webech praktická.

Soukromí

Kódování i dekódování probíhá ve vašem prohlížeči. Váš obrázek ani text Base64 nejsou nahrávány, ukládány ani zahrnovány do analytiky.