PNG on nyt GIF:iä suositumpi

03.02.2013 23:01 | Ville Suvanto | 11

1987 esitelty GIF on pitänyt iästään huolimatta pintansa internetin yhtenä käytetyimmistä kuvaformaateista, mutta sen osuutta on tasaiseen tahtiin nakertanut 1995 esitelty PNG. Pitkän taistelun jälkeen PNG:n osuus internetissä on ylittänyt GIF:n ja se oli W3Techsin tammikuisen mittauksen mukaan käytössä 62,4 prosentissa internetsivuista. GIF:n osuus oli 62,3 prosenttia ja vielä vuosi sitten eroa sen hyväksi oli yli 15 prosenttia.

Samalla PNG nousi internetin käytetyimmäksi häviöttömäksi kuvaformaatiksi ja sen edellä on ainoastaan JPEG, joka on häviöllinen kuvaformaatti. PNG suunniteltiin alun perin GIF:n korvaajaksi, koska se käsitettiin vanhentuneeksi ja sitä rajoittivat patentit. Etuna on myös 256 värin sijaan 46-bittinen väriavaruus ja 16-bittinen läpinäkyvyys. Toisaalta GIF:n etuna on tähän päiviin asti ollut tuki yksinkertaisille animaatioille.

PNG:n ja GIF:n välillä on paljon eroavaisuuksia eri maailmanosien välillä. Siinä missä PNG on hyvin suosittu Euroopassa, sen osuus Aasiassa on huomattavan paljon pienempi. Lisäksi se on erityisessä suosiossa Unix-pohjaisissa laitteissa.

W3Techs, The PNG image file format is now more popular than GIF

Keskustelu

PNG on teknisesti parempi. Käytännössä PNG (APNG) ei toimi animaationa kaikissa selaimissa, vaan näkyy ainoastaan animaation ensimmäinen kuva. Tietääkseni ainakin Chrome, Firefox ja Opera näyttää animaationa.

GIF tukee vain 8-bittisiä värejä (256 väriä) ja läpinäkyvyys rajoittuu kahteen tasoon. PNG tukee selainta ajatellen ainakin 24-bittisiä värejä (16,7 milj. väriä) ja läpinäkyvyyttä 256 tasolla. PNG on vahvimmillaan yksinkertaisia värejä sisältävissä kuvissa esim. mustaa tekstiä valkoisella pohjalla tai erilaiset viivapiirrokset, joissa on tasaisia värejä. Valokuvissa, tietokonegrafiikassa tai videokuvissa JPG on käytännöllisempi, vaikka PNG olisi laadukkaampi, mutta ihmisen näön rajoituksien takia jopa kymmenen kertaa suurempi koko on hankala perustella.

Joka tapauksessa kummallakaan formaatilla ei kovin näyttäviä animaatioita voi tehdä ilman valtavaa tiedostokokoa. Ei niitä ole sellaiseen suunniteltu, vaikka monet tykkäävät tehdä GIF tai PNG animaatioita. Mobiililaitteita ajatellen tuollaiset animaatiot kuitenkin on kevyempi purkaa, joten akku kestää pidempään.

Lähinnä PNG:ssä on etuna 32-bittisyys, siis 24 bittiä väreille ja 8 bittiä läpinäkyvyydelle. Formaatti tukee kyllä myös 64-bittistä moodia, jossa on 48 bittiä väreille ja 16 bittiä läpinäkyvyydelle, mutten ole sitä nähnyt ikinä missään käytössä. GIF:n tapaan tuettuna on myös palettipohjainen 256 värin tila, joskin GIF:stä eroten tässä voidaan käyttää joko alpha-läpinäkyvyyttä tai huonompaa GIF-tyylistä läpinäkyvyyttä (jota varsinkin alkuaikoina käytettiin IE-yhteensopivuuden takaamiseksi).

Ikävä kyllä, myös PNG kärsii historian painolastista. Sen käyttämä pakkaus on hidas ja tehoton suhteessa uudempiin häviöllisiin formaatteihin. Läpinäkyvyyttä rampauttaa aikoinaan luultavasti formaatin kehittäjien ymmärryksen puutteen vuoksi tehty valinta käyttää non-premultiplied alphaa muissa formaateissa jo aiemmin käytössä olleen ja teknisesti ylivertaisen premultiplied alphan sijaan. Niinikään formaatti ei myöskään tue eri RGB-väriavaruuksia, CMYK:ta tai liukulukuesitystä väreille. Ennen kaikkea se ei tue häviöllistä pakkausta samassa kuvassa häviöttömän kanssa, joten käyttäjän on tarvinnut ymmärtää milloin käyttää JPEG- ja milloin PNG-formaattia.

Tulevaisuudessa saamme toivottavasti paremman formaatin, joka yksinkertaisesti vaan TOIMII kaikissa käyttökohteissa ilman, että käyttäjän tarvitsisi juurikaan näistä asioista tietää. JPEG-2000 ja WebP ovat ehdokkaita, mutta suoraan sanoen ne eivät oikein vakuuta. Siihen saakka on tyytyminen siihen, että käytetään PNG:tä piirroskuville, ruutukaappauksille yms. ja JPEGiä valokuville ja vastaaville kuville, joita PNG ei pakkaa kunnolla. Niin ja ne kissavideot voi tunkea Youtubeen, älkää nyt helvetti sentään käyttäkö kuvaformaattia videoille!

Nämä ei toden totta ole mitään uusia asioita. Muistan että jo 90-luvulla kokeiltiin fraktaalipakkausta ja wavelet-pakkaustakin taitaa kokeillun, vaan eivät ole yleistyneet. Turhan hidasta touhua silloin ysärillä, vähän kuin MP3 konversio kesti tunnin per kappale fraunhofer encoderilla :) JP2000 katosi kuin tuhka tuuleen ilmestyessään. On kyllä todella kummallista että PNG:n yleistyminen on vienyt näinkin kauan. MP3 saisi jo mennä menojaan ja jotain parempaa tilalle, vaikka eipä pieni tila enää kovin oleellinen asia ole musiikkitiedostoissa, Flacia käytellyt itse 10+ vuotta.

Animoitujen giffien keksijä on saatanasta seuraava.

Kuvat kuvina ja videot videoina. :mad:

Aika suuri prosentti sivustoja missä on käytössä GIF:jä. Veikkaisin että suurin osa noista GIF:stä on mainoksia, spacereitä, trackkereitä ja läpinäkyviä klikattavia layereitä. Oikeat kuvat sitten on mahd. PNG:nä.

GIF voittaa PNG:n ainakin yhdelle koodarille tärkeässä asiassa. Yhden pikselin läpinäkyvä kuva on pienempi, koska GIF:n header on pienempi. GIF:n saa jonnekkin 40-50 tavun luokkaan, kun taas PNG jää 60-70 tavuun. GIF säilyttännee asemansa yhden pikselin kuvissa. Onhan tuo kuitenkin jo melkoista pilkunn***taa, tai oikeammin pikselin.

Damsteri

GIF säilyttännee asemansa yhden pikselin kuvissa.

Tämä ongelma-alue on hyvin jännä. Niinpä suunnittelin uuden kilpailevan formaatin juuri tähän tarkoitukseen. Speksi:
– tiedoston nimen pitää olla aina "onetransparentpixel"
– tiedoston koko pitää olla aina 0 tavua

-Töppis-;1710360008

Ja mitä hittoa tekee yhden pikselin kuvilla?

Noilla on monia käyttöjä. Esim. trackkaaminen: Mm. Google Analytics käyttää sivustojen vierailutietojen keräämiseen yhden pikselin GIF-kuvaa ovelasti. Tässä esimerkki. GA-koodinpätkä jollakin sivulla X lataa kuvan googlen palvelimelta johon lisää sivustokohtaisia parametreja. Googlen palvelin tallentaa parametrien tiedot tietokantaansa ja palauttaa GIF:n sivutuotteena. GIF-formaatti on erittäin hyvin tuettu käytännössä kaikissa laitteissa (myös mobiili), joka lienee yksi syy tuohon käytyttyyn tapaan. Ja tuohan on täysin turhaa lataamista jokaikisellä GA:ta tukevalla sivulla, joten varmasti haluavat pitää kuvan koon mahd. pienenä. Jos kuvaa ei palautettaisi ollenkaan, niin toimisi yhtä hyvin, mutta joka sivulle tulisi virheilmoitus.

Tuossa yksi hyvä esimerkki. Huonoja esimerkkejä mihin 1px kuvia käytetään on olemassa paljonkin. Useimmat niistä on sellaisia että on parempiakin keinoja tehdä sama asia.

Sillä kuvan koolla ei kyllä ole tasan vitun vertaa merkitystä – anteeksi vaan kielenkäyttöni – koska jo requesti on kilotavuluokassa, puhumattakaan paljonko tulee liikennettä edestakaisin kun lasketaan pakettien headereita myöten kaikki. Siinä ei paljon kymmenen tavua lisää tunnu.

Muropaketin uusimmat