Seuraa tätä esimerkkiä ja sovella samoja säätimiä omaan kuvaasi. Avaa Kuva Base64-muuntimeksi.
Valitse kuva ja esikatsele sen identiteetti
Avaa Kuva Base64-muuntimeen. Valitse kuva tai kokeile esimerkkiä. Esimerkissä käytetään 512 × 512 pikselin favicon-orbit.png-tiedostoa, joka sisältää 202,491 tavua. Editori näyttää kuvan koodinsa yläpuolella, jotta voit vahvistaa valinneesi haluamasi resurssin.
PNG, JPG, WebP, GIF, BMP ja AVIF ovat tuettuja, kun selaimesi voi purkaa ne esikatselua varten. Tiedoston enimmäiskoko on 25 MB, rajoituksina 60 megapikseliä ja 16,000 pikseliä per sivu. SVG-merkintää ei hyväksytä tässä rasterimuuntimessa.
Työkalu lukee alkuperäisen tiedoston tavut. Se ei käytä esikatselua kuvan uudelleenrakentamiseen, koon muuttamiseen tai uudelleenpakkaamiseen. Olemassa olevat metatiedot ja GIF-animaatio säilyvät siksi koodatussa datassa.
Ennen koodausta käytä Muuta kuvan kokoa tai Kuvan pakkaajaa, jos tarvitset pienemmän resurssin. Base64 itsessään ei pienennä kuvan kokoa.
Valitse esitysmuoto, jota projektisi odottaa
Avaa Asetukset ja valitse tässä esimerkissä Code format -kohdasta HTML image. Tuloksena on img-elementti, joka sisältää Base64-data-URL-osoitteen. Alt-attribuutti on aluksi tyhjä; kirjoita hyödyllinen vaihtoehtoinen teksti, kun kuva välittää tietoa.
Data-URL alkaa etuliitteellä, kuten data:image/png;base64, jota seuraa koodattu data. Pelkkä Base64 sisältää vain datan. CSS background käärii data-URL-osoitteen background-image-määritykseen. Nämä esitysmuodot palvelevat eri käyttötarkoituksia, joten kopioi sovelluksesi pyytämä muoto sen sijaan, että muuttaisit vain tiedostonimeä.
Koodipaneeli päivittyy välittömästi, kun muutat Code format -asetusta. Kopiointikuvake kopioi nykyisen esitysmuodon ja näyttää vahvistuksen kopioinnista. Kun leikepöydän käyttö on estetty, koodi valitaan manuaalista kopiointia varten.
Täydellinen HTML img-elementti ei ole sama asia kuin data-URL. Käytä vain src-arvoa, kun kenttä pyytää URL-osoitetta.
Tämän oppaan esimerkki
Kokeile näytettä: favicon-orbit.png, 512 × 512 px, 202,491 tavua. Valitse HTML image Code format -kohdasta. Valitse Start ja lataa favicon-orbit-base64.txt.
- Alkuperäinen PNG
- 512 × 512 px · 202,491 tavua
- HTML tekstituloste
- 270,029 tavua
- Koodaus
- Alkuperäiset tavut; ei uudelleenpakkausta
Lataa koodi ja ymmärrä sen koko
Valitse Start ja sitten Download. Esimerkki tallentaa tiedoston favicon-orbit-base64.txt, joka sisältää HTML image -koodia. Sen 270,029 tavua on enemmän kuin 202,491-tavuinen lähde. Artikkelin vertailu näyttää ladatun tekstin todellisen alun, joka on lyhennetty vain luettavuuden vuoksi.
Base64 muuntaa tyypillisesti kolme lähdetavua neljäksi tekstimerkiksi, mikä lisää kokoa noin kolmanneksen ennen pientä käärettä. Pienen kuvakkeen upottaminen voi tehdä asiakirjasta itsenäisen, mutta suurten kuvamerkkijonojen sijoittaminen HTML tai CSS sisään myös suurentaa kyseistä asiakirjaa ja estää kuvan välimuistiin tallentamisen erillisenä tiedostona.
Koodaus ei ole salausta. Kuka tahansa, jolla on täydellinen Base64-merkkijono, voi palauttaa alkuperäisen kuvan. Käsittele koodia samalla huolellisuudella kuin lähdettä, jos se sisältää yksityisiä tietoja.
Tämän artikkelin lyhennetty ote on selittävä. Käytä täydellistä ladattua TXT tai kopioi koko koodi työkalusta.
Yleisiä kysymyksiä
Heikentääkö koodaus kuvanlaatua?
Ei. Koodaus säilyttää alkuperäiset tavut. Se ei muuta kokoa, pakkaa tai piirrä kuvaa uudelleen.
Miksi Base64-merkkijono on kuvaa suurempi?
Base64 edustaa kolmea syötetavua neljällä tekstimerkillä, joten se lisää yleensä noin kolmanneksen ennen käärettä tai etuliitettä.
Säilyvätkö GIF-animaatiot?
Koodaus säilyttää alkuperäiset GIF tavut, mukaan lukien animaation. Esikatselu saattaa näyttää vain yhden ruudun, vaikka koodattu data sisältää kaikki ruudut.
Onko Base64 turvallinen salaisille kuville?
Base64 ei ole salaus. Pidä merkkijono yksityisenä, jos alkuperäinen kuva on yksityinen. Muunnin käsittelee tiedot paikallisesti selaimessasi.
Muuta oikea kuva oikeaksi koodiksi.
Kokeile näytettä tai käytä omaa tiedostoasi ja tarkista tulos ennen jakamista.
