Question 1

Hva er et Base64-bilde og hvorfor bruke det?

Accepted Answer

Et Base64-bilde er en bildefil som er konvertert til en Base64-kodet streng. Dette gjør at bildet kan representeres som tekst og bygges inn direkte i HTML, CSS eller JSON uten en egen fil. Vanlige bruksområder:

bygge inn små bilder i HTML/CSS for færre HTTP-forespørsler

inkludere bilder i JSON API-responser

bygge inn bilder i SVG-filer

lage data-URIer for webapper

lagre bilder i databaser uten binærstøtte

Selv om Base64 øker størrelsen med ~33 %, oppveier fordelene for små bilder ofte ulempene.

Question 2

Hvordan bruke Base64-bilder i HTML, CSS og JavaScript?

Accepted Answer

Bruksområder:
HTML:
CSS: background-image: url('data:image/jpeg;base64,ABC123...');
JavaScript: const img = new Image(); img.src = 'data:image/png;base64,ABC123...';
Format: data:[MIME type];base64,[data]. Godt for små bilder, men for store bilder er tradisjonelle filer bedre.

Question 3

Hva er fordeler og ulemper med Base64-bilder?

Accepted Answer

Fordeler:

færre HTTP-forespørsler

færre filer, enklere deploy

kan bygges inn i JSON

ingen CORS-problemer

cache følger kodeendringer

Ulemper:

større fil (~33 %)

ingen separat caching i nettleser

større HTML/CSS-filer

vanskeligere å oppdatere

ytelsesproblemer for store bilder

Best for små ikoner og UI-elementer, ikke store bilder.

Question 4

Hvilke bildeformater kan konverteres til Base64?

Accepted Answer

Alle, men mest brukt på web:

PNG (logoer, gjennomsiktighet)

JPEG (bilder/foto)

SVG (vektorgrafikk)

GIF (enkle animasjoner)

WebP (moderne komprimering)

ICO (favicon)

Korrekt MIME-type må settes (f.eks. data:image/png;base64,). Verktøyet finner dette automatisk.

Question 5

Finnes det en størrelsesgrense for Base64-bilder?

Accepted Answer

Teknisk nei, men praktisk ja:

~33 % større filer

lange strenger kan gi treghet

begrensninger i CSS data-URI-lengde i noen nettlesere

større HTML/CSS gir tregere lasting

Anbefalt: kun små bilder (<10KB). Store bilder bør serveres via HTTP/HTTPS.

Base64 Bildekonverter – Konverter mellom bilder og Base64

Ofte stilte spørsmål

Beslektede verktøy

SLO-forbruksimulator – Visualiser forbruk av Service Level Objective-budsjett

Base64 Koder/Dekoder – Konverter tekst og binære data

Regex-tester – Test og feilsøk regulære uttrykk