Base64 kodavimas ir jo taikymas tinklalapių kūrime
Base64 yra duomenų kodavimo schema, kuri dvejetainius duomenis, pavyzdžiui, paveikslėlius, paverčia tekstiniu formatu. Šis tekstas susideda iš ASCII simbolių rinkinio. Tinklalapių kūrime Base64 kodavimas naudojamas tam, kad paveikslėlius būtų galima įterpti tiesiogiai į svetainės kodą, nenaudojant išorinių failų nuorodų.
Kai paveikslėlis paverčiamas Base64 eilute, jis dažniausiai pateikiamas kaip „data URI“ (duomenų identifikatorius). Ši eilutė prasideda schema data:image/..., nurodančia failo tipą, po kurios seka kodavimo tipas ir patys užkoduoti duomenys. Toks formatas leidžia naršyklei nuskaityti ir atvaizduoti paveikslėlį tiesiai iš HTML arba CSS kodo.
Šis metodas turi aiškių privalumų ir trūkumų, kuriuos svarbu įvertinti prieš priimant sprendimą koduoti grafinius elementus:
- Privalumai: Įterpiant mažus paveikslėlius tiesiai į kodą, sumažinamas HTTP užklausų skaičius, reikalingas puslapiui užkrauti. Tai ypač naudinga mažiems piktogramų failams, dekoratyviniams elementams arba el. pašto šablonams, kur visi ištekliai turi būti pateikiami viename faile.
- Trūkumai: Base64 kodavimas padidina duomenų apimtį – užkoduotas tekstas yra maždaug trečdaliu didesnis už originalų dvejetainį paveikslėlio failą. Be to, taip įterptų paveikslėlių naršyklė negali talpinti talpykloje (angl. cache) atskirai nuo paties HTML ar CSS dokumento. Jei puslapyje naudojami dideli paveikslėliai, jų kodavimas į Base64 sulėtins svetainės krovimą ir padidins siunčiamų duomenų srautą.
Įrankio funkcijos ir palaikomi formatai
Šis įrankis atlieka dvipusį konvertavimą: paverčia paveikslėlius į Base64 tekstą arba iškoduoja Base64 tekstą atgal į pradinį paveikslėlio failą. Įrankis tik užkoduoja arba atkuria originalius paveikslėlio baitus – jis neatlieka suspaudimo, apkarpymo, dydžio keitimo ar konvertavimo į kitus formatus (pavyzdžiui, iš PNG į JPG).
Naudojant režimą „Paveikslėlis → Base64“, galima įkelti šių formatų failus:
- PNG
- JPG
- GIF
- WebP
- SVG
- AVIF
- BMP
- ICO
- TIFF
Maksimalus leidžiamas koduojamo paveikslėlio failo dydis yra 5 MB. Jei bandoma įkelti didesnį failą, sistema pateikia klaidą.
Naudojant režimą „Base64 → Paveikslėlis“, galima įklijuoti standartines arba URL saugias (angl. URL-safe) Base64 eilutes, taip pat pilnus „data URI“ tekstus. Įrankis geba apdoroti tekstą su tarpais bei naujos eilutės simboliais. Maksimalus dekoduojamo teksto ilgis yra 8 MB.
Konvertavimo eiga ir rezultatai
Konvertavimo procesas priklauso nuo pasirinktos krypties. Įrankio sąsajoje galima pasirinkti norimą režimą, o rezultatai pateikiami iškart po duomenų apdorojimo.
Paveikslėlio konvertavimas į Base64
Norėdami konvertuoti failą, vilkite jį į tam skirtą zoną arba spustelėkite, kad pasirinktumėte iš savo įrenginio. Jei vienu metu įkelsite kelis failus, įrankis apdoros tik patį pirmąjį.
Sėkmingai užkodavus paveikslėlį, po užrašu „Išvestis“ sugeneruojami keli išvesties formatai, kuriuos galima nukopijuoti:
- Data URI: Pilna eilutė, paruošta įterpimui į HTML arba CSS.
- Base64: Gryna Base64 tekstinė eilutė be papildomų prefiksų.
- CSS: Paruoštas kodas su
background-imagesavybe. - HTML: Paruoštas kodas su
<img>žyme.
Taip pat pateikiama papildoma informacija: „Išvestis simboliai“ (sugeneruoto teksto ilgis) ir „Paveikslėlio dydis“ (matmenys pikseliais).
Base64 teksto konvertavimas į paveikslėlį
Norėdami atkurti paveikslėlį iš teksto, įklijuokite Base64 arba data URI kodą į įvesties lauką. Įrankis automatiškai nustatys paveikslėlio tipą pagal dekoduotus duomenis. Dekoduotą paveikslėlį galima peržiūrėti ekrane ir atsisiųsti paspaudus mygtuką „Atsisiųsti paveikslėlį“. Visi atsisiunčiami failai išsaugomi naudojant pradinį pavadinimą brobrogo-paveikslelis. su atitinkamu failo plėtiniu (pavyzdžiui, .png arba .jpg).
Galimos klaidos ir jų sprendimas
Apdorojant failus arba tekstą, gali kilti klaidų dėl netinkamo formato, per didelio failo dydžio ar pažeistų duomenų. Tokiais atvejais įrankis rodo konkrečius pranešimus:
| Situacija | Klaidos pranešimas |
|---|---|
| Įkeliamas nepalaikomo formato failas | „Šis failo tipas nepalaikomas.“ |
| Įkeliamas failas, didesnis nei 5 MB | „Šis paveikslėlis yra didesnis nei {max}. Pasirinkite mažesnį.“ |
| Nepavyksta nuskaityti pasirinkto failo | „Nepavyko nuskaityti failo.“ |
| Įklijuotas tekstas nėra taisyklinga Base64 eilutė | „Tai nėra galiojanti Base64 eilutė.“ |
| Įvesties tekstas viršija 8 MB ribą | „Įvestis per ilga. Ji turi būti mažesnė nei {max}.“ |
| Tekstas iškoduojamas, bet duomenys neatpažįstami kaip paveikslėlis | „Ši Base64 eilutė nedekoduojama į atpažįstamą paveikslėlį.“ |
| Duomenys iškoduoti teisingai, bet naršyklė negali jų atvaizduoti | „Paveikslėlio duomenys dekoduoti, tačiau jų nepavyko parodyti.“ |
Privatumo užtikrinimas apdorojant duomenis
Naudojantis šiuo įrankiu, jūsų failų ir tekstinių duomenų saugumas yra užtikrinamas techniniu lygmeniu. Paveikslėlio nuskaitymas, kodavimas į Base64 tekstą ir atvirkštinis dekodavimo procesas vyksta tiesiogiai jūsų interneto naršyklėje. Duomenys nėra siunčiami į išorinius serverius, o konvertavimui atlikti nenaudojamas joks nuotolinis apdorojimas. Visi veiksmai atliekami lokaliai jūsų įrenginyje, todėl jokie jūsų įkelti paveikslėliai ar įklijuoti tekstai niekada nepasiekia „BroBroGo“ serverių.
Dažniausiai užduodami klausimai (DUK)
Kas yra Base64 data URI paveikslėlis?
Tai paveikslėlis, užkoduotas kaip tekstas, todėl jį galima įterpti tiesiai į HTML arba CSS kodą, užuot krovus iš atskiro failo. Tai sutaupo užklausą, o tai labai patogu mažiems piktogramų failams ar el. pašto šablonams.
Ar turėčiau tokiu būdu įterpti didelius paveikslėlius tiesiogiai kode?
Geriau to nedaryti. Naudojant Base64 failo dydis padidėja maždaug trečdaliu, be to, šių duomenų negalima talpinti talpykloje (angl. cache) atskirai nuo puslapio. Todėl šį būdą taikykite tik mažiems elementams, o didelius paveikslėlius nurodykite kaip įprastus failus.
Ar galima Base64 eilutę vėl paversti failu?
Taip. Pereikite į režimą „Base64 → Paveikslėlis“, įklijuokite data URI arba gryną Base64 eilutę – įrankis atpažins paveikslėlio tipą, parodys peržiūrą ir leis atsisiųsti failą.