CodeKitHubMikä tämä työkalu on?
Base64 on tapa esittää binääridataa — kuten kuvan raakoja tavuja — pelkkänä tekstinä käyttäen vain kirjaimia, numeroita ja muutamaa symbolia. Koska se on pelkkää tekstiä, Base64-koodattu kuva voidaan upottaa suoraan HTML:ään, CSS:ään tai JSON:iin erillisen tiedoston sijaan.
"Data-URL" kääri kyseisen Base64-tekstin pieneen etuliitteeseen (data:image/png;base64,), joka kertoo selaimelle, minkälaisesta tiedostosta on kyse, jotta se voidaan pudottaa suoraan src- tai url()-attribuuttiin ja näyttää ilman ylimääräistä pyyntöä.
Miksi käyttää sitä?
- Saat molemmat muodot kerralla — täyden data-URL:n HTML:ää/CSS:ää varten ja raakan Base64:n (ilman etuliitettä) JSON:iin tai konfiguraatiotiedostoihin upottamista varten.
- Ei palvelinedestakaisia matkoja: eliminoi yhden HTTP-pyynnön pienille kuvakkeille, avatareille tai upotetuille kuville.
- Säilyttää alkuperäiset tiedostotavut tarkasti — ei uudelleenkoodausta tai laatuhäviötä, toisin kuin työkaluissa, jotka purkavat ja tallentavat kuvan uudelleen.
- Näyttää kokoeron, jotta tiedät mitä vaihdat mukavuuden puolesta.
- Yksityinen: tiedosto luetaan paikallisesti selaimen FileReader-rajapinnalla eikä koskaan poistu laitteeltasi.
Käyttöohje
- Napsauta latausaluetta tai vedä kuvatiedosto sen päälle.
- Kopioi täysi data-URL, jos liität sen <img src>- tai CSS:n background-image-ominaisuuteen.
- Kopioi raaka Base64 (ilman data:-etuliitettä), jos upotat arvon JSON:iin, YAML:iin tai muuhun konfiguraatiomuotoon, joka jo tietää tiedostotyypin.
- Tarkista kokohuomautus — Base64-teksti on noin kolmasosan suurempi kuin alkuperäinen binääritiedosto.
Esimerkki
Syöte
12 kt:n PNG-kuvaketiedosto.Tuloste
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 kt tekstiä) sekä sama merkkijono ilman data:-etuliitettä.~33 %:n kokokasvu on Base64-koodaukselle luontainen (3 tavua binääriä muuttuu 4:ksi tekstimerkiksi) — se ei ole työkalun virhe.
Missä kutakin muotoa käytetään
| Muoto | Tyypillinen käyttö |
|---|---|
| Täysi data-URL | HTML <img src="...">, CSS background-image: url(...), upotetut sähköpostikuvat |
| Raaka Base64 | JSON-rajapintojen hyötykuormat, YAML/konfiguraatiotiedostot, tietokannan BLOB-kentät, mukautetut binääriprotokollat |
Base64 ja kuvakoko — kompromissi käytännössä
~33 %:n lisäkuormitus tarkoittaa, että Base64-upotus kannattaa pitää pienissä resursseissa: 2 kt:n kuvakkeesta tulee harmiton ~2,7 kt:n rivinsisäinen teksti, mutta 500 kt:n valokuvasta tulee ~665 kt:aa tekstiä HTML:n sisällä, mikä hidastaa jäsentämistä eikä sitä voi tallentaa välimuistiin erikseen sivusta.
Jos upotat monia kuvia tai suurempia kuvia, punnitse yhden säästetyn pyynnön hyötyä sivun painon kustannusta vasten — ja harkitse pakkaamista ensin.
Usein kysytyt kysymykset
Miksi Base64-merkkijono on niin paljon suurempi kuin kuvatiedostoni?
Base64 koodaa jokaiset 3 binääritavua 4 tekstimerkiksi, mikä on kiinteä noin 33 %:n kokolisä. 100 kt:n kuvalle odota noin 133 kt:aa Base64-tekstiä. Tämä on normaalia ja väistämätöntä — se on hinta binääridatan esittämisestä turvallisena, siirrettävänä tekstinä.
Mikä ero on data-URL:llä ja raa'alla Base64-merkkijonolla?
Data-URL sisältää data:image/png;base64, -etuliitteen, joka kertoo selaimelle tai renderöijälle, minkä MIME-tyypin seuraava teksti purkaa. Liitä täysi data-URL HTML-src:hen tai CSS:n url()-funktioon. Raaka Base64 (kaikki pilkun jälkeen) on se, mitä tarvitset, kun järjestelmä jo tietää tiedostotyypin erikseen — esimerkiksi JSON-kentässä kuten { "format": "png", "data": "<raaka base64>" }.
Milloin minun pitäisi upottaa kuva Base64:nä tiedostoon linkittämisen sijaan?
Base64-upotus on hyödyllinen pienille, usein uudelleenkäytetyille kuville (kuvakkeet, logot, pienet käyttöliittymägrafiikat), joissa yhden HTTP-pyynnön säästäminen on tärkeämpää kuin ~33 %:n kokorasite, tai yhteyksissä, joissa erillinen tiedosto ei ole käytännöllinen, kuten upotetut sähköpostikuvat tai yksitiedostoiset HTML-viennit. Suurille valokuville tai monilla sivuilla uudelleenkäytetylle sisällölle tavallinen linkitetty tiedosto selaimen välimuistin kanssa on lähes aina parempi.
Muuttaako tai pakkaako Base64-muunnos kuvani?
Ei. Base64 on häviötön tekstikoodaus täsmälleen alkuperäisistä tavuista — se ei koske pikseleitä, resoluutiota tai pakkausta. Jos haluat pienemmän tiedoston, pakkaa kuva ensin kuvanpakkaajalla ja muunna sitten pakattu tulos Base64:ksi.
Ladataanko kuvani jonnekin?
Ei. Tiedosto luetaan suoraan selaimessasi FileReader-rajapinnalla ja koodataan paikallisesti — sitä ei koskaan lähetetä verkon yli.