Tutustuin Perishable Press -blogissa maaliskuussa 2011 julkaistuun kirjoitukseen, jossa esiteltiin idea base64-koodauksen käyttämisestä pienten kuvatiedostojen syöttämiseksi nettiselaimelle. Ideana tällaisessa kikkailussa on pyrkiä vähentämään HTTP-kyselyiden tekemistä, joka vaikuttaa käyttökokemukseen myönteisellä tavalla kun latenssi nettisivun latautumisessa kutistuu. Perishable Pressissä ehdotetaan base64-koodausta käytettäväksi kaikenlaisissa tiedostokooltaan pienissä kuvatiedostoissa, kuten favicon-kuvakkeissa.
Olen tänään ryhtynyt testaamaan miten hyvin tai miten huonosti faviconin syöttäminen sujuu, kun se on koodattu base64:ksi. Kuvake näyttää latautuvan hyvin. Ongelmia ei toistaiseksi ole ilmennyt. Olen samaa mieltä PP:n kanssa siinä, ettei pari kilotavua dataa haittaa jos sillä voi vähentää pari HTTP-pyyntöä.
Kuvatiedoston flippaaminen base64-formaattiin sujuu esimerkiksi tällä työkalulla, jolla ladataan tietokoneen kovalevyltä haluttu kuva ja sitten vain napsautetaan Convert the source data -nappia. Sen jälkeen lomakkeen yläosassa olevaan moniriviseen tekstikenttään ilmestyy sekalainen läjä kirjaimia. Merkkipötköön ei kannata tehdä itse rivinvaihtoja eikä muutenkaan koskea siihen, sillä se rikkoo kuvan. Niistä muodostuu esimerkiksi juuri favicon-kuvake. Kuvakoodin kopioimisen jälkeen se voidaan liittää nettisivun head-lohkon sisälle. Tässä on Kuopassa.netin käyttämä favicon:
<link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAo
LQ9TAAAABGdBTUEAALGPC/xhBQAAAFdQTFRF
AAAAMSMgMyUiNSYjOysnXE9MZVhVbGtrcGVicnBvdWlmgn9+
iIiIj42Mk5OTvbi3x8bG0c3N09DP
2NfX2dnZ3NrZ3t7e9PT0+vr6+/v7/f39
/v7+////wlgg4wAAAAF0Uk5TAEDm2GYAAABKSURBVBjT
Y2DAACwogHoCjJzsnExIAox8YuIiPMwIAV4paWlpCW6Eg
LC0jIy0tABCQBAoICPNjxDgAKmQZEWy
hUtUWoiNBIehAQC0NAWvE7oG1wAAAABJRU5ErkJggg==" rel="icon"
type="image/x-icon" />
Olen tehnyt ylimääräisiä rivinvaihtoja tuohon esimerkkiin, sillä rivittämättömänä se rikkoo blogin ulkoasun. Koodiesimerkissä oma base64-koodattu kuva alkaa välittömästi kohdan base64, jälkeen.
