Kuvien muuntaminen Base64-muotoon ja takaisin
Base64-kuvamuunnin on työkalu, joka muuntaa kuvatiedostot tekstipohjaiseen Base64-muotoon tai palauttaa Base64-tekstin takaisin alkuperäiseksi kuvatiedostoksi. Enkoodauksessa eli koodauksessa kuvan binääridata muunnetaan ASCII-merkeiksi, jolloin kuva voidaan upottaa suoraan verkkosivun koodiin ilman erillistä kuvatiedostoa. Dekoodauksessa eli purkamisessa tekstimuotoinen Base64-merkkijono tai data-URI käännetään takaisin kuvaksi, jonka voi esikatsella ja ladata.
Työkalu suorittaa kaikki muunnosprosessit paikallisesti käyttäjän laitteella. Kuvasi luetaan ja muunnetaan selaimessasi, eikä mitään ladata BroBroGo-palveluun.
Tuetut tiedostomuodot ja tekniset rajoitukset
Muunnosprosessi tukee useita yleisiä kuvatiedostomuotoja sekä sisään- että ulosmenossa. Työkalu ei muokkaa kuvan alkuperäistä dataa: se ainoastaan enkoodaa tai palauttaa kuvan alkuperäiset tavut, eikä se kompressoi, rajaa, muuta kuvan kokoa tai muunna kuvaa toiseen tiedostomuotoon, kuten PNG- tai JPG-muotoon.
Enkoodaus (Kuva → Base64)
Kun muunnat kuvatiedostoa tekstiksi, voit valita tiedoston laitteeltasi tai vetää ja pudottaa sen suoraan käyttöliittymään.
- Tuetut tiedostomuodot: PNG, JPG, GIF, WebP, SVG, AVIF, BMP, ICO ja TIFF.
- Maksimikoko: Enkoodattavan kuvatiedoston enimmäiskoko on 5 MB.
- Useamman tiedoston käsittely: Jos pudotat työkaluun useita kuvia kerralla, vain ensimmäistä kuvaa käytetään.
Dekoodaus (Base64 → Kuva)
Kun muunnat tekstiä kuvaksi, voit liittää syötteeksi joko täydellisen data:image/... -alkuisen URI-osoitteen tai pelkän raa'an Base64-merkkijonon.
- Syötteen vaatimukset: Työkalu hyväksyy standardin sekä URL-turvallisen (URL-safe) Base64-muodon. Syöte voi sisältää myös välilyöntejä ja rivinvaihtoja.
- Maksimipituus: Dekoodattavan tekstisyötteen enimmäispituus on 8 MB.
- Tiedostotyypin tunnistus: Työkalu tunnistaa kuvatyypin automaattisesti dekoodauksen yhteydessä.
Base64-enkoodauksen hyödyt ja haitat verkkokehityksessä
Base64-koodauksen ja data-URI-skeeman käyttöön liittyy verkkosivujen optimoinnissa sekä etuja että rajoituksia, jotka vaikuttavat sivuston suorituskykyyn.
Edut pienten kuvien kohdalla
Kun kuva muunnetaan data-URI-muotoon, se voidaan sijoittaa suoraan HTML-dokumentin <img>-tagiin tai CSS-tyylitiedoston background-image-ominaisuuteen. Tämä säästää HTTP-pyyntöjä, sillä selain saa kuvan datan samassa tiedostossa itse koodin kanssa. Menetelmä on hyödyllinen erityisesti pienten kuvakkeiden, logojen ja sähköpostipohjien kohdalla, joissa ulkoisten kuvatiedostojen lataaminen halutaan välttää.
Haitat suurten kuvien kohdalla
Base64-enkoodaus kasvattaa datan kokoa noin kolmanneksella (noin 33 %) verrattuna alkuperäiseen binääritiedostoon. Suurten kuvien kohdalla tämä kasvattaa HTML- tai CSS-tiedostojen kokoa merkittävästi, mikä hidastaa sivun ensimmäistä latauskertaa. Lisäksi koodiin upotettuja kuvia ei voida välimuistittaa erillisinä kuvatiedostoina selaimessa, jolloin kuva ladataan uudelleen jokaisen sivulatauksen yhteydessä osana koodia.
Työkalun käyttöliittymä ja tulostemuodot
Käyttöliittymässä on kaksi päätoimintoa, joiden välillä voi siirtyä valitsemalla halutun suunnan kohdasta "Muunnan suunta":
-
Kuva → Base64: Kun kuva on ladattu onnistuneesti, työkalu näyttää ilmoituksen "Base64 valmis – kopioi se alta.". Tuloste-osion yläpuolella on teksti "Tuloste", ja tulosteen voi kopioida seuraavissa muodoissa:
- Data-URI: Kuva tekstimuodossa, joka on valmis sijoitettavaksi suoraan HTML- tai CSS-koodiin.
- Base64: Raka Base64-merkkijono ilman muotoiluja.
- CSS: Valmiiksi muotoiltu CSS-taustakuvaominaisuus (
background-image). - HTML: Valmis HTML-koodin
<img>-tagi. - Tilastotiedot: Työkalu näyttää tulosteen pituuden merkkimääränä kohdassa "Tulosteen pituus" sekä kuvan mitat kohdassa "Kuvan koko".
-
Base64 → Kuva: Kun liität tekstin kenttään "Base64 tai data-URI", työkalu näyttää ilmoituksen "Kuva dekoodattu.". Voit tarkastella kuvaa ja ladata sen laitteellesi painikkeella "Lataa kuva". Ladatun tiedoston nimeksi tulee
brobrogo-kuvavarustettuna tunnistetulla tiedostopäätteellä.
Virhetilanteet ja niiden ratkaiseminen
Jos muunnos ei onnistu, työkalu näyttää jonkin seuraavista virheilmoituksista:
- Kyseistä tiedostomuotoa ei tueta. – Tämä ilmoitus tulee, jos yrität ladata tiedoston, joka ei ole tuettu kuvamuoto.
- Kuva on suurempi kuin sallittu
{max}. Kokeile pienempää kuvaa. – Ilmoitus näytetään, jos ladattavan kuvan koko ylittää 5 MB rajan. - Tiedoston lukeminen epäonnistui. – Virhe tapahtuu, jos selain ei pysty lukemaan valittua tiedostoa.
- Tämä ei ole kelvollista Base64-koodia. – Ilmoitus tulee dekoodaustilassa, jos liitetty teksti sisältää merkkejä, jotka eivät kuulu Base64-merkistöön.
- Tämä Base64-koodi ei dekoodaudu tunnistettavaksi kuvaksi. – Virhe näytetään, jos teksti on teknisesti oikeaa Base64-koodia, mutta sen sisältämä data ei muodosta tunnettua kuvatiedostoa.
- Syöte on liian pitkä. Pituuden on oltava alle
{max}merkkiä. – Ilmoitus tulee, jos dekoodattava teksti ylittää 8 MB kokorajoituksen. - Kuvadata dekoodattiin, mutta sitä ei voitu näyttää. – Tämä virhe ilmenee, jos Base64-merkkijonon purkaminen onnistuu, mutta selain ei kykene renderöimään kyseistä kuvadataa näytölle.
Usein kysytyt kysymykset (FAQ)
Mikä on Base64 data-URI -kuva?
Se on tekstimuotoon enkoodattu kuva, joka voidaan sijoittaa suoraan HTML- tai CSS-koodiin erillisen tiedostolatauksen sijaan. Tämä säästää yhden HTTP-pyynnön, mikä on hyödyllistä pienten kuvakkeiden ja sähköpostipohjien kohdalla.
Kannattaako suuret kuvat upottaa koodiin tällä tavalla?
Sitä ei suositella. Base64 kasvattaa tiedostokokoa noin kolmanneksella, eikä sitä voi välimuistittaa erillään sivusta. Siksi se kannattaa varata vain pienille elementeille ja linkittää suuret kuvat normaaleina tiedostoina.
Voiko Base64-merkkijonon muuttaa takaisin tiedostoksi?
Kyllä. Siirry Base64 → Kuva -tilaan ja liitä data-URI tai pelkkä Base64-merkkijono. Työkalu tunnistaa kuvatyypin, näyttää esikatselun ja antaa ladata tiedoston.
Lähetetäänkö kuviani tai tietojani ulkopuolisille palvelimille?
Ei. Kaikki kuvien lukeminen ja muuntaminen tapahtuu kokonaan omassa selaimessasi. Mitään tiedostoja tai tekstijonoja ei ladata BroBroGo-palveluun, joten tietosi pysyvät omalla laitteellasi.