Žádné nahrávání, 100% lokálně, bez účtu

Převodník obrázek → Base64

Zakódujte libovolný obrázek na datové URI Base64, nebo vložte datové URI a dekódujte ho zpět na obrázek. Zkopírujte výsledek nebo získejte úryvek CSS url(). Nic neopustí vaše zařízení.

Jak Obrázek na Base64 funguje

Převod obrázku na Base64 přečte váš soubor obrázku a zakóduje ho jako datové URI Base64, které můžete vložit přímo do HTML, CSS nebo JSON bez potřeby samostatného požadavku na soubor. Konverze využívá FileReader API ve vašem prohlížeči; žádné bajty z vašeho obrázku nejsou odesílány na server. Rovněž můžete vložit řetězec Base64 zpět pro jeho dekódování a zobrazení náhledu obrázku, vše lokálně.

Dataté URI Base64 je přibližně o 33 % větší než binární originál, protože každá skupina tří bajtů se rozšíří na čtyři ASCII znaky. Toto zvýšení velikosti je očekávaný kompromis za pohodlí vkládání obrázku do dokumentu nebo šablony stylů. Nástroj zobrazuje jak surový řetězec Base64, tak připravený úryvek HTML tagu img a úryvek CSS background-image pro rychlé kopírování a vkládání do vašeho projektu.

Napsal Bastien Sulyan

Obrázek na Base64: návod krok za krokem

  1. Přetáhněte soubor obrázku do oblasti nahrávání nebo klikněte pro výběr. Přijímané formáty: JPEG, PNG, WebP, GIF, SVG.
  2. Datové URI Base64 se okamžitě zobrazí v poli výstupu.
  3. Zkopírujte surový řetězec Base64 nebo použijte předformátovaný HTML tag img nebo úryvek CSS background-image.
  4. Pro dekódování vložte řetězec Base64 do vstupního pole a přepněte do režimu dekódování pro zobrazení náhledu obrázku.
  5. Klikněte na tlačítko kopírování vedle libovolného úryvku pro jeho zkopírování do schránky.

Časté případy použití

  • Front-end vývojář vloží malou ikonu jako datové URI do souboru CSS, aby eliminoval extra HTTP požadavek.
  • Vývojář vloží malý načítací spinner jako atribut src v Base64, aby byl zástupný obrázek dostupný ještě před načtením balíčku JavaScript.
  • Pracovník kontroly kvality zkopíruje Base64 testovacího obrázku pro přímé vložení do JSON payloadu při testu API.
  • Tvůrce e-mailových šablon vloží logo podpisu jako datové URI Base64, protože někteří e-mailoví klienti blokují požadavky na externí obrázky.

Často kladené otázky

Proč je výstup Base64 přibližně o třetinu větší než můj původní soubor?

Kódování Base64 reprezentuje každé tři binární bajty jako čtyři ASCII znaky (poměr 4/3). Obrázek o velikosti 100 KB v binárním formátu se stane přibližně 133 KB jako řetězec Base64. To je vlastnost kódovacího schématu, nikoli omezení nástroje.

Je obsah obrázku přenášen na server během kódování?

Ne. FileReader API čte binární soubor z vašeho lokálního disku a předává výsledek přímo funkci kódování JavaScript uvnitř záložky prohlížeče. Data obrázku neopustí vaše zařízení.

Mohu použít výstup datového URI v jakémkoli kontextu HTML nebo CSS?

Ano. Datové URI začínající data:image/jpeg;base64, následované zakódovaným řetězcem lze použít jako atribut src tagu img nebo jako hodnotu url() ve vlastnosti CSS background-image. Všechny moderní prohlížeče datová URI podporují. Velmi velká datová URI mohou zpomalit vykreslování stránky, takže vkládání je obvykle vyhrazeno pro malé obrázky o několika kilobajtech.

Podporuje nástroj animované GIFy?

Nástroj zakóduje úplný binární obsah jakéhokoli souboru, který poskytnete, včetně animovaných GIFů. Výsledné datové URI, použité jako src tagu img, bude přehrávat animaci v prohlížečích, které podporují animaci GIF.

Jak mohu dekódovat řetězec Base64 zpět na obrázek?

Přepněte nástroj do režimu dekódování, vložte řetězec Base64 (s předponou data: nebo bez ní) a nástroj ho dekóduje a nabídne binární obrázek ke stažení a zároveň zobrazí náhled.

Související nástroje

Zachovejte vše lokálně, prozkoumejte doplňkové nástroje.

Všechny nástroje na obrázky