Base64-kuvan purkaja | Pura ja esikatsele kuvia verkossa

Mikä on base64-kuvan dekooderi?

Base64-kuvan dekooderi on työkalu, joka muuntaa base64-koodatun tekstimerkkijonon takaisin kuvaksi. Base64 on tapa esittää binääridataa, kuten kuvatiedoston tavuja, käyttämällä vain 64 tavallisen tekstin merkkiä (kirjaimia, numeroita, merkkejä + ja / sekä täytteenä merkkiä =). Selaimet, sähköpostit ja monet ohjelmointirajapinnat tallentavat kuvia tällä tavalla, jotta kuva voi kulkea tavallisessa tekstissä erillisen tiedoston sijaan. Dekooderi tekee tämän prosessin käänteisesti: merkkijono liitetään kenttään, ja alkuperäinen kuva tulee näkyviin.

Data-URL-muoto

Verkossa base64-kuva esitetään yleensä data-URL-osoitteena. Rakenne on seuraava:

Esimerkiksi:

Jokaisella osalla on oma tehtävänsä:

• data: merkitsee sen data-URL-osoitteeksi, ei tavalliseksi verkko-osoitteeksi.
• image/png on MIME-tyyppi, joka kertoo selaimelle, millainen tiedosto on kyseessä.
• ;base64 kertoo, että pilkun jälkeinen data on base64-koodattu.
• Kaikki pilkun jälkeinen on itse koodattu kuva.

Miten dekooderi toimii

Dekoodaus tapahtuu neljässä vaiheessa.

1. Työkalu tarkistaa, alkaako merkkijono tunnisteella data:. Data-URL-osoite, joka ilmoittaa kuvan sijaan jonkin muun mediatyypin, kuten data:text/plain, hylätään heti, koska sitä ei voi näyttää kuvana.
2. Työkalu poistaa kaikki välilyönnit, sarkaimet ja rivinvaihdot, koska pitkät base64-merkkijonot saatetaan jakaa usealle riville. Jos sisältö käyttää base64:n sijaan prosenttikoodausta, jonka RFC 2397 myös sallii, se välitetään muuttumattomana.
3. Se purkaa base64-tekstin takaisin raakatavuiksi.
4. Se tarkastelee tuloksen ensimmäisiä tavuja. Jokainen yleinen kuvamuoto alkaa kiinteällä tavujaksolla, jota kutsutaan tunnisteeksi tai ”taikaluvuksi”. PNG-tiedostot alkavat jaksolla 89 50 4E 47 ja JPEG-tiedostot jaksolla FF D8 FF. Dekooderi vertaa näitä tunnisteita ja määrittää kuvalle niiden ilmaiseman tyypin.

Tavujen sisältö ratkaisee, ei tunniste. Jos data-URL-osoite ilmoittaa data:image/png, mutta tavut alkavat jaksolla FF D8 FF, dekooderi muodostaa URL-osoitteen uudelleen muotoon data:image/jpeg. Näin ”Kopioi kuvan URL” -painikkeen tarjoama merkkijono ei koskaan kuvaa sisältöään väärin.

Jos merkkijonossa ei ole etuliitettä data:, dekooderi käsittelee sitä raakana base64-datana, purkaa sen ja lukee tunnisteen samalla tavalla. Jos tavut eivät vastaa mitään tunnettua kuvatunnistetta eivätkä näytä SVG-tekstiltä, dekooderi ilmoittaa, ettei merkkijono vaikuta kuvalta. Se ei arvaa muotoa eikä käytä oletustyyppiä.

SVG käsitellään eri tavalla, koska se on tekstimuoto (XML), ei binäärimuoto, joten sillä ei ole kiinteää tavutunnistetta. Dekooderi tarkistaa dekoodatun tekstin ensimmäiset 1024 tavua ja etsii niistä tunnistetta <svg, XML-määritystä, kuten <?xml version="1.0"?>, jota seuraa tällainen tunniste, tai SVG-dokumenttityyppimääritystä, jota seuraa tällainen tunniste. Aivan alussa oleva tavujärjestysmerkki, jonka jotkin muokkaimet lisäävät UTF-8-tiedostoihin, jätetään huomiotta. Koska SVG:tä ei voi tunnistaa tavutunnisteesta, tyypin image/svg+xml ilmoittava data-URL-osoite säilyttää ilmoitetun tyypin.

Base64-kuvan kokokaava

Base64 muuntaa aina 3 tavua binääridataa 4 tekstimerkiksi. Koodatun sisällön pituus lasketaan seuraavasti:

Merkit ⌈ ⌉ tarkoittavat pyöristämistä seuraavaan kokonaislukuun, koska base64 toimii aina 4 merkin ryhmissä ja täyttää vajaaksi jääneen ryhmän merkeillä =.

Suurten tiedostojen koko kasvaa tällä tavoin noin 33 %, koska 4 ÷ 3 ≈ 1,33. Pienissä tiedostoissa prosentuaalinen kasvu voi olla suurempi, koska pyöristäminen seuraavaan 4 merkin ryhmään vaikuttaa enemmän, kun dataa on alun perin vähän.

Laskuesimerkki

Edellä oleva PNG-esimerkki purkautuu 85 tavuksi kuvadataa. Kaavaa käyttäen:

Base64-merkkijono on tosiaan 116 merkkiä pitkä, mikä täsmää laskelmaan. Se on 36 % enemmän kuin alkuperäiset 85 tavua (116 ÷ 85 ≈ 1,36), hieman enemmän kuin 33 %, koska tiedosto on niin pieni.

Tuetut kuvamuodot

Dekooderi tunnistaa muodon dekoodatun datan tavutunnisteesta. Se tunnistaa seuraavat tyypit:

Base64-kuvan dekoodaaminen

1. Kopioi base64-merkkijono HTML:stä, CSS:stä, ohjelmointirajapinnan vastauksesta tai sähköpostista joko etuliitteineen data:image/... tai ilman sitä.
2. Liitä se syöttökenttään.
3. Kuva dekoodataan automaattisesti hetken kuluttua kirjoittamisen lopettamisesta tai dekoodauspainiketta painamalla.
4. Dekoodattu kuva tulee näkyviin esikatselualueelle. Sen data-URL-osoitteen voi kopioida ”Kopioi kuvan URL” -painikkeella, ja itse kuvan voi tallentaa napsauttamalla sitä esikatselussa hiiren kakkospainikkeella ja valitsemalla kuvan tallennuksen, koska selain näyttää sen tavallisena kuvaelementtinä.

Base64-kuvien yleisiä käyttötapoja

• Upottaminen HTML:ään, CSS:ään tai JavaScriptiin: kuvadatan sijoittaminen suoraan koodiin välttää erillisen tiedostopyynnön.
• Sähköpostipohjat: jotkin sähköpostiohjelmat estävät ulkoisesti linkitetyt kuvat oletusarvoisesti, mutta upotettu base64-kuva näkyy silti.
• Yksitiedostoiset HTML-työkalut: kokonainen sivu kuvat mukaan lukien voidaan toimittaa yhtenä itsenäisenä tiedostona.
• Ohjelmointirajapintojen vastaukset: kuva voidaan sisällyttää JSON-hyötykuormaan ilman omaa päätepistettä.
• CSS-taustat ja kuvakkeet: pienet kuvakkeet kirjoitetaan joskus suoraan tyylitiedostoon data-URL-osoitteena.

Base64-kuvien kompromissit

Base64-koodaus on kätevää, mutta sillä on hintansa:

• Koodattu teksti on noin kolmanneksen alkuperäistä tiedostoa suurempi.
• Selaimet eivät voi tallentaa upotettua kuvaa välimuistiin samalla tavalla kuin linkitettyä tiedostoa, joten kuva ladataan uudelleen aina, kun ympäröivä sivu tai tyylitiedosto ladataan.
• Selaimen on purettava base64-teksti ennen kuin se voi näyttää kuvan, mikä vaatii hieman ylimääräistä käsittelyä.
• Koon kasvun ja välimuistin puuttumisen vuoksi base64-upotus sopii pienille kuville, kuten kuvakkeille ja yksinkertaisille logoille. Suuret valokuvat kannattaa yleensä tarjota tavallisina kuvatiedostoina.

Usein kysyttyä

Mikä on base64-kuvan dekooderi?

Se on työkalu, joka muuntaa base64-koodatun tekstimerkkijonon takaisin katseltavaksi kuvaksi, kuten PNG-, JPEG-, GIF-, WebP-, BMP- tai SVG-tiedostoksi.

Miten base64-kuva dekoodataan?

Liitä base64-merkkijono dekooderiin joko etuliitteineen data:image/... tai ilman sitä. Dekooderi lukee ja purkaa merkkijonon ja näyttää tuloksena olevan kuvan.

Voiko base64-merkkijonon dekoodata ilman data-URL-etuliitettä?

Kyllä. Dekooderi käsittelee sitä raakana base64-datana, purkaa tavut ja tunnistaa muodon tavutunnisteen perusteella, kuten PNG:n, JPEG:n, GIF:n, WebP:n, BMP:n tai ICO:n. SVG tunnistetaan etsimällä dekoodatusta tekstistä tunnistetta <svg. Jos mikään näistä ei täsmää, dekooderi ilmoittaa, ettei merkkijono vaikuta kuvalta, sen sijaan että se arvaisi muodon.

Miksi base64-kuvani ei purkaudu?

Useimmat tapaukset johtuvat kolmesta syystä. Merkkijono voi sisältää merkkejä standardin base64-aakkoston ulkopuolelta, johon kuuluvat A–Z, a–z, 0–9, +, / ja =; joissakin verkkotunnisteissa käytetty base64url-muunnelma käyttää niiden sijaan merkkejä - ja _, eikä sitä hyväksytä. Merkkijono on voitu katkaista kesken, jolloin sen pituudeksi jää neljällä jaollinen luku plus yksi, mikä ei koskaan ole kelvollisen base64-merkkijonon pituus. Tai tavut eivät yksinkertaisesti kuulu tuettuun kuvatyyppiin. Puuttuva täyte = ei yksinään aiheuta ongelmaa, ja välilyönnit sekä rivinvaihdot poistetaan ennen dekoodausta.

Onko base64-koodaus tietoturvaa tai salausta?

Ei. Base64 on vain tapa esittää tavut tekstinä; se ei piilota mitään. Kuka tahansa voi purkaa base64-merkkijonon sekunneissa ilmaisella työkalulla, joten sitä ei pidä koskaan käyttää yksityisten kuvien tai muun datan suojaamiseen.

Kuinka paljon base64-merkkijono on alkuperäistä kuvaa suurempi?

Suurissa tiedostoissa noin kolmanneksen, koska jokaista 3 alkuperäisen datan tavua kohti syntyy 4 tekstimerkkiä. 100 kilotavun kuva on koodattuna noin 133 kilotavua. Pienissä kuvissa prosentuaalinen kasvu voi olla hieman suurempi pyöristyksen vuoksi.

Historia

Base64 kehittyi koodausmenetelmistä, jotka rakennettiin 1970- ja 1980-luvuilla lähettämään binääridataa vain tavallista tekstiä käsittelevien postijärjestelmien kautta. Sähköpostia varten se virallistettiin RFC-standardissa 989 (1987) ja myöhemmin RFC-standardissa 1421. Kuvien upottaminen verkkosivuille tuli mahdolliseksi, kun data:-URL-malli määriteltiin RFC-standardissa 2397 (1998). Se yleistyi 2000-luvun puolivälissä, kun kehittäjät etsivät tapoja vähentää erillisiä HTTP-pyyntöjä erityisesti hitaissa mobiiliyhteyksissä.

Viitteet

1. RFC 4648: Base16-, Base32- ja Base64-datakoodaukset
2. RFC 2397: ”data”-URL-malli
3. MDN Web Docs: data-URL-osoitteet
4. WHATWG:n MIME-tyyppien tunnistusstandardi