Sledite temu delovnemu primeru, nato prilagodite iste kontrole svoji sliki. Odpri Pretvornik slike v Base64.
Izberite sliko in predogled njene identitete
Odprite pretvornik slike v Base64. Izberite sliko ali poskusite vzorec. Primer uporablja 512 × 512 slikovnih pik favicon-orbit.png, ki vsebuje 202,491 bajtov. Urejevalnik prikaže sliko nad njeno kodo, tako da lahko potrdite, da ste izbrali želeno sredstvo.
PNG, JPG, WebP, GIF, BMP in AVIF so podprti, ko jih vaš brskalnik lahko dekodira za predogled. Največja velikost datoteke je 25 MB, z omejitvami 60 milijonov slikovnih pik in 16,000 slikovnih pik na stran. Oznaka SVG ni sprejeta s tem rastrskim pretvornikom.
Orodje bere izvirne bajte datoteke. Ne uporablja predogleda za ponovno izdelavo slike, njeno spreminjanje velikosti ali ponovno stiskanje. Obstoječi metapodatki in animacija GIF so zato ohranjeni v kodiranih podatkih.
Pred kodiranjem uporabite Spremeni velikost slike ali Kompresor slik, če potrebujete manjše sredstvo. Base64 sam po sebi ne zmanjša velikosti slike.
Izberite predstavitev, ki jo pričakuje vaš projekt
Odprite Nastavitve in izberite HTML sliko pod Format kode za ta primer. Rezultat je oznaka img, ki vsebuje URL podatkov Base64. Atribut alt je sprva prazen; napišite uporabno nadomestno besedilo, ko slika sporoča informacije.
URL podatkov se začne s predpono, kot je data:image/png;base64, ki ji sledijo kodirani podatki. Navaden Base64 vsebuje samo podatke. CSS ozadje zavije URL podatkov v deklaracijo background-image. Te predstavitve služijo različnim ciljem, zato kopirajte obliko, ki jo zahteva vaša aplikacija, namesto da spreminjate samo ime datoteke.
Plošča s kodo se posodobi takoj, ko spremenite Format kode. Ikona za kopiranje kopira trenutno predstavitev in prikaže potrditev o kopiranju. Ko je dostop do odložišča blokiran, je koda izbrana za ročno kopiranje.
Celotna oznaka HTML img ni isto kot podatkovni URL. Uporabite samo vrednost src, ko polje zahteva URL.
Primer v tem vodniku
Poskusite vzorec: favicon-orbit.png, 512 × 512 px, 202,491 bajtov. Izberite HTML sliko pod Code format. Izberite Start in prenesite favicon-orbit-base64.txt.
- Izvirnik PNG
- 512 × 512 px · 202,491 bajtov
- HTML besedilni izhod
- 270,029 bajtov
- Kodiranje
- Izvorni bajti; brez ponovnega stiskanja
Prenesite kodo in preverite njeno velikost
Izberite Start in nato Download. Primer shrani favicon-orbit-base64.txt, ki vsebuje HTML slikovno kodo. Njenih 270,029 bajtov je več kot 202,491-bajtni vir. Primerjava v članku prikazuje dejanski začetek prenesenega besedila, skrajšanega le zaradi berljivosti.
Base64 običajno pretvori tri izvorne bajte v štiri besedilne znake, kar doda približno tretjino pred majhno ovojnico. Vdelava majhne ikone lahko naredi dokument samozadosten, vendar vstavljanje velikih slikovnih nizov v HTML ali CSS prav tako poveča dokument in prepreči, da bi se slika predpomnila kot ločena datoteka.
Kodiranje ni šifriranje. Kdor koli s celotnim nizom Base64 lahko obnovi izvorno sliko. S kodo ravnajte enako previdno kot z virom, če vsebuje zasebne podatke.
Skrajšani odlomek v tem članku je pojasnjevalne narave. Uporabite celoten preneseni TXT ali kopirajte celotno kodo iz orodja.
Pogosta vprašanja
Ali bo kodiranje zmanjšalo kakovost slike?
Ne. Kodiranje ohrani izvirne bajte. Slike ne spreminja velikosti, ne stiska in ne riše na novo.
Zakaj je niz Base64 večji od slike?
Base64 predstavlja tri vhodne bajte s štirimi besedilnimi znaki, zato običajno doda približno eno tretjino pred ovojnico ali predpono.
Ali se animacije GIF ohranijo?
Kodiranje ohrani izvorne GIF bajte, vključno z animacijo. Predogled lahko prikaže mirujoč okvir, medtem ko kodirani podatki ohranijo vse okvirje.
Ali je Base64 varen za skrivne slike?
Base64 ni šifriranje. Če je osnovna slika zasebna, naj bo niz zaseben. Sam pretvornik jo obdela lokalno v vašem brskalniku.
Spremenite pravo sliko v pravo kodo.
Preizkusite vzorec ali uporabite svojo datoteko in pred skupno rabo preglejte rezultat.
