Så använder du verktyget
- Dra bilder till släppytan, klicka på den för att välja filer eller klistra in en bild från urklipp. Det går bra att lägga till flera filer samtidigt.
- Välj vid behov ett målformat under Konvertera till (PNG, JPEG eller WebP), justera Kvalitet och ange en Maxbredd.
- Kontrollera måtten, originalstorleken och den kodade storleken som visas för varje bild.
- Kopiera eller ladda ned det format du behöver: data URI, rå Base64, img-tagg i HTML, CSS background-image eller Markdown.
Så fungerar konverteringen från bild till Base64
Base64 gör om bytena i en bildfil till vanlig text som består av 64 olika tecken. Varje grupp om tre byte blir fyra tecken, så texten blir ungefär 33 % större än filen. En data URI lägger till ett kort prefix med MIME-typen, till exempel data:image/png;base64,, så att webbläsaren kan visa texten överallt där den förväntar sig en bild-URL.
Bilden läses in och kodas lokalt i din webbläsare. Den laddas inte upp, så privata skärmbilder och opublicerade designer stannar på din enhet.
Vilket format ska du kopiera?
- Data URI för
src-attribut, JavaScript och JSON-fält som förväntar sig en URL. - Rå Base64 för API:er som bara vill ha de kodade bytena, oftast tillsammans med ett separat fält för MIME-typ eller filnamn.
- img-tagg i HTML för att klistra in direkt i en webbsida eller mall.
- CSS background-image för ikoner och dekorationer i en formatmall.
- Markdown för dokumentation och anteckningar. Vissa renderare, bland annat GitHub, visar inte bilder som är inbäddade som data URI.
Översikt över format som stöds
De första tecknen i en Base64-sträng avslöjar filtypen, eftersom de kodar formatets signatur.
| Format | MIME-typ | Base64 börjar med |
|---|---|---|
| PNG | image/png | iVBORw0KGgo |
| JPEG | image/jpeg | /9j/ |
| WebP | image/webp | UklGR |
| GIF | image/gif | R0lGOD |
| SVG | image/svg+xml | PHN2Zy eller PD94bWw |
| BMP | image/bmp | Qk |
| ICO | image/x-icon | AAABAA |
| AVIF | image/avif | varierar |
| TIFF | image/tiff | SUkqAA eller TU0AKg |
När det lönar sig att bädda in en bild
En data URI sparar ett nätverksanrop och gör en fil helt fristående. Det passar för små ikoner och logotyper på några kilobyte, HTML-rapporter i en enda fil, små suddiga platshållare och bilder som skickas inuti JSON. För stora foton är det ett dåligt val: den extra tredjedelen i storlek, att webbläsaren inte kan cacha bilden separat och en tyngre HTML- eller CSS-fil som måste laddas ned innan något renderas kostar oftast mer än det anrop som sparas. Om din webbplats skickar en Content-Security-Policy behöver inbäddade bilder dessutom data: i img-src.
Vanliga frågor
Laddas mina bilder upp till en server?
Nej. Webbläsaren läser varje fil och kodar den på din enhet. Inget skickas till base64.is eller någon annanstans.
Varför är Base64-texten större än bilden?
Base64 använder 4 tecken per 3 byte, så resultatet blir ungefär 33 % större, plus prefixet för data URI:n. Vill du korta ned det kan du ställa in Maxbredd eller konvertera till WebP eller JPEG med lägre Kvalitet.
Kan jag konvertera flera bilder samtidigt?
Ja. Välj eller släpp flera filer. Varje bild får en egen förhandsvisning, egna storleksuppgifter och egna resultat, alla med knapparna Kopiera och Ladda ned.
Fungerar Base64-bilder i HTML-e-post?
cid: mer tillförlitliga.