UltKit

Prevod obrázka na Base64

Premeňte obrázok na riadok textu, ktorý vložíte do HTML, CSS, požiadavky JSON alebo súboru Markdown. Prefix data URI je už na začiatku, takže to funguje hneď po vložení.

Prevodník dát

alebo sem presuňte súbory CSV, TSV, TXT … ·

Max. 95 MB na súbor· Až 20 súborov· Odstránenie po 30 minútach

Výstup

Súbory sa spracúvajú na našich serveroch a po 30 minútach sa odstránia.

Ako používať tento nástroj

  1. 1

    Pridajte obrázky

    Presuňte súbory PNG, JPG, GIF, WebP alebo SVG do oblasti na nahrávanie, najviac 20 naraz a každý do 95 MB.

  2. 2

    Ponechajte alebo odstráňte prefix

    Možnosť Predpona Data URI je zapnutá, takže výsledok začína data:image/png;base64, alebo zodpovedajúcim typom. Ak API vyžaduje samotný reťazec Base64, vypnite ju v časti Rozšírené nastavenia.

  3. 3

    Preveďte a skopírujte

    Stlačte Previesť na Base64 text a stiahnite si súbor .txt pre každý obrázok, pripravený na vloženie do kódu.

Nahrajte obrázok a stlačte Previesť na Base64 text. Dostanete súbor zakódovaný ako obyčajné znaky, začínajúci data:image/…;base64,, takže ho môžete rovno vložiť do img src alebo CSS url(). Na obrázku sa nič nezmení.

Kedy sa obrázok v Base64 hodí

Base64 je definovaný v RFC 4648 (2006) a mapuje každé 3 bajty binárnych dát na 4 znaky z 64-znakovej abecedy A–Z, a–z, 0–9, + a /. Výsledok prežije akýkoľvek kanál určený pre text. Schéma Data URI, ktorú v roku 1998 zapísal Larry Masinter ako RFC 2397, potom umožňuje prehliadaču považovať tento text za súbor.

Front-end vývojári vkladajú malé ikony, načítavacie animácie a zástupné obrázky priamo do kódu, aby sa stránka vykreslila bez ďalších požiadaviek. Back-end vývojári posielajú obrázky v JSON, pretože mnohé API, vrátane služieb na rozpoznávanie obrazu a OCR, prijímajú obrázok ako pole Base64. Testeri uchovávajú testovacie dáta v zdrojovom kóde a ľudia, ktorí tvoria jednosúborové HTML správy alebo poznámky v Markdowne, vkladajú snímky obrazovky, aby súbor zostal samostatný pri odoslaní e-mailom aj archivácii.

Ako vyzerá výstup v Base64

Priehľadný PNG 1 × 1 (68 bajtov) ako Data URI v značke img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="bod">

Súbor PNG s ikonou

24 KB

typická sada ikon panela nástrojov, 96 × 96 px

+33 % veľkosti, nulová zmena kvality

Text Base64

32 KB

4 znaky na 3 bajty, plus predpona

ANY I

Akýkoľvek obrázok

Tento nástroj prijíma bežné formáty obrázkov vrátane JPG, PNG, WebP, HEIC, GIF, BMP a TIFF. Formát sa zistí automaticky zo súboru, takže nemusíte vedieť, aký typ obrázka máte.

Konvertor Any image

BASE64

Text kódovaný v Base64

Base64 je kódovanie definované v RFC 4648, ktoré premení akékoľvek binárne dáta na reťazec 64 bezpečných textových znakov. Používa sa na vkladanie obrázkov do HTML a CSS ako data URI, na prikladanie súborov k e-mailu a na odosielanie binárnych dát v JSON alebo XML. Kódovanie je plne spätne vratné, ale dáta zväčší približne o 33 %. Base64 nie je šifrovanie a neposkytuje žiadnu bezpečnosť; dekódovať ho môže ktokoľvek.

Kompresia
Bezstratová
Priehľadnosť
–
Animácia
–
Rok vzniku
–
Konvertor BASE64

Obrázky sa menia na text Base64, keď musia putovať v niečom, čo prenáša iba text: v súbore HTML alebo CSS bez samostatnej požiadavky, v poli JSON pri volaní API, v testovacích dátach alebo v jednosúborovej správe.

Kedy vloženie obrázka priamo do kódu stránke pomôže a kedy uškodí

Vloženie priamo do kódu ušetrí jednu požiadavku, čo bolo najdôležitejšie pri HTTP/1.1, keď prehliadače otvárali na web len zopár spojení. Vďaka multiplexovaniu v HTTP/2 a HTTP/3 sú ďalšie malé požiadavky lacné, takže prínos klesá, no nevýhody ostávajú: zakódovaný obrázok sa nedá ukladať do vyrovnávacej pamäte samostatne, sťahuje sa znova pri každej zmene HTML alebo CSS a spomaľuje spracovanie súboru, v ktorom je.

Rozumné pravidlo je vkladať priamo len obrázky veľké niekoľko kilobajtov, ktoré sa objavujú na každej stránke, napríklad logo alebo sprite ikon, a všetko ostatné poskytovať ako súbory. Fotky sem takmer nikdy nepatria. Ak v skutočnosti potrebujete iný typ súboru namiesto textu, postará sa o to konvertor obrázkov.

Silné stránky obrázkov v Base64

  • Jeden samostatný súbor HTML, CSS alebo JSON
  • Žiadna ďalšia požiadavka pre drobné ikony
  • Bezpečné v JSON, XML a iných textových formátoch
  • Bezstratové a vratné

Nevýhody obrázkov v Base64

  • Asi o 33 % väčšie ako binárny súbor
  • Prehliadač ho neukladá samostatne do vyrovnávacej pamäte
  • Mnohé e-mailové programy ho blokujú ako obrázky
  • Ťažko sa kontroluje v rozdieloch kódu

Otázky o prevode obrázka na Base64

Aký je rozdiel medzi Base64 a data URI?

Base64 sú len zakódované znaky. Data URI ich obalí schémou a typom, data:image/png;base64, a za tým nasledujú znaky, aby prehliadač vedel, ako ich dekódovať a zobraziť. HTML a CSS potrebujú úplný Data URI; väčšina JSON API chce len samotnú časť Base64.

O koľko sa obrázok v Base64 zväčší?

Base64 zapíše 4 znaky na každé 3 bajty, takže text je asi o tretinu väčší ako súbor, plus krátka predpona. Súbor PNG s 30 KB sa zmení na približne 40 KB textu. Ak sa HTML alebo CSS prenáša komprimované cez gzip, časť tejto réžie sa pri prenose získa späť.

Môžem použiť obrázok v Base64 v e-mailovom podpise?

Je to nespoľahlivé. Gmail obrázky s Data URI nezobrazuje a viaceré desktopové e-mailové programy ich tiež odstraňujú, takže príjemcovia uvidia rozbitú ikonu. Obrázok nahrajte na webový server alebo ho priložte a Base64 ponechajte pre webové stránky a aplikácie.

Oplatí sa ikonu SVG kódovať do Base64?

Funguje to, ale SVG je už samo text. Ak kód namiesto kódovania Base64 zakódujete ako URL, Data URI je zvyčajne kratší a zostane čitateľný. Pri čomkoľvek väčšom ako malá ikona je lepšie samostatné SVG, ktoré si prehliadač dokáže uložiť do vyrovnávacej pamäte.

Dá sa text Base64 previesť späť na obrázok?

Áno, kódovanie je bezstratové a plne vratné: dekódovaním získate presné pôvodné bajty. Dekodér obsahuje každý programovací jazyk a po vložení úplného Data URI do adresného riadka prehliadača sa obrázok zobrazí.

Mení kódovanie kvalitu obrázka?

Nie. Base64 mení spôsob zápisu bajtov, nie pixely. Ak chcete kratší reťazec, najprv obrázok zmenšite, napríklad pomocou zmenšenia obrázka na 20 KB, a zakódujte menší súbor.