Koodaa kuva Base64 / Data URI:ksi

Data URI on URL-osoite, joka sisältää resurssin tiedot suoraan sen sijaan, että se viittäisi etätiedostoon. Sen yleinen muoto on data:[<mediatype>][;base64],<data>. Kuvan kohdalla se on tyypillisesti muotoa data:image/png;base64,iVBORw0KGgo…. Resurssi upotetaan HTML-, CSS- tai JSON-koodiin ja ladataan ilman ylimääräisiä HTTP-pyyntöjä.

Yleisimpiä syitä:

• HTTP-pyyntöjen vähentäminen : kuvakkeen upottaminen suoraan CSS-koodiin sen sijaan, että se ladattaisiin erillisenä tiedostona
• Sähköpostin allekirjoitus upotetulla kuvalla : ei riskiä, että kuva estetään ulkoisena sisältönä
• Web Components / Web Workers : joissa ulkoisen resurssin lataaminen aiheuttaa usein ongelmia näkyvyysalueen (scope) tai CORS-käytäntöjen kanssa
• Paikallinen tallennus (LocalStorage, IndexedDB, tietokanta) : profiilikuvan pikkukuvan sarjallistaminen merkkijonoksi
• Itsenäiset koodinpätkät : HTML-tiedosto, joka on omavarainen ilman ulkoisia riippuvuuksia

Konkreettisia tilanteita, joissa kuvan Base64-koodaus on perusteltua:

• Upotetut SVG-kuvakkeet CSS:ssä (background-image: url("data:image/svg+xml;base64,…"))
• Yksilölliset sähköpostiallekirjoitukset logolla
• Nopea prototyyppaus itsenäiselle sivulle, joka jaetaan sähköpostitse
• Itsenäiset Web-komponentit (yksi julkaistava tiedosto)
• PDF:n luominen selaimessa (jsPDF) upotetuilla pikkukuvilla
• Testidatat (mockit), jotka sisältävät kuvia

Kolme vaihetta:

1. Lataa kuvasi (PNG, JPG, SVG, WebP, GIF) pudotusalueen kautta
2. Napsauta ”Koodaa”
3. Kopioi syntynyt Data URI erillisellä painikkeella ja liitä se HTML-, CSS- tai JSON-koodiisi

Base64 ei ole mikään ihmeratkaisu. Muutamia huomioita:

• Base64 kasvattaa kokoa noin 33 % : 4 ASCII-merkkiä jokaista 3 binaaritavua kohden
• Selain ei välimuistita koodattuja kuvia erikseen ; ne ladataan uudelleen niitä sisältävän HTML/CSS-koodin mukana
• Suositeltavaa alle 10 kt:n kuville ; sitä suurempien kohdalla ulkoinen tiedosto on yleensä tehokkaampi
• SVG:lle kannattaa mieluummin käyttää URL-koodausta (encodeURIComponentin kautta) kuin Base64-muotoa: lopputulos on lyhyempi ja säilyy tekstimuotoisena
• Nykyaikaiset rakennustyökalut (kuten Webpack ja Vite) automatisoivat Base64- ja ulkoisen tiedoston välisen valinnan säädettävän kokorajan avulla

HTML :

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNgYAAAAAMAAS+rJYwAAAAASUVORK5CYII=" alt="pixel">

CSS :

.icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…") no-repeat;
  width: 16px;
  height: 16px;
}

JSON (testidata) :

{
  "user": {
    "name": "Adrien",
    "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA…"
  }
}

Mitä eroa on Base64-muodolla ja binaarilla?

Binaari edustaa tiedoston raakoja tavuja. Base64 on koodaus, joka muuntaa nämä tavut 64 tulostettavaksi ASCII-merkiksi (A-Z, a-z, 0-9, +, /). Tekstipohjaiset ympäristöt (HTML, JSON, sähköposti) eivät voi siirtää binaaridataa; Base64 ratkaisee tämän ongelman 33 %:n kokolisäyksen kustannuksella.

Miksi Data URI on niin pitkä?

30 kt:n binaarikuva muuttuu noin 40 kt:n Base64-merkkijonoksi. Ja koska jokainen merkki on ASCII-tavu, merkkijono on pitkä. Tämä johtuu koodaustavasta. Suurille kuville on parempi käyttää ulkoista tiedostoa.

Tukevatko kaikki selaimet Data URI -osoitteita?

Kyllä, poikkeuksetta kaikissa nykyaikaisissa selaimissa (Chrome, Firefox, Safari, Edge, jopa IE8:sta alkaen). Historiallisena rajoituksena IE8:ssa raja oli 32 kt. Nykyisin tästä ei ole enää huolta verkossa.

Miten Data URI puretaan?

Base64-kuvapurkumme tekee päinvastaisen operaation: liitä Data URI, niin saat kuvatiedoston (PNG, JPG, SVG, WebP) valmiina ladattavaksi tai tallennettavaksi.

Base64 vai URL-koodaus SVG-kuville?

SVG:n kohdalla URL-koodaus (käyttäen encodeURIComponent-funktiota) tuottaa lyhyemmän merkkijonon kuin Base64 ja säilyy tekstinä luettavissa. Tämä on suositeltava valinta CSS:ssä, kun SVG upotetaan suoraan koodiin. Binaarimuodoille (PNG, JPG) Base64 on edelleen välttämätön.

Vaikuttaako Base64-koodaus kuvan laatuun?

Ei. Koodaus on lossless : se on täsmällinen vastaavuus binaaritavujen ja Base64-merkkijonon välillä. Alkuperäiset pikselit säilyvät täysin muuttumattomina. Vain siirrettävän tiedoston koko kasvaa 33 %.