Datové URI pro HTML a CSS
Vytvořte řetězec data:image/...;base64 pro zdroj obrázku img v HTML nebo vlastnost background-image v CSS. Volbou Prefix obrázku přepínáte mezi datovým URI a samotným Base64.
Obrázek do Base64
Převeďte obrázek na text v Base64 nebo zkopírujte datové URI pro HTML a CSS.
Režim převodu
Další akce
Tabulka znaků Base64
Base64 používá 64 znaků: A–Z, a–z, 0–9, + a /. Znak = slouží k doplnění na potřebnou délku.
Kliknutím na hodnotu ji zkopírujete.
| Index | Binárně | Znak |
|---|---|---|
| 0 | A | |
| 1 | B | |
| 2 | C | |
| 3 | D | |
| 4 | E | |
| 5 | F | |
| 6 | G | |
| 7 | H | |
| 8 | I | |
| 9 | J | |
| 10 | K | |
| 11 | L | |
| 12 | M | |
| 13 | N | |
| 14 | O | |
| 15 | P |
| Index | Binárně | Znak |
|---|---|---|
| 16 | Q | |
| 17 | R | |
| 18 | S | |
| 19 | T | |
| 20 | U | |
| 21 | V | |
| 22 | W | |
| 23 | X | |
| 24 | Y | |
| 25 | Z | |
| 26 | a | |
| 27 | b | |
| 28 | c | |
| 29 | d | |
| 30 | e | |
| 31 | f |
| Index | Binárně | Znak |
|---|---|---|
| 32 | g | |
| 33 | h | |
| 34 | i | |
| 35 | j | |
| 36 | k | |
| 37 | l | |
| 38 | m | |
| 39 | n | |
| 40 | o | |
| 41 | p | |
| 42 | q | |
| 43 | r | |
| 44 | s | |
| 45 | t | |
| 46 | u | |
| 47 | v |
| Index | Binárně | Znak |
|---|---|---|
| 48 | w | |
| 49 | x | |
| 50 | y | |
| 51 | z | |
| 52 | 0 | |
| 53 | 1 | |
| 54 | 2 | |
| 55 | 3 | |
| 56 | 4 | |
| 57 | 5 | |
| 58 | 6 | |
| 59 | 7 | |
| 60 | 8 | |
| 61 | 9 | |
| 62 | + | |
| 63 | / |
Související nástroje
Vaše statistiky
0
Převody
0
Kopírování
0
Zpracované znaky
Text
Nejčastější režim
0
Průměrná velikost
100%
Skóre používání
Jak převést obrázek do Base64
Video se nepodařilo načíst. Můžete postupovat podle návodu níže.
Video ukazuje anglické rozhraní.
Po otevření nástroje je vybraný režim Kódovat obrázek. Klikněte na Importovat nebo Vybrat soubory a vyberte obrázek. V náhledu zkontrolujte, že jde o správný soubor. Původní soubor se nezmění. Výsledkem Base64 je text, který může být větší než původní obrázek.
Možnosti převodu obrázku do Base64
Podporované obrázky
Zakódujte JPG, PNG, GIF, WebP, AVIF, BMP nebo ICO. Soubor SVG můžete přetáhnout na stránku. HEIC a HEIF se při importu převedou na JPEG, ze souboru TIFF se použije první obrázek převedený na PNG.
Převod oběma směry
Zakódujte importovaný obrázek nebo obnovte obrázek z dat Base64. V režimu Kódovat obrázek stahujete text. V režimu Dekódovat obrázek stáhnete zobrazený obrázek, pokud se podařilo načíst jeho náhled.
Zobrazit další (3)Zobrazit méně
Obrázky ze schránky
V režimu Kódovat obrázek načtete tlačítkem Vložit zkopírovaný obrázek, pokud prohlížeč povolí přístup ke schránce.
Import do 50 MiB
Velikost obrázku nesmí přesáhnout 50 MiB. Zobrazení náhledu závisí také na podpoře formátu v prohlížeči a dostupné paměti.
Převod v prohlížeči
Přečtěte importovaný obrázek jako text v Base64. U běžných vstupních formátů zůstávají původní bajty souboru zachovány.
Časté otázky
Jak převést obrázek do Base64?
Zvolte Kódovat obrázek a přidejte obrázek. Pro celé datové URI zapněte Prefix obrázku, pro samotné Base64 ho vypněte. Výsledek zkopírujte nebo stáhněte jako textový soubor.
Jak použít obrázek v Base64 v HTML nebo CSS?
Zapněte Prefix obrázku a zkopírujte hodnotu, například data:image/png;base64,..., do atributu src prvku img v HTML nebo do hodnoty background-image: url(...) v CSS.
Jak převést Base64 zpět na obrázek?
Zvolte Dekódovat obrázek a vložte data obrázku v Base64, s prefixem datového URI nebo bez něj. Pokud prohlížeč obnovený formát dokáže zobrazit, zkontrolujte náhled a obrázek uložte tlačítkem Stáhnout.
Jaké formáty obrázků lze importovat?
Výběr souborů přijímá JPG, PNG, GIF, WebP, AVIF, BMP, TIFF, ICO, HEIC a HEIF. SVG můžete přetáhnout na stránku. HEIC a HEIF se převedou na JPEG, první obrázek z TIFF na PNG. U ostatních podporovaných formátů zůstávají původní bajty souboru zachovány. Limit importu je 50 MiB.
Zobrazit další (2)Zobrazit méně
Je vhodné vkládat velké obrázky přímo do stránky jako Base64?
Base64 používá čtyři znaky na každé tři vstupní bajty a podle potřeby přidá doplnění. U velkých dat tak velikost vzroste přibližně o třetinu. Vložený obrázek navíc nelze uložit do mezipaměti jako samostatný soubor. Pro velké nebo opakovaně používané obrázky použijte běžné soubory.
Odesílá se můj obrázek na server?
Kódování i dekódování probíhá v prohlížeči bez odesílání vstupu na server pro převod. Počítadla použití mohou zůstat uložená místně i po zavření karty.
Technické podrobnosti
Kódování textu v UTF-8
TextEncoder převede text na bajty UTF-8, ze kterých btoa vytvoří Base64. Dekódování používá atob a TextDecoder. Importované textové soubory se čtou jako UTF-8. Neplatné posloupnosti bajtů UTF-8 se nahradí náhradními znaky. Obrázky mají samostatný postup importu.
Kde probíhá převod
Textový režim pracuje s bajty UTF-8. Režim Kódovat obrázek čte data importovaného obrázku. Režim Dekódovat obrázek ověřuje získaná data pomocí dekodéru obrázků v prohlížeči.
Zobrazit další (4)Zobrazit méně
Formáty obrázků a převod
Režim Kódovat obrázek zachovává bajty běžných formátů obrázků. HEIC a HEIF nejprve zkouší dekódovat prohlížeč, případně se použije libheif. Výsledkem je JPEG. U TIFF knihovna UTIF převede první obrázek na PNG. Režim Dekódovat obrázek předá získaný obrázek dekodéru prohlížeče.
Zpracování a paměť
Převod textu a ověřování Base64 běží v pracovním vlákně prohlížeče. Velké vstupy i výsledky zabírají paměť. Náhledy obrázků navíc potřebují paměť pro dekódované pixely. Dlouhý text se zobrazí jako náhled jen pro čtení, celý výsledek lze dál kopírovat nebo stáhnout.
Datová URI pro HTML a CSS
Volba Prefix obrázku vytvoří datové URI, například data:image/png;base64,..., pro atribut src prvku img v HTML nebo hodnotu url() v CSS. Výstup s prefixem vždy používá standardní znaky Base64, doplnění = a jediný řádek bez zalomení. Pro samotné Base64 a variantu Pro URL prefix vypněte.
Vložení textu a obrázků
Nejprve vyberte režim převodu. Pak napište či vložte text, importujte textový soubor nebo přetáhněte obrázek do režimu Kódovat obrázek. Tlačítko Vložit v režimu Kódovat obrázek načte obrázek ze schránky, pokud to prohlížeč dovolí. Přetažením lze importovat TXT, JSON a XML. Výběr souboru navíc nabízí CSV, HTML, CSS a JavaScript.