Question 1

Mikä on Base64-kuva ja miksi sitä käytetään?

Accepted Answer

Base64-kuva on kuvatiedosto, joka on muunnettu Base64-koodatuksi merkkijonoksi. Näin kuva voidaan esittää tekstinä ja upottaa suoraan HTML:ään, CSS:ään tai JSON:iin ilman erillistä tiedostoa. Yleisiä käyttötapoja:

pienten kuvien upottaminen HTML/CSS:ään HTTP-pyyntöjen vähentämiseksi

kuvien sisällyttäminen JSON API -vastauksiin

kuvien upottaminen SVG-tiedostoihin

data-URI:en luominen web-sovelluksille

kuvien tallentaminen tietokantoihin ilman binääritukea

Tiedostokoko kasvaa noin 33 %, mutta pienille kuville hyödyt usein ylittävät haitat.

Question 2

Miten käytän Base64-kuvia HTML:ssä, CSS:ssä ja JavaScriptissä?

Accepted Answer

Esimerkkejä:
HTML:
CSS: background-image: url('data:image/jpeg;base64,ABC123...');
JavaScript: const img = new Image(); img.src = 'data:image/png;base64,ABC123...';
Muoto on aina data:[MIME-tyyppi];base64,[data]. Hyödyllinen pienille kuville, mutta suurille kuville tavalliset tiedostot ovat parempia.

Question 3

Mitkä ovat Base64-kuvien edut ja haitat?

Accepted Answer

Edut:

vähemmän HTTP-pyyntöjä

vähemmän tiedostoja, helpompi käyttöönotto

kuvat voidaan upottaa JSON:iin

ei CORS-ongelmia

välimuisti päivittyy koodin mukana

Haitat:

koko kasvaa ~33 %

ei erillistä välimuistia selaimessa

HTML/CSS-tiedostot kasvavat

sisäisten kuvien ylläpito hankalaa

suorituskyky heikkenee isoilla kuvilla

Sopii parhaiten pienille ikoneille ja käyttöliittymäelementeille, ei suurille valokuville.

Question 4

Mitä kuvaformaatteja voidaan muuntaa Base64:ksi?

Accepted Answer

Kaikki kuvaformaatit voidaan muuntaa. Yleisimmät webissä:

PNG (logot, läpinäkyvyys)

JPEG (valokuvat)

SVG (vektorigrafiikka)

GIF (yksinkertaiset animaatiot)

WebP (nykyaikainen pakkaus)

ICO (faviconit)

Oikea MIME-tyyppi täytyy määrittää (esim. data:image/png;base64,). Työkalu tunnistaa sen automaattisesti.

Question 5

Onko Base64-kuvilla kokorajoitusta?

Accepted Answer

Teknisesti ei, mutta käytännössä kyllä:

koko kasvaa ~33 %

pitkät merkkijonot hidastavat selainta

CSS data-URI:lla on pituusrajoituksia joissain selaimissa

HTML/CSS kasvaa ja hidastaa latausta

Suositus: käytä Base64 vain pienille kuville (<10KB). Suuremmat kuvat kannattaa palvella HTTP/HTTPS:n kautta.

Base64-kuvamuunnin – Muunna kuvien ja Base64:n välillä

Mikä on Base64-kuva ja miksi sitä käytetään?

Miten käytän Base64-kuvia HTML:ssä, CSS:ssä ja JavaScriptissä?

Mitkä ovat Base64-kuvien edut ja haitat?

Mitä kuvaformaatteja voidaan muuntaa Base64:ksi?

Onko Base64-kuvilla kokorajoitusta?