Postupujte podle tohoto funkčního příkladu a poté stejné ovládací prvky přizpůsobte svému vlastnímu obrázku. Otevřít Převodník obrázku na Base64.
Vyberte obrázek a zobrazte náhled jeho identity
Otevřete převodník Image to Base64. Vyberte obrázek nebo vyzkoušejte ukázku. Příklad používá 512 × 512 pixelový favicon-orbit.png, který obsahuje 202,491 bajtů. Editor zobrazuje obrázek nad jeho kódem, abyste mohli potvrdit, že jste vybrali zamýšlený soubor.
PNG, JPG, WebP, GIF, BMP a AVIF jsou podporovány, pokud je váš prohlížeč dokáže dekódovat pro náhled. Maximální velikost souboru je 25 MB, s limity 60 megapixelů a 16,000 pixelů na stranu. Značka SVG není tímto rastrovým převodníkem přijímána.
Nástroj čte původní bajty souboru. Nepoužívá náhled k opětovnému sestavení obrázku, jeho změně velikosti ani rekompresi. Stávající metadata a animace GIF jsou proto v kódovaných datech zachovány.
Před kódováním použijte Resize Image nebo Image Compressor, pokud potřebujete menší soubor. Samotný Base64 velikost obrázku nesnižuje.
Zvolte reprezentaci, kterou váš projekt očekává
Otevřete Nastavení a pro tento příklad vyberte HTML obrázek v části Formát kódu. Výsledkem je značka img obsahující datovou URL Base64. Atribut alt je zpočátku prázdný; napište užitečný alternativní text, když obrázek sděluje informace.
Datová URL začíná předponou jako data:image/png;base64, následovanou kódovanými daty. Plain Base64 obsahuje pouze data. CSS pozadí obaluje datovou URL v deklaraci background-image. Tyto reprezentace slouží různým cílům, proto zkopírujte formulář požadovaný vaší aplikací namísto pouhé změny názvu souboru.
Panel kódu se aktualizuje ihned po změně Formátu kódu. Ikona kopírování zkopíruje aktuální reprezentaci a zobrazí potvrzení o zkopírování. Pokud je přístup ke schránce blokován, kód je vybrán pro ruční kopírování.
Kompletní HTML tag img není totéž co datová URL. Pokud pole vyžaduje URL, použijte pouze hodnotu src.
Příklad v tomto průvodci
Vyzkoušejte ukázku: favicon-orbit.png, 512 × 512 px, 202,491 bajtů. Zvolte HTML obrázek pod formátem kódu. Vyberte Start a stáhněte favicon-orbit-base64.txt.
- Původní PNG
- 512 × 512 px · 202,491 bajtů
- HTML textový výstup
- 270,029 bajtů
- Kódování
- Původní bajty; bez rekomprese
Stáhněte kód a zjistěte jeho velikost
Vyberte Start a poté Stáhnout. Příklad uloží favicon-orbit-base64.txt obsahující HTML kód obrázku. Jeho 270,029 bajtů je více než 202,491 bajtů zdroje. Srovnání v článku ukazuje skutečný začátek staženého textu, zkrácený pouze pro lepší čitelnost.
Base64 obvykle převádí tři zdrojové bajty na čtyři textové znaky, čímž přidává zhruba jednu třetinu před malý obal. Vložení malé ikony může učinit dokument soběstačným, ale umístění velkých řetězců obrázků do HTML nebo CSS dokument také zvětšuje a brání tomu, aby byl obrázek uložen do mezipaměti jako samostatný soubor.
Kódování není šifrování. Kdokoli s kompletním řetězcem Base64 může obnovit původní obrázek. Pokud kód obsahuje soukromé informace, zacházejte s ním stejně opatrně jako se zdrojem.
Zkrácený úryvek v tomto článku je pouze vysvětlující. Použijte kompletní stažený TXT nebo zkopírujte celý kód z nástroje.
Časté dotazy
Sníží kódování kvalitu obrázku?
Ne. Kódování zachovává původní bajty. Obrázek nemění velikost, nekomprimuje ani nepřekresluje.
Proč je řetězec Base64 větší než obrázek?
Base64 reprezentuje tři vstupní bajty pomocí čtyř textových znaků, takže obvykle přidá asi jednu třetinu před obal nebo prefix.
Jsou animace GIF zachovány?
Kódování zachovává původní GIF bajty, včetně animace. Náhled může zobrazovat statický snímek, zatímco kódovaná data si zachovávají všechny snímky.
Je Base64 bezpečný pro tajné obrázky?
Base64 není šifrování. Pokud je původní obrázek soukromý, uchovávejte řetězec v soukromí. Samotný převodník jej zpracovává lokálně ve vašem prohlížeči.
Převeďte správný obrázek na správný kód.
Vyzkoušejte ukázku nebo použijte vlastní soubor a před sdílením zkontrolujte výsledek.
