CodeKitHubMis see tööriist on?
Base64 on viis esitada binaarandmeid — näiteks pildi toorbaite — tavatekstina, kasutades ainult tähti, numbreid ja käputäit sümboleid. Kuna see on tavatekst, saab Base64-kodeeritud pildi manustada otse HTML-i, CSS-i või JSON-i, ilma et seda tuleks viidata eraldi failina.
"Data URL" mähib selle Base64-teksti väikese prefiksiga (data:image/png;base64,), mis ütleb brauserile, mis tüüpi failiga on tegemist, nii et selle saab panna otse src- või url()-atribuuti ja renderdada ilma täiendava päringuta.
Miks seda kasutada?
- Saad mõlemad vormingud korraga — täieliku data URL-i HTML/CSS jaoks ja toorse Base64 (ilma prefiksita) JSON-i või konfiguratsioonifailidesse manustamiseks.
- Ei mingit serveri edasi-tagasi käiku: säästab ühe HTTP-päringu väikeste ikoonide, avatarite või inline-piltide puhul.
- Säilitab algsed failibaidid täpselt — ei mingit ümberkodeerimist ega kvaliteedikadu, erinevalt tööriistadest, mis pildi dekodeerivad ja uuesti salvestavad.
- Näitab suuruse erinevust, et teaksid, mida mugavuse eest vastu annad.
- Privaatne: fail loetakse kohapeal brauseri FileReader API abil ega lahku kunagi sinu seadmest.
Kuidas kasutada
- Klõpsa üleslaadimisalal või lohista sinna pildifail.
- Kopeeri täielik data URL, kui kleebid selle <img src> või CSS background-image väärtusesse.
- Kopeeri toores Base64 (ilma data: prefiksita), kui manustad väärtuse JSON-i, YAML-i või mõnda muusse konfiguratsioonivormingusse, mis juba teab failitüüpi.
- Kontrolli suurusmärkust — Base64-tekst on umbes kolmandiku võrra suurem kui algne binaarfail.
Näide
Sisend
12 KB PNG-ikoonifail.Tulemus
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB teksti) pluss sama string ilma data: prefiksita.~33% suuruse kasv on Base64-kodeeringu olemuslik omadus (3 baiti binaarandmeid muutub 4 tekstimärgiks) — see ei ole tööriista viga.
Kus kumbki vorming kasuks tuleb
| Vorming | Tüüpiline kasutus |
|---|---|
| Täielik data URL | HTML <img src="...">, CSS background-image: url(...), inline e-kirjade pildid |
| Toores Base64 | JSON API andmed, YAML/konfiguratsioonifailid, andmebaasi BLOB-väljad, kohandatud binaarprotokollid |
Base64 ja pildisuurus — kompromiss praktikas
~33% lisakulu tähendab, et Base64-manustamine sobib kõige paremini väikestele objektidele: 2 KB ikoonist saab kahjutu ~2,7 KB inline-teksti, kuid 500 KB fotost saab ~665 KB teksti, mis istub inline sinu HTML-i sees, aeglustades parsimist ega saa lehest eraldi vahemällu salvestada.
Kui manustad palju pilte või suuremaid pilte, kaalu üles säästetud päringu kasu ja lehe kaalu kulu — ja mõtle tihendamisele enne.
Korduma kippuvad küsimused
Miks on Base64-string nii palju suurem kui mu pildifail?
Base64 kodeerib iga 3 baiti binaarandmeid 4 tekstimärgiks, mis on fikseeritud ~33% suuruse lisakulu. 100 KB pildi puhul oota umbes 133 KB Base64-teksti. See on normaalne ja vältimatu — see on hind binaarandmete esitamise eest ohutu, kantava tekstina.
Mis vahe on data URL-il ja toorel Base64-stringil?
Data URL sisaldab data:image/png;base64, prefiksit, mis ütleb brauserile või renderdajale, mis MIME-tüüpi järgnev tekst dekodeerub. Kleebi täielik data URL HTML-i src-i või CSS-i url()-i. Toores Base64 (kõik pärast koma) on see, mida tahad siis, kui süsteem juba teab failitüüpi eraldi — näiteks JSON-välja puhul nagu { "format": "png", "data": "<toores base64>" }.
Millal peaksin manustama pildi Base64-na, mitte viitama failile?
Base64-manustamine on kasulik väikeste, sageli korduvkasutatavate piltide puhul (ikoonid, logod, väikesed UI-graafikad), kus ühe HTTP-päringu säästmine kaalub üles ~33% suuruse trahvi, või kontekstides, kus eraldi fail pole praktiline, näiteks inline e-kirjades või ühefailisetes HTML-eksportides. Suurte fotode või mitmel lehel korduvkasutatavate piltide puhul on tavaline lingitud fail koos brauseri vahemäluga peaaegu alati parem valik.
Kas Base64-ks muutmine muudab või tihendab mu pilti?
Ei. Base64 on täpsete algsete baitide kadudeta tekstikodeering — see ei puutu pikslitesse, resolutsiooni ega tihendamisse. Kui soovid väiksemat faili, tihenda pilt kõigepealt pildikompressoriga ja muuda seejärel tihendatud tulemus Base64-ks.
Kas mu pilt laaditakse kuskile üles?
Ei. Fail loetakse otse sinu brauseris FileReader API abil ja kodeeritakse kohapeal — seda ei saadeta kunagi üle võrgu.