Bild till Base64
Konvertera bilder till Base64-kodade strängar
Indatabild
Välj eller dra en bild
Bildfiler på upp till 10 MiB. JPG, PNG, GIF, WebP, SVG och andra bildformat.
Filinformation
- Namn
- —
- Storlek
- 0 B
- MIME-typ
- —
- Mått
- —
Om Base64-kodning
- Bädda in bilder direkt i HTML, CSS eller JSON utan externa filer
- Användbart för e-postmallar, data-URI:er och API-svar
- Base64-kodning ökar filstorleken med cirka 33%
- Passar bäst för små bilder som ikoner, logotyper eller miniatyrer
Base64-resultat
Ladda upp en bild för att se Base64-resultatet.
0 tecken
Ladda upp en bild för att se Base64-resultatet.
Användningsexempel
Exemplen är förkortade för visning. Kopieringsknapparna kopierar den kompletta HTML- eller CSS-koden.
Om omvandlaren Bild till Base64
Vår kostnadsfria omvandlare från bild till Base64 gör om bildfiler till Base64-kodade textsträngar som kan bäddas in direkt i HTML, CSS, JavaScript eller JSON. Ladda upp eller dra och släpp en bild så skapar verktyget direkt en komplett data-URI som är redo att användas i din kod.
Base64-kodning omvandlar binär bilddata till ett textformat med ett alfabet på 64 tecken. Det gör det möjligt att lägga in bilder direkt i textbaserade dokument, så att separata bildförfrågningar inte behövs. Base64-kodning ökar datastorleken med ungefär 33 %, men avvägningen lönar sig för små bilder som ikoner, logotyper och miniatyrer, där färre HTTP-förfrågningar ger snabbare sidladdning.
Omvandlaren bearbetar dina bilder helt i webbläsaren med FileReader API. Ingen bilddata laddas någonsin upp till en server, vilket gör det helt säkert att koda egen grafik, konfidentiella skärmbilder eller annat känsligt visuellt innehåll. Verktyget stöder alla vanliga bildformat upp till 10 MB.
Viktiga funktioner
- Stöd för JPG, PNG, GIF, WebP, SVG och andra bildformat
- Välj fil genom att dra och släppa eller klicka för att ladda upp
- Omedelbar omvandling på klientsidan utan serveruppladdningar
- Live-förhandsvisning av bilden bredvid Base64-utdata
- Komplett data-URI som utdata med MIME-typrubrik
- Kopiera hela Base64-strängen till urklipp med ett klick
- Ladda ned Base64-strängen som en textfil
- Visning av filinformation (namn, storlek, typ)
- Färdiga HTML- och CSS-kodsnuttar
- Maximal filstorlek på 10 MB med formatvalidering
Så använder du omvandlaren Bild till Base64
- Ladda upp din bild: Klicka på uppladdningsytan eller dra och släpp en bildfil. Format som stöds är bland annat JPG, PNG, GIF och WebP upp till 10 MB.
- Se förhandsvisningen: Verktyget visar en förhandsvisning av den uppladdade bilden tillsammans med filinformation (namn, storlek och typ).
- Kopiera Base64-strängen: Klicka på knappen Kopiera för att kopiera hela data-URI:n till urklipp, redo att klistras in i din kod.
- Ladda ned som text: Klicka på knappen Ladda ned för att spara Base64-strängen som en textfil för senare bruk.
- Använd kodsnuttarna: Utgå från HTML- och CSS-exemplen under utdata för att integrera den kodade bilden i ditt projekt.
- Rensa och omvandla en till: Klicka på X-knappen på filinfokortet för att ta bort den aktuella bilden och starta en ny omvandling.
Användningsområden
- Bädda in ikoner i HTML: Omvandla små ikoner och logotyper till Base64 och lägg in dem direkt i din HTML med img-taggar och data-URI:er, så att extra HTTP-förfrågningar inte behövs.
- Bakgrundsbilder i CSS: Koda dekorativa bilder och använd dem som inbäddade CSS-värden för background-image för att minska beroendet av externa filer.
- Design av e-postmallar: Bädda in bilder direkt i HTML-mallar för e-post så att de visas även när e-postklienter blockerar externa bilder.
- API- & JSON-nyttolaster: Ta med bilddata i JSON-svar eller förfrågningar till API:er när det saknas ändpunkter för filuppladdning.
- Enfilsapplikationer: Skapa fristående HTML-filer med alla bilder inbäddade som Base64, lämpligt för dokumentation, rapporter eller offlineverktyg.
- Konfigurationsfiler: Koda små bilder för att ta med dem i konfigurationsfiler, miljövariabler eller mallar för infrastruktur som kod.
- Progressiva webbappar: Cacha viktiga bilder som Base64-strängar i service workers eller lokal lagring för omedelbar rendering offline.
Vanliga frågor
Vad är Base64-kodning av bilder?
Base64-kodning omvandlar binär bilddata till en ASCII-textsträng. Resultatet kan användas som data-URI i HTML img-taggar, CSS-bakgrundsegenskaper eller tas med i JSON-nyttolaster, så att bilder kan överföras och lagras som ren text.
Ökar Base64-kodning filstorleken?
Ja, Base64-kodning ökar datastorleken med ungefär 33 % eftersom den använder 4 texttecken för var 3:e byte binär data. Därför rekommenderas Base64-inbäddning främst för små bilder som ikoner och logotyper.
När ska jag använda Base64-bilder i stället för vanliga bildfiler?
Använd Base64 för små bilder (under 10-20 KB) där färre HTTP-förfrågningar är en fördel, för e-postmallar där externa bilder kan blockeras, eller när du behöver fristående HTML-dokument. För större bilder är vanliga filreferenser effektivare.
Är verktyget gratis?
Ja, den här omvandlaren från bild till Base64 är helt gratis att använda. Det finns ingen gräns för antalet omvandlingar, ingen registrering krävs och inga vattenstämplar eller begränsningar läggs på ditt resultat.
Är mina data säkra?
Ja. Dina bilder bearbetas helt i din webbläsare med JavaScript-API:et FileReader. Ingen bilddata laddas någonsin upp till eller lagras på någon server, vilket gör verktyget helt säkert för känsliga eller egna bilder.
Vilken är den maximala filstorleken?
Verktyget stöder bilder upp till 10 MB. I praktiken är Base64-kodning mest fördelaktig för bilder under 20 KB. Större bilder fungerar bättre som vanliga filer, så att din HTML eller CSS inte sväller i onödan.
Tips och bästa praxis
- Optimera bilderna först: Komprimera och ändra storlek på dina bilder innan du omvandlar dem till Base64. Mindre källfiler ger kortare och effektivare Base64-strängar.
- Använd bara för små bilder: Base64 passar bäst för ikoner, logotyper och miniatyrer under 10-20 KB. För större bilder ger externa filreferenser bättre prestanda.
- Kopiera hela data-URI:n: Utdata innehåller hela prefixet data:image/[format];base64, så den kan klistras in direkt i HTML eller CSS utan ändringar.
- Titta på kodsnuttarna: Använd de medföljande HTML- och CSS-exemplen som mallar för att integrera Base64-bilden i ditt projekt.
- Fundera på cachning: Base64-kodade bilder som är inbäddade i HTML eller CSS cachas tillsammans med dokumentet, medan externa bilder kan cachas oberoende. Välj det tillvägagångssätt som passar din cachningsstrategi bäst.
- Ladda ned som säkerhetskopia: Använd knappen Ladda ned för att spara Base64-textfilen som säkerhetskopia, särskilt för bilder som används i flera projekt.