Käyttöohje
- Valitse Kuva → Base64 ja valitse kuvatiedosto tai valitse Base64 → Kuva muuntaaksesi toiseen suuntaan.
- Valitse tarvitsemasi tuloste: data-URL, pelkkä Base64, HTML-img-elementti, CSS background-image -sääntö tai Markdown.
- Kopioi tulos ja liitä se koodiin, sähköpostipohjaan tai JSON-tiedostoon.
- Purkaaksesi liitä data-URL tai pelkkä Base64; kuva näytetään esikatselussa ja sen voi ladata.
Näin se toimii
Base64 esittää binääridataa 64 tulostettavalla merkillä, joten kuva voidaan kirjoittaa suoraan tekstimuotoisten tiedostojen sisään. Data-URL lisää mediatyypin eteen, esimerkiksi data:image/png;base64, jota seuraa koodatut tavut. Selaimet hyväksyvät data-URL-osoitteet kaikkialla, missä kuva-URL sallitaan: img-tagin src-määritteessä, CSS:n url()-funktiossa tai SVG-kuvaviittauksessa.
Koodattu teksti on aina noin kolmanneksen alkuperäistä tiedostoa suurempi (4 merkkiä jokaista 3 tavua kohti). Pienten kuvakkeiden ja paikkamerkkien upottaminen voi säästää erillisen verkkopyynnön, mutta upotettua dataa ei voi tallentaa välimuistiin sellaisenaan, ja se ladataan uudelleen jokaisen sivun tai tyylitiedoston mukana, joten se on harvoin kannattavaa yli muutaman kilotavun tiedostoissa. Monet sähköpostiohjelmat estävät tai poistavat data-URL-kuvat, joten testaa ennen käyttöä uutiskirjeissä.
Tiedosto koodataan tavu tavulta: mitään ei pakata uudelleen, ja tiedoston sisäiset metatiedot (kuten EXIF) säilyvät. Purkamisessa työkalu hyväksyy täydellisen data-URL-osoitteen, tavallisen Base64:n, URL-turvallisen Base64:n ja tekstin, joka on kopioitu yhdessä CSS url(…) -kääreen kanssa. Kuvatyyppi tunnistetaan puretuista tavuista eikä luoteta pelkkään annettuun tunnisteeseen.
Esimerkit
Pieni kuvake tyylitiedostossa
600 tavun PNG-kuvake muuttuu 800 merkin Base64-merkkijonoksi. CSS-tulostetta käyttämällä saat background-image-säännön, jonka voit liittää luokkaan ilman erillistä tiedostoa.
Kuva API-vastauksesta
API palauttaa JSON-kentän, kuten "iVBORw0KGgoAAAANSUhEUg…". Liitä se Base64 → Kuva -työkaluun nähdäksesi kuvan, tarkistaaksesi sen koon ja ladataksesi sen PNG-tiedostona.
SVG-logo HTML:ssä
SVG:n koodaaminen tuottaa data:image/svg+xml;base64-URL-osoitteen, joka toimii img-elementissä. SVG:ssä pakkaamaton SVG-merkintä itsessään on usein lyhyempi kuin Base64, joten harkitse SVG:n upottamista suoraan.
Usein kysytyt kysymykset
Miksi Base64-versio on suurempi kuin kuvani?
Base64 käyttää 4 tekstimerkkiä 3 tavun tallentamiseen, joten koko kasvaa noin 33 % plus hieman data-URL-etuliitteen vuoksi. Gzip- tai Brotli-pakkaus verkkopalvelimella pienentää eroa, mutta ei poista sitä.
Muuttaako tai pakkaako koodaus kuvaa?
Ei. Tiedoston tarkat tavut koodataan sellaisenaan, mukaan lukien mahdolliset metatiedot. Saadaksesi lyhyemmän merkkijonon pakkaa tai muuta kuvan kokoa ensin.
Mitä eroa on data-URL-osoitteella ja pelkällä Base64:llä?
Pelkkä Base64 on vain koodatut tavut. Data-URL lisää etuliitteen, kuten data:image/jpeg;base64, joka kertoo selaimelle, minkä tyyppinen tiedosto on, joten sitä voi käyttää suoraan kuvan lähteenä.
Onko kokorajoitusta?
Täällä voi koodata enintään 10 Mt:n tiedostoja. Hyvin pitkät merkkijonot voivat hidastaa tekstikenttiä ja muokkaajia, eivätkä näin suuret data-URL-osoitteet ole käytännöllisiä verkkosivuilla.
Tietosuoja
Koodaus ja purkaminen tapahtuvat selaimessasi. Kuvaasi ja Base64-tekstiä ei ladata, tallenneta eikä sisällytetä analytiikkaan.