🖼️ Base64-bildkonverterare

Konvertera bilder till Base64-strängar eller återställ Base64 till bilder.

Bildfil

📁

Klicka eller dra och släpp en bild

Inkludera Data URL

GUIDE

Las mer

1. Vad är Base64-kodning

Base64 är en kodningsmetod som omvandlar binär data till ASCII-strängar. Den gör det möjligt att representera binära filer som bilder, ljud och video i textformat, vilket möjliggör överföring av binär data via textbaserade protokoll som e-post, JSON och XML. Den använder endast 64 ASCII-tecken (A-Z, a-z, 0-9, +, /) för att representera all binär data. Den är användbar för att bädda in bilder direkt i HTML med Data URLs eller för att inkludera bilder i API-svar. Samtidigt ökar den ursprungliga storleken med ungefär 33%.

2. Användningsområden för Base64-bilder

Base64-bilder används i många olika webbutvecklingsscenarier. Direkt inbäddning av små ikoner som CSS background-image minskar antalet HTTP-förfrågningar och förbättrar sidans laddningstid. Det används i e-postmallar för att undvika att externa bilder blockeras. När hela webbsidor distribueras som en enda HTML-fil kan alla bilder inkluderas som Base64. I RESTful API:er kan bilder direkt inkluderas i JSON-svar utan separata filuppladdningar. Det används också när bilder som skapas med Canvas API skickas till servrar.

3. Format för Data URL

Data URL är ett schema för att representera filer som URL:er. Format: data:[<mediatype>][;base64],<data>. Exempel: data:image/png;base64,iVBORw0KG... Mediatype anger MIME-typ som image/png, image/jpeg, image/gif. ;base64 anger kodningsmetoden, följt av den faktiska Base64-strängen. Kan användas direkt i HTML img-taggar som <img src="data:image/png;base64,...">. Används också i CSS som background: url(data:image/svg+xml;base64,...). Webbläsare behandlar Data URLs som vanliga URL:er för att visa bilder.

4. Prestandaöverväganden

Prestanda bör beaktas när Base64-bilder används. Små bilder (under 1-2KB) gynnas av inbäddning framför kostnaden för en HTTP-förfrågan. Stora bilder kan faktiskt bli långsammare på grund av 33% större storlek och tolkningskostnad från Base64. Base64-bilder kan inte använda webbläsarens cache och laddas varje gång tillsammans med HTML/CSS. Bilder som används ofta bör levereras som separata filer för cachelagring. Gzip-komprimering fungerar bra på Base64-strängar, så aktivera det på servrar. Base64 passar för dekorativa bilder eller ikoner, inte för kritiskt innehåll.

5. Säkerhetsöverväganden

Det finns säkerhetsrisker med Base64-bilder. När användaruppladdade bilder konverteras till Base64 och visas, var försiktig med XSS-attacker. SVG-bilder är särskilt farliga eftersom de kan innehålla JavaScript. Content-Security-Policy-headers kan begränsa användningen av data:-schemat. Sätt filstorleksgränser för att förhindra minnesutarmningsattacker. Validera bildtyper för att endast bearbeta tillåtna MIME-typer (image/png, image/jpeg). Verifiering på serversidan bör bekräfta att det verkligen är bildfiler och kontrollera om skadlig kod finns.

6. Base64-konvertering i programmeringsspråk

De flesta programmeringsspråk har inbyggt stöd för Base64-kodning. JavaScript använder btoa() för kodning, atob() för avkodning och FileReader API för att läsa filer som Base64. Python erbjuder b64encode() och b64decode() i modulen base64. PHP använder funktionerna base64_encode() och base64_decode(). Java använder getEncoder() och getDecoder() via klassen java.util.Base64. Node.js kodar med Buffer.from(data).toString("base64") och avkodar med Buffer.from(base64, "base64"). Att läsa bildfiler och konvertera dem till Base64 är enkelt att implementera med standardbibliotek i alla språk.

Vanliga fragor

När ska jag slå på eller av alternativet "Inkludera Data URL"?

Ha det på om du vill klistra in resultatet direkt i en HTML img-tagg eller CSS background-image, eftersom prefixet data:image/png;base64, behövs. Stäng av det om du bara behöver den råa Base64-strängen för ett server-API.

Vilka bildformat (PNG, JPG, GIF, SVG) stöds?

Du kan ladda upp de flesta raster- och vektorformat som stöds av webbläsare - PNG, JPG, GIF, WebP, SVG och fler - för att konvertera till Base64, och avkodning återställer bilden med dess ursprungliga MIME-typ.

Om jag konverterar en Base64-sträng tillbaka till en bild, är den identisk med originalet?

Ja, Base64 är en förlustfri kodning, så avkodning återställer en kopia som är identisk pixel för pixel med originalfilen.

Varför känns konvertering av en stor bild långsam eller ger en väldigt lång sträng?

Base64-kodning ökar storleken med cirka 33% jämfört med den ursprungliga binärfilen, och eftersom den behandlas som en sträng i webbläsarens minne tar större bilder längre tid och ger längre utsträngar.

Är det säkert att använda den konverterade Base64-strängen direkt på min webbplats?

För vanlig inbäddning av bilder fungerar det bra, men om du visar användaruppladdade filer som de är kan SVG-filer innehålla inbäddade skript, så produktionstjänster bör också lägga till validering på serversidan.