Question 1

Vad är en Base64-bild och varför använda det?

Accepted Answer

En Base64-bild är en bildfil som har konverterats till en Base64-kodad sträng. Detta gör att bilden kan representeras som text och bäddas in direkt i HTML, CSS eller JSON utan en separat fil. Vanliga användningar:

bädda in små bilder i HTML/CSS för att minska HTTP-förfrågningar

inkludera bilder i JSON API-svar

bädda in bilder i SVG-filer

skapa data-URI:er för webbappar

lagra bilder i databaser utan binärstöd

Trots att filstorleken ökar med ~33 %, överväger fördelarna ofta för små bilder.

Question 2

Hur använder jag Base64-bilder i HTML, CSS och JavaScript?

Accepted Answer

Exempel:
HTML:
CSS: background-image: url('data:image/jpeg;base64,ABC123...');
JavaScript: const img = new Image(); img.src = 'data:image/png;base64,ABC123...';
Formatet är alltid data:[MIME type];base64,[data]. Bra för små bilder, men stora bör laddas som vanliga filer.

Question 3

Vilka är för- och nackdelarna med Base64-bilder?

Accepted Answer

Fördelar:

färre HTTP-förfrågningar

färre filer, enklare deploy

kan bäddas in i JSON

inga CORS-problem

cache uppdateras med kod

Nackdelar:

~33 % större filer

ingen separat cache i webbläsaren

större HTML/CSS-filer

svårare underhåll av inbäddade bilder

prestandaproblem med stora filer

Rekommenderas för små ikoner/UI-element, inte för stora bilder.

Question 4

Vilka bildformat kan konverteras till Base64?

Accepted Answer

Alla, men vanligast på webben:

PNG (logotyper, transparens)

JPEG (foton)

SVG (vektorgrafik)

GIF (enkla animationer)

WebP (modern komprimering)

ICO (favicon)

Rätt MIME-typ måste anges (ex. data:image/png;base64,). Verktyget känner av detta automatiskt.

Question 5

Finns det en storleksgräns för Base64-bilder?

Accepted Answer

Tekniskt sett nej, men praktiskt:

filer blir ~33 % större

långa strängar kan göra webbläsaren långsam

begränsningar för CSS data-URI-längd i vissa webbläsare

större HTML/CSS ger långsammare laddning

Bäst för små bilder (<10KB). Stora bilder bör servas via HTTP/HTTPS.

Base64 Bildkonverterare – Konvertera mellan bilder och Base64

Vanliga frågor och svar

Relaterade verktyg

SLO-förbrukningssimulator – Visualisera förbrukningen av Service Level Objective-budget

JSON-YAML-konverterare – Konvertera mellan JSON och YAML

Base64 Kodare/Avkodare – Konvertera text och binär data