Kuva Base64:ksi
Muunna kuvat Base64 Data URI -muotoon heti
Syöte
Napsauta ladataksesi kuvan
JPG, PNG, GIF, WebP, SVG (enint. 5 Mt)Tulos
Esimerkkejä Kuva Base64:ksi
Lataa kuva saadaksesi Data URI:n. Tulostemuoto on data:image/<type>;base64,<base64-merkkijono>. Esimerkki pienimmästä 1×1 pikselin PNG:stä:
Esimerkki Data URI -tulosteesta
Lataa yllä kuva luodaksesi oman Data URI:si.
Mikä on Kuva Base64:ksi?
Kuva Base64:ksi muuntaa kuvatiedostot Base64-koodatuiksi Data URI -osoitteiksi. Base64 on määritelty RFC 4648 -standardissa ja mahdollistaa binaaridatan esittämisen ASCII-tekstinä. Data URI:t (esim. data:image/png;base64,iVBORw0KGgo...) mahdollistavat kuvien upottamisen suoraan HTML:ään, CSS:ään tai JSONiin ilman erillisiä tiedostoja—hyödyllistä pienille kuvakkeille ja kun kuvadata täytyy välittää vain tekstipohjaisten rajapintojen kautta.
Työkalu käyttää selaimen FileReader-rajapintaa kuvan lukemiseen ja muuntaa sen Base64:ksi. Käsittely tapahtuu kokonaan selaimessasi—mitään ei lähetetä palvelimelle. Tuetut muodot: JPG, PNG, GIF, WebP ja SVG. Base64:n purkamiseksi takaisin näkyväksi kuvaksi käytä Base64 kuvaksi.
Miten työkalua käytetään
Lataa kuva
Napsauta latausaluetta tai käytä Lataa valitaksesi kuvatiedoston. Tuetut muodot: JPG, PNG, GIF, WebP, SVG (enint. 5 Mt). Vasen paneeli näyttää esikatselun.
Hanki Base64-tulos
Oikea paneeli päivittyy automaattisesti koko Data URI:lla. Voit kopioida sen ja liittää suoraan HTML <img src="..."> tai CSS background-image: url(...) -kohtaan. Muoto on data:image/png;base64, ja sen jälkeen Base64-merkkijono.
Kopioi tai lataa
Käytä Kopioi asettaaksesi Data URI:n leikepöydälle tai Lataa tallentaaksesi sen .txt-tiedostona. Minkä tahansa tiedoston (ei vain kuvia) koodaamiseen Base64:ksi käytä Base64-kooderia. Base64-kuvamerkkijonon katseluun käytä Base64 kuvaksi.
Miten se toimii
Työkalu lukee kuvatiedoston binääridatana FileReader.readAsDataURL() -kutsulla, joka palauttaa Data URI:n. Data URI -muoto on kuvattu RFC 2397 -standardissa ja sitä tukevat kaikki modernit selaimet. Base64-kasvattaa kokoa noin 33 %, joten 100 kt kuvasta tulee koodattuna noin 133 kt.
HTML-upotuksessa käytä <img src="data:image/png;base64,..." alt="...">. CSS:ssä background-image: url('data:image/png;base64,...'). JSON-rajapinnoissa, jotka odottavat Base64-kuvamerkkijonoja, voit käyttää raakaa Base64-osaa (ilman data:image/...;base64, -etuliitettä), jos rajapinta niin määrittelee.
Missä Kuva Base64:ksi auttaa
Web-kehittäjät käyttävät Base64-kuvia pieniin kuvakkeisiin, logoihin tai spriteihin välttääkseen ylimääräisiä HTTP-pyyntöjä. Sähköpostin HTML upottaa usein kuvia Base64:nä, jotta ne näkyvät asiakasohjelmissa, jotka estävät ulkoiset kuvat. Canvas- tai PDF-generointi voi vaatia Base64-kuvasyötettä. Rajapinnat, jotka hyväksyvät profiili- tai tuotekuvia, odottavat joskus Base64-merkkijonoja pyynnön rungossa.
Single-page -sovellukset paketoivat joskus pieniä kuvia Base64:nä vähentääkseen resurssien määrää. Base64-kuvan purkamiseksi takaisin tiedostoksi käytä Base64 kuvaksi. Minkä tahansa tekstin tai tiedoston (ei vain kuvia) koodaamiseen käytä Base64-kooderia. Yleiseen Base64-purkamiseen Base64-purkajaa.
Usein kysyttyä
Onko datani yksityinen?
Kyllä. Muunnos tapahtuu kokonaan selaimessasi. Mitään ei lähetetä palvelimelle. Voit varmistaa tämän avaamalla selaimen Verkko-välilehden työkalua käyttäessäsi.
Mikä on kokoraja?
Työkalu rajoittaa lataukset 5 Mt:iin. Base64 lisää noin 33 % ylimääräistä, joten 5 Mt:n kuvasta tulee noin 6,7 Mt tekstiä. Hyvin suuret kuvat voivat hidastaa selainta tai aiheuttaa muistiongelmia.
Voinko käyttää tulosta HTML/CSS:ssä?
Kyllä. Tulos on Data URI, joka on valmis <img src="..."> tai background-image: url(...) -käyttöön. Kopioi ja liitä suoraan.
Tukeeko se SVG:ää?
Kyllä. SVG on tuettu. SVG-tiedostot ovat tekstipohjaisia, joten Base64 toimii mutta kasvattaa kokoa. SVG:lle inline-upotus (ilman Base64:ää) on usein tehokkaampi kun se on mahdollista. Käytä Base64-purkajaa purkaaksesi Base64:n takaisin alkuperäiseen SVG:hen.
Miksi Base64 tavallisen kuva-URL:n sijaan?
Base64 upottaa kuvan dokumenttiin, joten ylimääräistä HTTP-pyyntöä ei tarvita. Pienille kuvakkeille tai kriittisille yläosan kuville tämä voi parantaa latausaikaa. Suuremmille kuville ulkoiset tiedostot välimuistilla ovat yleensä parempi vaihtoehto.
Liittyvät työkalut
Base64-määrittely: RFC 4648. MDN:n Data URI -oppaat kertovat upotuksesta.