CodeKitHubKas yra šis įrankis?
Base64 – tai būdas dvejetainius duomenis (pavyzdžiui, vaizdo baitus) pavaizduoti paprastu tekstu, naudojant tik raides, skaitmenis ir kelis simbolius. Kadangi tai paprastas tekstas, Base64 užkoduotą vaizdą galima įterpti tiesiai į HTML, CSS ar JSON, o ne nuorodą į atskirą failą.
"Data URL" apgaubia šį Base64 tekstą trumpu priešdėliu (data:image/png;base64,), kuris nurodo naršyklei, koks tai failo tipas, todėl jį galima tiesiog įrašyti į src arba url() atributą ir jis bus atvaizduotas be jokio papildomo užklausimo.
Kodėl jį naudoti?
- Gaukite abu formatus iš karto – pilną data URL, skirtą HTML/CSS, ir grynąjį Base64 (be priešdėlio) įterpimui į JSON ar konfigūracijos failus.
- Jokio kelionės iki serverio: pašalina vieną HTTP užklausą mažoms piktogramoms, avatarams ar įterptiems vaizdams.
- Išsaugo tikslius originalaus failo baitus – jokio pakartotinio kodavimo ar kokybės praradimo, kitaip nei įrankiuose, kurie iššifruoja ir iš naujo išsaugo vaizdą.
- Rodo dydžio skirtumą, kad žinotumėte, ką aukojate dėl patogumo.
- Privatu: failas nuskaitomas vietoje naudojant naršyklės FileReader API ir niekada nepalieka jūsų įrenginio.
Kaip naudoti
- Spustelėkite įkėlimo sritį arba nuvilkite vaizdo failą ant jos.
- Nukopijuokite pilną data URL, jei įklijuosite į <img src> arba CSS background-image.
- Nukopijuokite grynąjį Base64 (be data: priešdėlio), jei įterpiate reikšmę į JSON, YAML ar kitą konfigūracijos formatą, kuris jau žino failo tipą.
- Patikrinkite dydžio pastabą – Base64 tekstas yra maždaug trečdaliu didesnis nei originalus dvejetainis failas.
Pavyzdys
Įvestis
12 KB PNG piktogramos failas.Išvestis
data:image/png;base64,iVBORw0KGgoAAAANSU... (~16 KB teksto) plius ta pati eilutė be data: priešdėlio.~33% dydžio padidėjimas yra būdingas Base64 kodavimui (3 dvejetainiai baitai virsta 4 teksto simboliais) – tai nėra įrankio klaida.
Kur naudojamas kiekvienas formatas
| Formatas | Tipinis naudojimas |
|---|---|
| Pilnas data URL | HTML <img src="...">, CSS background-image: url(...), įterpti el. laiškų vaizdai |
| Grynasis Base64 | JSON API kroviniai, YAML/konfigūracijos failai, duomenų bazės BLOB laukai, individualūs dvejetainiai protokolai |
Base64 ir vaizdo dydis – kompromisas praktikoje
~33% pridėtinė apkrova reiškia, kad Base64 įterpimą geriausia palikti mažiems ištekliams: 2 KB piktograma virsta nekenksmingu ~2,7 KB įterpto teksto, tačiau 500 KB nuotrauka virsta ~665 KB teksto, glūdinčio jūsų HTML viduje, o tai lėtina apdorojimą ir negali būti talpinama atskirai nuo puslapio.
Jei įterpiate daug vaizdų arba didesnius, pasverkite sutaupytos vienos užklausos naudą prieš puslapio svorio kainą – ir apsvarstykite pirmiausiai suspausti.
→ Base64 kodavimas / dekodavimas · Vaizdo glaudinimo įrankis
Dažniausiai užduodami klausimai
Kodėl Base64 eilutė yra tiek didesnė nei mano vaizdo failas?
Base64 koduoja kiekvienus 3 dvejetainių duomenų baitus kaip 4 teksto simbolius, tai fiksuota ~33% pridėtinė apkrova. 100 KB vaizdui tikėkitės apie 133 KB Base64 teksto. Tai normalu ir neišvengiama – tokia kaina už dvejetainių duomenų pavertimą saugiu, perkeliamu tekstu.
Kuo skiriasi data URL ir grynoji Base64 eilutė?
Data URL apima priešdėlį data:image/png;base64,, kuris naršyklei ar atvaizdavimo sistemai nurodo, koks MIME tipas slypi po jo. Pilną data URL įklijuokite į HTML src arba CSS url(). Grynasis Base64 (viskas po kablelio) tinka tada, kai sistema jau atskirai žino failo tipą – pavyzdžiui, JSON lauke { "format": "png", "data": "<grynas base64>" }.
Kada verta įterpti vaizdą kaip Base64, o ne nurodyti nuorodą į failą?
Base64 įterpimas naudingas mažiems, dažnai pakartotinai naudojamiems vaizdams (piktogramoms, logotipams, nedideliems UI grafikams), kai vienos HTTP užklausos sutaupymas atsveria ~33% dydžio nuostolį, arba tada, kai atskiras failas nepraktiškas, pavyzdžiui, įterptuose el. laiškuose ar viename HTML faile. Didelėms nuotraukoms ar bet kam, kas naudojama daugelyje puslapių, paprastai geriau tinka įprastas susietas failas su naršyklės talpykla.
Ar konvertavimas į Base64 pakeičia ar suspaudžia mano vaizdą?
Ne. Base64 yra beveik nuostolingas teksto kodavimas tiksliems originaliems baitams – jis nekeičia pikselių, raiškos ar suspaudimo. Jei norite mažesnio failo, pirmiausia suspauskite vaizdą su vaizdo suspaustuvu, tada konvertuokite suspaustą rezultatą į Base64.
Ar mano vaizdas kur nors įkeliamas?
Ne. Failas nuskaitomas tiesiai jūsų naršyklėje naudojant FileReader API ir koduojamas vietoje – jis niekada nesiunčiamas tinklu.