Virikkeitä ja ohjeita askarteluun.
JIM-kanavan Tuuma-nikkarointiohjelmassa tehtiin eilen pelituoli: Ensin kasasivat puusta kehikon, sitten heittivät sinne uretaanilla täytetyn jätesäkin ja lopuksi äijä painoi perseellään siihen kuopan.
Tämä oikeastaan tiivistää sen, mitä Suomessa ajatellaan pelaamisesta.
[Kuva: Tuuma, jakso 8 – Pelituoli (PDF)]
Liian usein nettisivuilla näkee hyviä kuvia, jotka ovat suttuisia, pikselöityneitä tai muuten vaan huonosti pakattuja. Ongelma ei koske pelkästään aloittelevia nettikirjoittajia, vaan jopa pitkän linjan ammattilaisilla tuntuu olevan vaikeuksia valita sopiva esitystapa kuvilleen. Tässä artikkelissa käyn helppotajuisesti läpi monia askarruttavien tiedostomuotojen (jpg, gif, png ym.) erot, niin että saat sataprosenttisen hyödyn verkkojulkaisustasi.
Nyrkkisääntö: valokuvat jpg-muodossa, teksti png-muodossa.
Jpg lienee tätä nykyä tunnetuin kuvanpakkausmuoto. Silti tai juuri siksi sitä näkee käytettävän väärin tavattoman usein. Virhetilanteita syntyy silloin, kun tekstiä tai muuta teräviä linjoja vaativaa grafiikkaa yritetään tallentaa jpg-muodossa. Tässä muutama esimerkki, joihin olen urani varrella törmännyt:
Katsokaa kahta ensimmäistä kuvaa. Niiden taustojen pitäisi olla kauttaaltaan yksivärisiä. Niissä näkyy kuitenkin omituisia möykkyjä, ns. artifakteja, jotka sotkevat yleisvaikutelman. Artifaktit ovat syntyneet jpg-pakkauksessa, joka ei ole kyennyt käsittelemään väritasoa halutulla tavalla.
Viimeinen on taasen ruutukaappaus, joka on epähuomiossa tallennettu jpg-muotoon. Sen jälkeen kuvaa on vielä venytetty verkkosivun palstaa varten. Tulos näyttää suttuiselta ja sumealta.
Katsotaanpa nyt miltä samat kuvat näyttävät png-muodossa:
Ero on silminnähtävä. Png ei hukkaa tietoa jpg-tallennuksen tavoin, vaan kokonaisuus säilyy eheänä ja sitä voi myös jälkikäsitellä helpommin. Kyseessä on ns. häviötön pakkausmuoto.
Sivujen käytettävyys paranee, kun kuvat on hyvin pakattu
Png-formaatti ei kuitenkaan ole aina käytettävyyden kannalta paras vaihtoehto. Koska se säilyttää kuvien rakenteen jpg-muotoa eheämpänä, on myös kuvien fyysinen koko suurempi. Esimerkiksi png-muodossa tallennettu valokuva voi viedä moninkertaisesti enemmän kiintolevytilaa jpg:hen verrattuna. Myöskään eräät vanhentuneet nettiselaimet eivät välttämättä osaa näyttää Png-kuvia lainkaan.
Yläpuolella näkyvistä kuvista vasen on tallennettu png- ja oikea jpg-muodossa. Kuvissa ei ole selkeitä silminnähtäviä eroja, mutta niiden koossa on. Jpg vie ainoastaan 34 kilotavua, siinä missä png vaatii 273 kiloa – siis kahdeksankertaisen määrän. Kun pidät kuvasi pienikokoisina, verkkosivut latautuvat nopeasti ja niitä on miellyttävämpää selata.
Valokuvien lisäksi jpg sopii myös moniin muihin kuvatyyppeihin. Esimerkiksi tietokone- ja videopeleistä sekä elokuvista otetut ruutukaappaukset voi aivan hyvin tallentaa jpg-muodossa. Toisaalta, jos ruutukaappauksessa on esim. pientä tekstiä yms., on syytä valita png.
Lyhyesti: Tallenna valokuvasi ja muut värikkäät otokset jpg-muodossa, ja tekstit sekä ruutukaappauset png-muodossa. Muuta sinun ei välttämättä tarvitse kuvaformaateista tietää!
Mitä muuta?
Png ja jpg ovat ehdottomasti käyttökelpoisimmat kuvaformaatit verkkojulkaisua ajatellen. Monet tuntevat myös Compuserven kehittämän gif-tiedostomuodon, joka on tullut tutuksi etenkin gif-animaatioiden muodossa. Nykyisin gif alkaa olla jo hiukan vanhentunut tallennustapa, joten ellei aio tehdä gif-animaatiota, on syytä valita giffin sijaan png-muoto.
Jos taas halutaan julkaista kuva, joka on kokonaan tai osittain läpinäkyvä, kannattaa suosia png-muotoa. Tuolloin tulee kuitenkin muistaa, että esimerkiksi Microsoftin parjattu Internet Explorer -verkkoselain ei osaa näyttää kuvaa sen oikeassa muodossa. Niinpä muun muassa kulmien pyöristykset, taustan häivytys jaa muu kikkailu jää kokonaan näkemättä vanhojen selainten käyttäjiltä.
Toimittajaurallani olen törmännyt myös tapauksiin, jossa verkossa on julkaistu bmp-, xfc- tai psd-muotoisia kuvia. Sitä tulisi välttää, sillä kaikki selaimet eivät osaa kyseisiä kuvatyyppejä näyttää ja toisekseen pakkaamattomien kuvien lataaminen tekee sivustosta tuskastuttavan hitaan. Oikeiden kuvien valinnalla verkkojulkaisusi toimii sujuvasti ja antaa lukijoille ammattitaitoisen kuvan sen tekijöistä. Yksi kuva vastaa tuhatta sanaa – niin hyvässä kuin pahassa.
Web-standardien noudattaminen ei ole helppoa. Etenkin kun kaikki kotisivuille lisättävät ilmaiskikkareet tuntuvat rikkovan koodin niin pahasti, että validaattorista kuuluu vain tuskaista parahtelua. Ehkä paras esimerkki on Flickr-kuvapalvelun Badge, eli minikokoinen kuvagalleria, jollaisia näkyy melko monen blogin sivupalkissa.
Valitettavasti Flickr Badge ei pahemmin kuria kumarra, vaan on rehellisesti päin honkia kirjoitettu koodinpätkä. Esimerkiksi feldon.netin XHTML Strict -standardiin sovittaminen vaati hieman ihmettelyä ja monta epäonnistunutta yritystä. Säästääkseni teidän vaivaanne kirjoitin lyhyen oppaan, jolla Flickr Badge rupeaa futaamaan krantummassakin ympäristössä – ja vieläpä web-standardeja noudattaen!
Tämä ohje on tehty Flickr Badgen HTML-versiota varten. Olisi hyvä jos sinulta löytyisi jo valmiiksi Flickr-tili. Jos blogistasi löytyy jo Flickr Badge, sinun täytyy tehdä muutoksia ainoastaan Flickr Badgen koodiin ja sivustosi css-tyylitiedostoon. Jos et ole vielä uskaltanut tehdä omaa Badgea, voit ladata tekemäni valmiit tiedostot suoraan artikkelin lopusta ja liittää ne blogiisi.
1. Jos sivuillasi on jo Flickr Badge, avaa ensin tekstieditoriin se tiedosto, josta Badgen koodi löytyy. Tunnistat sen parhaiten “Start of Flickr Badge” -tägistä, sikäli mikäli olet jättänyt sen ennalleen. Flickrin tarjoama alkuperäinen koodi näyttää tältä:
2. Kuten näkyy, alkuperäinen Flickr Badge on melkoinen merkkisoppa. Seuraavaksi sinun olisi löydettävä merkistön joukosta toimintoskripti, jonka tunnistat script-tägistä. Poista muu roska ja jätä script-tägit ja niiden välinen teksti ennalleen. Tuloksen pitäisi näyttää suunnilleen tältä, tosin sillä erotuksella, että käyttäjätunnuksen kohdalla lukee todennäköisesti jotain muuta.
3. Edelleen messissä? Loistavaa! Vaikein on takana. Seuraavaksi lisäät tekstieditorissa scriptin alkuun ja loppuun div-tägit, jolloin Flickr Badgelle voi määrittää omat tyyliasetukset CSS-tiedostossa. Sinun ei varsinaisesti tarvitse tietää mitä kaikki tämä tarkoittaa, riittää että Flickr Badgen koodi näyttää suunnilleen tältä:
4. Seuraavaksi käydään css-tiedoston kimppuun. Avaa tekstieditorilla tyylitiedostosi ja lisää seuraavat rimpsut koodin loppuun:
Yllä siis määritellään varsinaisen kuva-alueen koko. Kuva-alue on se tila, jossa haluat esitellä pienoiskuviasi. Esimerkkitapauksessamme kuvia varten on varattu 200 x 300 pikselin suuruinen alue ja rajattu sopivasti tilaa sen ympäriltä.
Seuraavaksi säädetään miltä yksittäinen kuva-alueelle haettava kuva näyttää:
Kuvat on siis keskitetty vasemmalle ja yksittäisen kuvan koko on 62 x 62 pikseliä. Samassa yhteydessä on määritelty myös kuvien taustaväri.
5. Kaiken pitäisi nyt olla valmista. Päivitä sivustosi ja tyylitiedostosi ja ihaile lopputulosta.
Pieni css-tietämys on tarpeen, jos tahdot muokata muita asetuksia. Flickr Badgessa näkyvien kuvien määrää voi puolestaan säätää muuttamalla skriptissä näkyvää numeroa. Nyt näkyvissä on 8 kuvaa:
Jos et jaksa naputella CSS-koodia ja siistiä skriptiä itse, voit ladata ne tästä:
- XHTML yhteensopiva Flickr Badge –CSS-muotoilu
- XHTML yhteensopiva Flickr Badge –siistitty koodi
Kopioi ensimmäisen tiedoston sisältö ja liitä se blogisi tyylitiedostoon sellaisenaan.
Kopioi sitten toisen tiedoston sisältö suoraan kotisivujesi sivupalkkiosioon. Muista vaihtaa käyttäjänimeksi oma Flickr-tunnuksesi!
Tämä on ensisijaisesti laadittu omaksi muistiinpanoksi, mutta jos sait siitä jotain irti, paiskaa ihmeessä kommenttia!
