Prevodník obrázkov na Base64

Presuňte sem obrázok a získajte jeho Base64 data URI, alebo vložte Base64 kód na náhľad a stiahnutie obrázka.

Začnite presunutím obrázka alebo vložením kódu Base64.

Váš obrázok sa načíta a skonvertuje priamo vo vašom prehliadači. Na servery BroBroGo sa nič neodosiela.

Časté otázky

Čo je to obrázok vo formáte Base64 data URI?

Ide o obrázok zakódovaný ako text, takže ho môžete vložiť priamo do HTML alebo CSS namiesto načítavania zo samostatného súboru. To ušetrí HTTP požiadavku, čo je užitočné pre drobné ikony alebo e-mailové šablóny.

Mali by sa týmto spôsobom vkladať aj veľké obrázky priamo do kódu?

Radšej nie. Kódovanie Base64 zväčšuje objem dát približne o tretinu a tieto dáta nemožno cachovať nezávisle od stránky. Preto ho používajte len pre malé prvky a veľké obrázky odkazujte ako bežné súbory.

Dokáže nástroj previesť Base64 reťazec späť na súbor?

Áno. Prepnite na režim „Base64 → Obrázok“, vložte data URI alebo čistý Base64 reťazec a nástroj automaticky rozpozná typ obrázka, zobrazí jeho náhľad a umožní vám súbor stiahnuť.

Princíp fungovania Base64 a dátových URI

Kódovanie Base64 je proces, ktorý transformuje binárne dáta, napríklad súbory obrázkov, na textový reťazec pozostávajúci zo sady 64 znakov ASCII. Tento formát umožňuje prenos binárnych dát cez protokoly a médiá, ktoré sú navrhnuté primárne na spracovanie textu.

Dátové URI (Data URI) rozširujú tento koncept tým, že k samotnému zakódovanému reťazcu Base64 pridávajú schému s metadátami, ako je typ média (MIME typ) a informácia o kódovaní (napríklad data:image/png;base64,). Webový prehliadač dokáže takto štruktúrovaný reťazec prečítať a vykresliť priamo ako vizuálny prvok bez toho, aby musel odosielať samostatnú požiadavku na server pre stiahnutie externého súboru.

Nástroj Prevodník obrázkov na Base64 vykonáva obojsmernú konverziu. Dokáže transformovať binárny súbor obrázka na textový reťazec Base64 alebo naopak, prijať textový vstup a zrekonštruovať z neho pôvodný obrázkový súbor.

Technické parametre a limity konverzie

Pri práci s nástrojom platia presne definované technické pravidlá pre vstupy a výstupy:

  • Kódovanie (Obrázok → Base64): Maximálna povolená veľkosť nahrávaného súboru obrázka je 5 MB. Podporované sú formáty PNG, JPG, GIF, WebP, SVG, AVIF, BMP, ICO a TIFF. Ak používateľ presunie do rozhrania viacero súborov naraz, spracuje sa iba prvý obrázok.
  • Dekódovanie (Base64 → Obrázok): Maximálna dĺžka vstupného textového reťazca je 8 MB. Nástroj akceptuje štandardný aj URL-safe Base64 formát, pričom ignoruje biele znaky a nové riadky. Pri dekódovaní systém automaticky identifikuje typ obrázka podľa jeho vnútornej štruktúry.
  • Charakteristika transformácie: Konverzia prebieha na úrovni bajtov. Nástroj nekomprimuje, neorezáva, nemení rozmery ani nekonvertuje formát pôvodného obrázka (napríklad z formátu PNG do JPG). Iba prekladá pôvodné binárne dáta do textu a naopak.
  • Zmena veľkosti dát: Zakódovanie binárneho súboru do formátu Base64 zvyšuje objem výsledných dát približne o jednu tretinu (cca 33 %) v porovnaní s pôvodnou veľkosťou súboru.

Spracovanie chýb a validácia vstupov

Nástroj vykonáva priebežnú kontrolu integrity dát a formátov. V prípade neštandardných situácií zobrazuje nasledujúce chybové hlásenia:

  • Ak sa používateľ pokúsi nahrať nepodporovaný formát súboru, zobrazí sa chybové hlásenie: "Tento súbor nie je podporovaným obrázkom."
  • Pri prekročení limitu veľkosti súboru pre kódovanie sa zobrazí upozornenie: "Tento obrázok je väčší ako {max}. Skúste menší."
  • Ak dôjde k systémovej chybe pri čítaní súboru z lokálneho disku, nástroj vypíše: "Súbor sa nepodarilo načítať."
  • Ak vložený textový reťazec nezodpovedá štruktúre Base64, systém zobrazí chybu: "Toto nie je platný formát Base64."
  • V prípade, že reťazec je validným Base64, ale neobsahuje štruktúru identifikovateľnú ako obrázok, zobrazí sa hlásenie: "Tento Base64 kód sa nedá dekódovať na rozpoznateľný obrázok."
  • Pri prekročení limitu 8 MB na vstupe pre dekódovanie sa zobrazí text: "Tento vstup je príliš dlhý. Skráťte ho pod {max}."
  • Ak dekódovanie prebehne úspešne, ale prehliadač nedokáže dáta vykresliť, zobrazí sa chyba: "Dáta obrázka sa dekódovali, ale obrázok nebolo možné zobraziť."

Integrácia Base64 do HTML a CSS

Po úspešnej konverzii obrázka vygeneruje nástroj niekoľko formátov výstupu pod štítkom "Výstup":

  1. Data URI: Kompletný reťazec vrátane hlavičky média, pripravený na priame použitie v kóde.
  2. Base64: Čistý zakódovaný reťazec bez akýchkoľvek HTML alebo CSS značiek.
  3. CSS: Formátovaný zápis určený pre vlastnosť background-image. Príklad syntaxe: background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
  4. HTML: Kompletná značka <img> s atribútom src naplneným dátovým URI. Príklad syntaxe: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />

Nástroj taktiež zobrazuje štatistické údaje o výsledku, konkrétne "Výstupné znaky" (počet znakov vygenerovaného reťazca) a "Veľkosť obrázka" (rozmery v pixeloch). Pri dekódovaní spätne na súbor je k dispozícii tlačidlo "Stiahnuť obrázok", pričom výsledný súbor sa uloží pod názvom začínajúcim na brobrogo-obrazok. s príslušnou príponou podľa detegovaného formátu.

Výhody a nevýhody inlinovania obrázkov

Použitie Base64 na vkladanie obrázkov priamo do zdrojového kódu (tzv. inlining) prináša špecifické technické kompromisy.

Výhody

  • Zníženie počtu HTTP požiadaviek: Každý externý obrázok vyžaduje samostatné spojenie so serverom. Vložením obrázka priamo do HTML alebo CSS sa znižuje réžia spojená s nadväzovaním týchto spojení, čo urýchľuje načítanie stránky pri malých prvkoch.
  • Jednoduchá prenosnosť: E-mailové šablóny alebo samostatné HTML dokumenty, ktoré obsahujú inlinované obrázky, sú kompletne sebestačné. Nevyžadujú externé úložisko pre obrázky, ktoré by sa inak mohli zablokovať alebo vymazať.

Nevýhody

  • Nárast veľkosti súboru: Keďže Base64 zvyšuje objem dát o približne 33 %, prenos veľkých obrázkov v tomto formáte výrazne spomaľuje sťahovanie samotného HTML alebo CSS súboru.
  • Absencia nezávislého cachovania: Prehliadače ukladajú do vyrovnávacej pamäte (cache) externé obrázky samostatne. Ak je obrázok súčasťou HTML kódu, musí sa stiahnuť znova pri každej návšteve neuloženej stránky, čo zvyšuje spotrebu dát.

Ochrana súkromia pri spracovaní dát

Spracovanie súborov a textových reťazcov prebieha lokálne v prostredí webového prehliadača používateľa. Žiadne obrázky ani textové dáta sa neodosielajú na servery BroBroGo. Celý proces konverzie, analýzy formátu a generovania výstupov sa vykonáva výhradne na zariadení používateľa.

Často kladené otázky (FAQ)

Čo je to obrázok vo formáte Base64 data URI?

Ide o obrázok zakódovaný ako text, takže ho môžete vložiť priamo do HTML alebo CSS namiesto načítavania zo samostatného súboru. To ušetrí HTTP požiadavku, čo je užitočné pre drobné ikony alebo e-mailové šablóny.

Mali by sa týmto spôsobom vkladať aj veľké obrázky priamo do kódu?

Radšej nie. Kódovanie Base64 zväčšuje objem dát približne o tretinu a tieto dáta nemožno cachovať nezávisle od stránky. Preto ho používajte len pre malé prvky a veľké obrázky odkazujte ako bežné súbory.

Dokáže nástroj previesť Base64 reťazec späť na súbor?

Áno. Prepnite na režim „Base64 → Obrázok“, vložte data URI alebo čistý Base64 reťazec a nástroj automaticky rozpozná typ obrázka, zobrazí jeho náhľad a umožní vám súbor stiahnuť.

Aké formáty obrázkov sú podporované pri kódovaní?

Nástroj podporuje širokú škálu bežných aj moderných formátov vrátane PNG, JPG, GIF, WebP, SVG, AVIF, BMP, ICO a TIFF, a to až do maximálnej veľkosti súboru 5 MB.