Bild till Base64
Släpp valfri bild i den här bild till Base64-konverteraren för att få en data-URI och färdiga kodsnuttar för HTML, CSS och JavaScript. Inbäddade bilder sparar HTTP-förfrågningar för små ikoner och är nödvändiga för enfils-HTML, e-postmallar och offlinelägen.
Så konverterar du Bild till Base64 online
- Välj en bildfil eller klistra in en bild-URL.
- Välj utdata: data-URI,
<img>, CSS-bakgrund, favicon, JSON med mera. - Klicka på Koda bild till Base64.
- Förhandsgranska bilden och kopiera koden.
Fler Bild till Base64-konverterare
Utdataformat
Välj hur resultatet ska paketeras. Konverteraren kan returnera:
- txt: bara Base64-strängen, färdig att klistra in i kod, ett databasfält eller en API-förfrågan.
- uri: en komplett
data:-URI som du kan klistra in i webbläsarens adressfält eller använda varhelst en URL accepteras. - html img: en
<img>-tagg med data-URI:n isrc. - css background image: en CSS-regel med
background-image: url(data:...). - html favicon: en
<link rel="icon">-tagg för en inbäddad favicon. - html hyperlink: en
<a>-länk som laddar ner eller öppnar den inbäddade filen. - html iframe: en
<iframe>som renderar innehållet inline. - javascript image: JavaScript som skapar ett
Image-objekt. - javascript popup: JavaScript som öppnar innehållet i ett nytt fönster.
- json: ett JSON-objekt med filnamn, MIME-typ och data.
- xml: ett XML-element med datan i en CDATA-sektion.
När bör du bädda in bilder som Base64?
Bädda in små bilder (under ungefär 5–10 KB) som ikoner, logotyper och platshållare för att spara förfrågningar. Undvik att bädda in stora foton: de gör HTML/CSS tyngre, kan inte cachas separat och fördröjer rendering. Mer detaljer finns i data-URI:er förklarade.
Vanliga frågor
Hur konverterar jag en bild till Base64?
Välj din bild, välj "Data-URI" eller "<img>" som utdata och klicka på "Koda bild till Base64". Kopiera resultatet till din HTML eller CSS.
Vilka bildformat stöds?
Alla format som din webbläsare kan läsa: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF, TIFF med flera.
Hur använder jag en Base64-bild i HTML?
Sätt data-URI:n i src-attributet: <img src="data:image/png;base64,iVBORw0KGgo..." alt="">.
Kommentarer (0)
Frågor, idéer eller en bugg i “Bild till Base64”? Lämna en kommentar, betygsätt verktyget eller svara andra.
Inga kommentarer ännu. Bli först med att dela din feedback!