UltKit
Obrázky11
Převodník obrázkůKomprese obrázkůZměna velikosti obrázkuOříznutí obrázkuObrázek do PDFFotka na pasObrázek do SVGVšechny nástroje: Obrázky →
PDF13
Komprese PDFPřevodník PDFPDF na obrázekSpojení PDFRozdělení PDFOdemčení PDFZabezpečení PDFVšechny nástroje: PDF →
Dokumenty a data7
Převod do PDFPřevodník dokumentůObrázek na text (OCR)Obrázek do ExceluPřevodník datPřevodník e-knihVšechny nástroje: Dokumenty a data →
Video6
Převodník videaKomprese videaVideo na zvukVideo na GIFStřih videaZvuk na videoVšechny nástroje: Video →
Zvuk4
Převodník zvukuKomprese zvukuStřih zvukuZvuk na textVšechny nástroje: Zvuk →
Další nástroje22
Generátor QR kódůKomprese do ZIPRozbalení onlinePřevodník časových pásemPřevodník jednotekGenerátor heselPočítadlo slovVýběr barvyVšechny další nástroje →
BlogJak to funguje

Převod obrázku do Base64

Převeďte obrázek na řádek textu, který vložíte do HTML, CSS, požadavku JSON nebo souboru Markdown. Prefix data URI je už na začátku, takže kód funguje hned po vložení.

Převodník dat

nebo sem přetáhněte soubory CSV, TSV, TXT … ·

Max. 95 MB na soubor· Až 20 souborů· Smazáno po 30 minutách

Výstup

Soubory se zpracovávají na našich serverech a po 30 minutách se smažou.

Jak nástroj používat

  1. 1

    Přidejte obrázky

    Přetáhněte soubory PNG, JPG, GIF, WebP nebo SVG do oblasti pro nahrání, najednou až 20 souborů po 95 MB.

  2. 2

    Ponechte nebo odeberte prefix

    Volba Předpona Data URI je zapnutá, takže výsledek začíná data:image/png;base64, nebo odpovídajícím typem. Pokud API vyžaduje čistý řetězec Base64, vypněte ji v části Pokročilá nastavení.

  3. 3

    Převeďte a zkopírujte

    Klikněte na Převést na Base64 text a stáhněte si soubor .txt pro každý obrázek, připravený k vložení do kódu.

Nahrajte obrázek a klikněte na Převést na Base64 text. Dostanete soubor zakódovaný jako prostý text, který začíná data:image/…;base64, a lze ho vložit rovnou do img src nebo CSS url(). Na samotném obrázku se nic nemění.

Kdy se obrázek v Base64 hodí

Base64 je definováno v RFC 4648 (2006) a převádí každé 3 bajty binárních dat na 4 znaky z abecedy o 64 znacích A–Z, a–z, 0–9, + a /. Výsledek přežije jakýkoli kanál určený pro text. Schéma Data URI, které v roce 1998 jako RFC 2397 sepsal Larry Masinter, pak umožňuje prohlížeči zacházet s tímto textem jako se souborem.

Frontendoví vývojáři vkládají malé ikony, načítací animace a zástupné obrázky přímo do kódu, aby se stránka vykreslila bez dalších požadavků. Backendoví vývojáři posílají obrázky v JSON, protože mnohá API, včetně služeb pro analýzu obrazu a OCR, přijímají obrázek jako pole Base64. Testeři uchovávají testovací data ve zdrojovém kódu a lidé, kteří tvoří jednosouborové zprávy HTML nebo poznámky v Markdownu, vkládají snímky obrazovky, aby soubor zůstal soběstačný při odeslání e-mailem i při archivaci.

Jak vypadá výstup v Base64

Průhledné PNG 1 × 1 (68 bajtů) jako Data URI uvnitř značky img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="průhledný pixel">

Soubor ikony PNG

24 KB

typická sada ikon panelu nástrojů, 96 × 96 px

+33 % velikosti, žádná změna kvality

Text Base64

32 KB

4 znaky na 3 bajty, plus předpona

ANY I

Jakýkoli obrázek

Nástroj přijímá běžné obrázkové formáty včetně JPG, PNG, WebP, HEIC, GIF, BMP a TIFF. Formát se z or souboru pozná automaticky, takže nemusíte vědět, o jaký typ obrázku jde.

Převodník Any image

BASE64

Text zakódovaný v Base64

Base64 je kódování definované v RFC 4648, které převádí libovolná binární data na řetězec 64 bezpečných textových znaků. Používá se k vkládání obrázků do HTML a CSS jako data URI, k přikládání souborů k e-mailu a k odesílání binárních dat v JSON nebo XML. Kódování je plně vratné, ale data zvětší asi o 33 %. Base64 není šifrování a žádnou ochranu nenabízí; dekódovat ho může kdokoli.

Komprese
Bezztrátová
Průhlednost
–
Animace
–
Představeno
–
Převodník BASE64

Obrázky se mění na text Base64, když musí putovat v něčem, co přenáší jen text: v souboru HTML nebo CSS bez samostatného požadavku, v poli JSON při volání API, v testovacích datech nebo v jednosouborové zprávě.

Kdy vložení obrázku přímo do kódu stránce pomůže a kdy uškodí

Vložení přímo do kódu ušetří jeden požadavek, což mělo největší význam u HTTP/1.1, kdy prohlížeče otevíraly na web jen několik spojení. Díky multiplexování v HTTP/2 a HTTP/3 jsou další malé požadavky levné, takže přínos se zmenšuje, zatímco nevýhody zůstávají: zakódovaný obrázek nelze ukládat do mezipaměti samostatně, stahuje se znovu při každé změně HTML nebo CSS a zdržuje zpracování souboru, ve kterém je vložen.

Rozumné pravidlo je vkládat jen obrázky o několika kilobajtech, které jsou na každé stránce, například logo nebo sadu ikon, a vše ostatní poskytovat jako soubory. Fotky do kódu téměř nikdy nepatří. Pokud ve skutečnosti potřebujete jiný typ souboru, nikoli text, poradí si s tím převodník obrázků.

Silné stránky obrázků v Base64

  • Jediný soběstačný soubor HTML, CSS nebo JSON
  • Žádný další požadavek pro drobné ikony
  • Bezpečné uvnitř JSON, XML a dalších textových formátů
  • Bezeztrátové a vratné

Nevýhody obrázků v Base64

  • Asi o 33 % větší než binární soubor
  • Prohlížeč je neukládá do mezipaměti samostatně
  • Mnoho e-mailových klientů je blokuje jako obrázky
  • Špatně se kontrolují v rozdílech kódu

Otázky k převodu obrázku do Base64

Jaký je rozdíl mezi Base64 a data URI?

Base64 jsou jen zakódované znaky. Data URI je obalí schématem a typem, data:image/png;base64, a za nimi následují znaky, aby prohlížeč věděl, jak je dekódovat a zobrazit. HTML a CSS potřebují celé Data URI; většina API s JSON chce jen čistou část Base64.

O kolik se obrázek v Base64 zvětší?

Base64 zapisuje 4 znaky na každé 3 bajty, takže text je zhruba o třetinu větší než soubor, k tomu krátká předpona. PNG o velikosti 30 KB se změní na zhruba 40 KB textu. Pokud se HTML nebo CSS přenáší komprimované gzipem, část tohoto navýšení se při přenosu získá zpět.

Lze obrázek v Base64 použít v e-mailovém podpisu?

Spolehlivé to není. Gmail obrázky z Data URI nezobrazuje a několik desktopových e-mailových programů je také odstraňuje, takže příjemci uvidí rozbitou ikonu. Obrázek umístěte na webový server nebo ho připojte jako přílohu a Base64 si nechte pro webové stránky a aplikace.

Má se ikona SVG kódovat do Base64?

Funguje to, ale SVG už je text. Zakódování značek pomocí URL místo Base64 obvykle dá kratší Data URI a zůstane čitelné. U všeho většího než malá ikona je lepší samostatný soubor SVG, který si prohlížeč může uložit do mezipaměti.

Lze text Base64 převést zpět na obrázek?

Ano, kódování je bezeztrátové a plně vratné: dekódováním získáte přesně původní bajty. Dekodér najdete v každém programovacím jazyce a po vložení celého Data URI do adresního řádku prohlížeče se obrázek zobrazí.

Mění kódování kvalitu obrázku?

Ne. Base64 mění způsob zápisu bajtů, ne pixely. Chcete-li řetězec zkrátit, nejdřív obrázek zmenšete, například pomocí zmenšení obrázku na 20 KB, a zakódujte menší soubor.