Obrázek na Base64
Přetáhni jakýkoli obrázek do tohoto převodníku obrázku na Base64 a získej data URI a připravené úryvky pro HTML, CSS a JavaScript. Vložené obrázky šetří HTTP požadavky u malých ikon a jsou nezbytné pro single-file HTML, e-mailové šablony a offline aplikace.
Jak převést Obrázek na Base64 online
- Vyber soubor obrázku nebo vlož URL obrázku.
- Zvol výstup: data URI,
<img>, CSS background, favicon, JSON a další. - Klikni na Kódovat obrázek do Base64.
- Zobraz náhled obrázku a zkopíruj kód.
Další převodníky Obrázek na Base64
Výstupní formáty
Zvol, jak má být výsledek zabalen. Převodník může vrátit:
- txt: jen řetězec Base64, připravený ke vložení do kódu, databázového pole nebo API požadavku.
- uri: kompletní URI
data:, které můžeš vložit do adresního řádku prohlížeče nebo použít kdekoli, kde se přijímá URL. - html img: tag
<img>s data URI vsrc. - css background image: CSS pravidlo s
background-image: url(data:...). - html favicon: tag
<link rel="icon">pro vložený favicon. - html hyperlink: odkaz
<a>, který stáhne nebo otevře vložený soubor. - html iframe: tag
<iframe>, který vykreslí obsah vloženě. - javascript image: JavaScript, který vytvoří objekt
Image. - javascript popup: JavaScript, který otevře obsah v novém okně.
- json: JSON objekt s názvem souboru, MIME typem a daty.
- xml: XML element s daty uvnitř sekce CDATA.
Kdy bys měl vkládat obrázky jako Base64?
Vkládej malé obrázky (pod zhruba 5–10 KB), například ikony, loga a placeholdery, abys ušetřil požadavky. Vyhýbej se vkládání velkých fotek: zatěžují HTML/CSS, nelze je cacheovat zvlášť a zdržují vykreslení. Podrobnější diskusi najdeš v vysvětlení data URI.
Často kladené otázky
Jak převedu obrázek na Base64?
Zvol obrázek, vyber jako výstup „Data URI“ nebo „<img>“ a klikni na „Kódovat obrázek do Base64“. Zkopíruj výsledek do HTML nebo CSS.
Jaké formáty obrázků jsou podporovány?
Jakýkoli formát, který tvůj prohlížeč umí číst: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF a další.
Jak použiji Base64 obrázek v HTML?
Vlož data URI do atributu src: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
Komentáře (0)
Otázky, nápady nebo chyba v „Obrázek na Base64“? Napiš komentář, ohodnoť nástroj nebo odpověz ostatním.
Zatím žádné komentáře. Buď první, kdo se podělí o zpětnou vazbu!