Utilia
Kategoriat ▾
Kieli: fi ▾

Kuva–Base64-muunnin

Muunna kuva Base64:ksi tai data-URI:ksi valmiilla CSS- ja HTML-koodilla tai pura Base64 takaisin kuvaksi esikatselun kanssa. Maksuton ja yksityinen.

Kuva → Base64

Base64 → kuva

Näin muunnat kuvan Base64:ksi

  1. Pudota kohdassa Kuva → Base64 kuva pudotusalueelle tai valitse se napsauttamalla aluetta (PNG, JPEG, GIF, WebP, SVG, ICO, BMP, AVIF…).
  2. Valitse Tuloste: Data-URI (data:image/png;base64,…), Vain Base64, CSS background-image tai HTML -tagi, joka sisältää myös kuvan leveyden ja korkeuden.
  3. Napsauta Kopioi tai pitkille tuloksille Lataa .txt-tiedostona.

Pudotusalueen alla oleva rivi kertoo todellisen muodon (luettuna tiedoston tavuista, ei nimestä), mitat, tiedostokoon ja data-URI:n pituuden.

Näin puret Base64:n takaisin kuvaksi

  1. Liitä kohdassa Base64 → kuva teksti kenttään Base64-teksti tai data-URI. Voit liittää pelkän Base64-merkkijonon, kokonaisen data-URI:n tai jopa kokonaisen CSS-säännön tai <img>-tagin: data-URI löytyy sen sisältä. Rivinvaihdot ja välilyönnit ohitetaan, ja myös URL-turvallinen Base64 (jossa on - ja _) toimii.
  2. Napsauta Pura kuva. Esikatselu, tyyppi, mitat ja koko ilmestyvät näkyviin.
  3. Napsauta Lataa kuva, niin se tallentuu oikealla tiedostopäätteellä.

Tyyppi tarkistetaan tiedoston ”taikatavuista”, eli jokaisen kuvamuodon alussa olevasta tunnisteesta (esimerkiksi 89 50 4E 47 PNG:lle tai FF D8 FF JPEG:lle). Jos data-URI väittää olevansa image/jpeg mutta sisältää PNG:n, työkalu kertoo siitä ja käyttää todellista tyyppiä. Mitä tahansa muuta kuin tunnistettua kuvaa ei hyväksytä, ja raja on 20 Mt kuvadataa.

Näin Base64 toimii

Base64 muuttaa tiedoston jokaiset 3 tavua 4 tulostettavaksi merkiksi, jotka otetaan joukosta A–Z, a–z, 0–9, + ja /. Lopussa täytteenä käytetään merkkiä =. Siksi koodattu teksti on noin 33 % suurempi kuin tiedosto: 30 kt:n kuvakkeesta tulee noin 40 kt tekstiä. Data-URI lisää lyhyen otsikon, data:<tyyppi>;base64,, jotta selain tietää, miten se luetaan.

Milloin kuvat kannattaa upottaa data-URI:na

Data-URI:t ovat kätevä ratkaisu seuraaviin:

  • pienet kuvakkeet, logot ja taustat CSS:ssä, jolloin säästät yhden pyynnön;
  • HTML-sähköpostit ja yhden tiedoston HTML-dokumentit, joiden täytyy toimia ilman ulkoisia tiedostoja;
  • JSON-rajapinnat ja asetustiedostot, jotka voivat kantaa vain tekstiä.

Ne sopivat huonosti suurille valokuville. Teksti on kolmanneksen suurempi kuin tiedosto, sitä ei voi välimuistittaa erikseen sivusta tai tyylitiedostosta, joka sen sisältää, ja se hidastaa renderöintiä. Noin 10–100 kt:n jälkeen tavallinen kuvatiedosto hyvällä välimuistituksella on yleensä parempi, minkä vuoksi työkalu näyttää muistutuksen yli 100 kt:n kuville.

Kaikki tapahtuu selaimessasi: kuvia ja liitettyä tekstiä ei lähetetä palvelimelle.

Usein kysytyt kysymykset

Onko Base64 tapa pakata tai suojata kuva?

Ei. Base64 kasvattaa dataa noin 33 % ja kuka tahansa voi purkaa sen. Se vain muuttaa binääridatan tekstiksi, joka kulkee paikoissa, joissa binääridata ei kulje.

Miksi data-URI ei näy?

Yleisimpiä syitä ovat puuttuva tai väärä tyyppi otsikossa, merkkijonon keskelle liitetyt välilyönnit tai lainausmerkit tai katkennut teksti. Liitä se kohtaan Base64 → kuva: työkalu ilmoittaa virheelliset merkit ja tarkistaa todellisen tyypin.

Voinko käyttää SVG:tä data-URI:na?

Kyllä. SVG voidaan Base64-koodata kuten mikä tahansa kuva. SVG:lle URL-koodattu data-URI (data:image/svg+xml,%3Csvg…) on usein lyhyempi, ja tämä työkalu purkaa molemmat muodot.

Toimiiko se HEIC- tai AVIF-kuvien kanssa?

Koodaus toimii minkä tahansa kuvatiedoston kanssa. Esikatselu näkyy vain, jos selaimesi osaa näyttää muodon, mutta Base64-teksti ja lataus ovat aina oikein.

Onko kokorajaa?

On, 20 Mt kuvadataa kumpaankin suuntaan. Suuremmat merkkijonot hidastavat selaimia, eikä niitä juuri koskaan kannata käyttää verkkosivulla.

Aiheeseen liittyvät työkalut