Nettijulkaisemisen perusteita – kuvaformaatit haltuun

Webbivelho at Work

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:

{PNGvsJPG} Britannian lippu{PNGvsJPG} Qbert koristaa pelimainosta{PNGvsJPG} Teksti on sumeaa ja epäselvää.

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:

{LosslessPNG} Britannian lipussa ei ole artefakteja{LosslessPNG} Tausta on tasainen{LosslessPNG} Teksti on skarppia

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.

{LosslessCons} Bog Imp PNG-muodossa: 273KB{LosslessCons} Bog Imp JPG-muodossa: 34KB

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.

2 thoughts on “Nettijulkaisemisen perusteita – kuvaformaatit haltuun”

  1. Hmm, täytyy sanoa että IE-selaimeen kylläkin saa aivan toimivasti nuo png:n läpinäkyvyydet. Ainoa mitä tarvitsee tehdä, on vain laittaa alfa-chanel manuaalisesti kuvaan päälle, liittämällä pari riviä css-tiedostoon.

    Minun pitää vielä sanoa että gif on mielestäni täysin toimiva formaatti vieläkin, kunhan vain osaa optimoida värit 256-kappaleeseen. Itse ainakin aina olen saanut gifillä aikaan aivan saman laatuisen jäljen, kuin png:llä. Ainoana erona voi sanoa läpinäkyvyyden, sillä gif kuvaan tulee jättää pieni reunus, jotta kuvasta tulisi tarkka.

    50 nettisivua olen suunnitellut ja 70% kaikista grafiikoista olen tehnyt gif:llä, aivan sen takia, koska IE 6 ja vanhemmat vääristävät png kuvien värejä, jolloin kuvan värit eivät täsmää Hex/rpg arvoon. Sitä ei voi korjata kunnolla, tai tosin voi kuvan väri filtteriä säätää, mutta väri ei ikinä saa oikein. Png:tä käytän siis vain logoihin, valikoihin ja läpinäkyviin objekteihin, kuten varjostukseen. Lasit voi tehdä stylesheetilla, ja efektit serverin puolen koodeilla.

  2. Kiitos hyvästä kommentista! Eihän giffissä sikäli mitään vikaa ole, sillä ei vain ylletä aivan samanlaiseen värisyvyyteen kuin png-grafiikalla. Omalla kohdallani kipinä giffistä luopumiseen tuli patenttisuojauksesta. Se muuten raukesi vasta viime kuussa… 😉

Leave a Reply

Your email address will not be published. Required fields are marked *