Mikä on Base64 ja milloin sitä pitäisi käyttää kuvien upottamiseen?

Jos olet työskennellyt nykyaikaisen verkkokehityksen parissa, olet luultavasti kohdannut loputtoman kaoottisen merkkijonon, joka alkaa data:image/png;base64, ja jota seuraa puhdasta hölynpölyä. Tämä on Base64-koodattu kuva.

Mikä Base64-koodaus oikein on?

Pohjimmiltaan Base64 on binääristä tekstiksi -koodausmalli. Se ottaa binaaridataa (kuten kuvan, äänitiedoston tai käännetyn asiakirjan) ja kääntää sen ASCII-merkkijonomuotoon. Nimi "Base64" tulee siitä tosiasiasta, että se käyttää 64 merkin aakkosia (A-Z, a-z, 0-9, + ja /) edustamaan tietoja.

Tämä muunnos on uskomattoman hyödyllinen, koska monet Internet-protokollat ​​(kuten HTTP, HTML ja CSS) on suunniteltu erityisesti käsittelemään pelkkää tekstiä turvallisesti. Muuntamalla binääritiedot tekstiksi takaamme, että tiedot voidaan siirtää näiden protokollien kautta vahingoittumatta.

Milloin sinun pitäisi upottaa kuvia Base64: llä?

Base64-merkkijonojen upottaminen suoraan HTML:ään (`<img src="data:image...">`) tai CSS:ään (`background-image: url("data:image...")`) tavallisen URL-osoitteen sijaan voi olla merkittäviä etuja, mutta vain hyvin erityisissä käyttötapauksissa:

• Mikrokuvakkeet ja pyörittimet: Jos sinulla on pieniä käyttöliittymäelementtejä (kuten 1 kt:n latauspyörä tai valintamerkki), niiden Base64-koodaus poistaa selaimen tarpeen tehdä erillinen HTTP-pyyntö kuvatiedoston hakemiseksi. Tämä nopeuttaa kriittisen käyttöliittymän hahmontamista.
• HTML-sähköpostit: Monet sähköpostiohjelmat estävät ulkoisen kuvien lataamisen tietosuojasyistä. Logon upottaminen suoraan HTML:ään Base64:n kautta voi ohittaa nämä lohkot ja varmistaa, että sähköpostisi näyttää täydelliseltä.
• Yhden tiedoston verkkosovellukset: Jos rakennat työkalua, joka on jaettava yhtenä .html-tiedostona ja joka toimii täysin offline-tilassa, kaiken sisällön upottaminen Base64:n kautta on ainoa tapa pakata se oikein.

Milloin Base64:ää tulisi VÄLTÄ?

Base64-koodauksen suurin haittapuoli on, että se kasvattaa sisällön tiedostokokoa noin 33 %. 1 Mt:n kuvasta tulee 1,33 Mt:n tekstijono.

Lisäksi selaimet eivät voi tallentaa Base64-merkkijonoa välimuistiin itsenäisesti. Jos upotat massiivisen Base64-merkkijonon CSS-tiedostoosi, selaimen on ladattava tämä massiivinen CSS-tiedosto jokaisella sivulatauksella, ja valtavien tekstimerkkijonojen jäsentäminen estää pääsäikeen, mikä aiheuttaa vakavan viiveen (huono aika vuorovaikutukseen).

Kultainen sääntö: Älä koskaan Base64 koodaa suuria valokuvia tai sankarikuvia. Koodaa vain pieniä SVG-kuvakkeita tai mikroskooppisia rasteritiedostoja, joissa HTTP-pyynnön yläraja on huonompi kuin 33 %:n tiedostokoon rangaistus.