tiistai 18. helmikuuta 2014

Jpg vai png?

Monille jpg tuntuu olevan se kuvatiedostojen kuvatiedosto eikä pidä pitää muita kuvatiedostoja. Jotkut eivät vain tunne eri tiedostomuotoja. Ja onhan Jpg erinomainen tiedostomuoto moneen paikkaan.

Jpg-muodossa valokuvat pakkautuvat kivasti pienemmäksi ja pakkauslaatua on mahdollista säätää. Eri asetuksia kokeilemalla löytää parhaan kompromissin kuvanlaadun ja tiedostokoon välillä. Itse käytän valokuvissani yleensä Photoshopin 10-asetusta maksimin ollessa 12. Laadussa ei näy heikkenemistä mutta kuvasta riippuen se pakkautuu selvästi pienemmäksi. Omassa käytössäni ei ole juurikaan ollut tarpeen vääntää pakkausta kovemmalle. Valokuvaajatkin toimittavat nykyään usein kuvat jpg-muodossa eikä esimerkiksi tiffinä mikä oli kai joskus enemmänkin tapana.

Png on taas häviötöntä pakkausta käyttävä muoto jonka etuna on mahdollisuus tehdä osasta kuvasta läpinäkyvä. Siinä missä jpg on suunniteltu valokuvien pakkaamiseen, png soveltuu taas paremmin tekstille, kuvakkeille ja viivagrafiikalle. Usein kuulee sanottavan että png:tä kannattaa käyttää vain silloin kun tarvitaan läpinäkyvyyttä, jpg:llä saa yhtä hyvän laadun pienempikokoisella tiedostolla. Omassa työssäni olen kuitenkin huomannut että se ei pidä aina paikkaansa. Pakkaustehokkuus riippuu aina käytön kohteena olevasta kuvasta. Ja koska jpg on suunniteltu ensisijaisesti valokuville, se ei ole aina paras mahdollinen vaihtoehto.

Työstin töissä infonäytölle tulevaa hinnastoa jossa oli lähinnä valkoista tekstiä liukuväritaustan päällä. Hinnasto ei tullut nettiin, joten tiedoston koolla ei ollut väliä joten tein sen png-muotoon. Asiakkaalta tuli kuitenkin pyyntö laittaa tiedosto jpg-muodossa ja tein työtä käskettyä. Save for Webbin esikatselussa gradientti kuitenkin pykälöityi vaikka laitoin laadun täysille (100%). Myöskin tiedoston koko oli isompi kuin png-tiedoston. Päätin toistaa kokeen myöhemmin kotona.

jpg-gradientti

png-gradientti


Lopputuloksessa on selvä ero tälläkin kertaa. Kokoero oli vieläkin isompi kuin töissä (ainakin suhteessa). Molemmat kuvat on tallennettu Save for Webbillä CC Illustratorista. Ensi kerralla kun joku sanoo että jpg:llä saa saman laadun mutta pienemmällä tiedostokoolla, voin siis heristää sormea ja sanoa että ei pidä aina paikkaansa. Tiedostomuotojen eroista löytyy kyllä monenlaista juttua, mutta aika harvoin mennään tarkkaan vertailuun. Tosin useimmissa jutuissa kyllä todetaan selkeästi että jpg sopii valokuville ja png piirroksille ja viivagrafiikalle yms. Onneksi Save for Webbissä on esikatselu joten tiedostomuoto on helppo valita tapauskohtaisesti. Ei siis kannata uskoa mitä muut sanovat vaan kannattaa kokeilla itse.

P.s. mikäli kuvista ei tunnu löytyvän eroa, se voi johtua näytöstäsi.

edit:

Jos haluaa toistaa kokeen ja käyttää Photoshoppia, täytyy ottaa huomioon että uudemmat Photoshopit ditheroivat gradientit pykölöitymisen estämiseksi. Ditheröinti yleensä kasvattaa tiedoston kokoa, koska kuvaan tulee lisää informaatiota.

Ja miksi sitten jpg-gradientti pykälöityy? Jpg-pakkauksessa kuvaa käsitellään 8 x 8 pikselin blokkeina. Jos väriero ei ole riittävän suuri, menee koko blokki pakkauksessa saman väriseksi. Pykälöitymiseen vaikuttaa myös gradientin koko sekä värien eron jyrkkyys.

Tein muutaman lisäkokeilun ja ne tukevat nykyistä näkemystäni että tiedostomuoto kannattaa valita tapauskohtaisesti. Tyttökuvat on tehty Illustratorilla ja loput Photoshopilla (molemmat CC). Tyttökuvissa 70 % pakkaus ja muissa 60 %.

Jpg- ja png-testikuvia

Testikuvien koot

Tein vielä pari koetta fotarin gradientilla ja ditheröinti voi kasvattaa png-tiedoston kokoa lähes 10 kertaiseksi! Tämä selittää sen että fotarilla tehdyt kokeet ovat päinvastaisia.


11 kommenttia:

  1. Aika selkeä ero jopa kännykällä. (Motorola Razr HD). Ihan hyvin perusteltu. Mulla tosiaan sellainen usko että jpg vain valokuville ja png kaikelle muulle.

    VastaaPoista
  2. Itse käytän web-devauksessa png:n kanssa PNG pakkaus-ohjelmaa:
    http://pngquant.org/
    Tuon avulla tuleekin enemmän png:tä käytettyä jpg:n sijaan.

    VastaaPoista
    Vastaukset
    1. Ovatko nuo tiedostokoot enää nykynopeuksilla niin merkityksellisiä?

      Itse olen odotellut että svg alkaisi yleistymään, esim. firmojen logothan ovat yleensä valmiiksi vektoreina.

      Poista
    2. Eipä sinällänsä, mutta kun monelta on kysyny että miksi käytät grafiikoissa jpg:ta niin yleensä vastaus on koko. SVG:tä odottelen itsekkin innolla.

      Poista
    3. Miksi sitä pitää odottaa? Eikö se ole jo hyvin tuettu selaimissa?

      Poista
    4. http://caniuse.com/svg
      IE 8:a on yleensä tarvinut vielä tukea projekteissa, joten ei ihan vielä.

      Poista
    5. On se vaan jotenkin hurjaa että yhden firman vanha selain pystyy näin jarruttamaan kehitystä. Monopoliaseman hedelmiä.

      Poista
  3. Koitin toistaa kokeen äsken omalla koneella. Saman tapainen gradientti ja photoshopin safe for web. Pakkaus 70% jpeg, enkä pysty esikatselussa silmällä erottamaan portaita. Koko 6,2 kt. Sama png:nä, koko 149 kt.

    VastaaPoista
    Vastaukset
    1. Jos haluat oikeasti toistaa kokeen etkä tehdä omaa, täytyy ottaa pari asiaa huomioon ;)

      Uusissa Photoshopeissa on gradienttityökalussa oletuksena Dither käytössä. Ditheröinti vähentää pykälöitymistä mutta voi vaikuttaa tiedoston kokoon koska siihen tulee lisää informaatiota (png menee sitä pienempään tilaan mitä vähemmän informaatiota).

      Jos taas tuot vektorielementin fotariin, gradienttia ei ditheröidä ja se voi pykälöityä.

      Ja miksi jpg pykälöityy (netissä sata ja yksi kirjoitusta pykälöityvistä gradienteista joten ongelma on todellinen)? Jpg-pakkauksessa kuvaa käsitellään 8 x 8 pikselin blokkeina. Jos väriero on riittävän pieni, määrittää pakkaus koko blokin saman väriseksi. Lopputulokseen vaikuttaa siis sekä gradientin koko sekä värit.

      Bjangon sivulla on havainnollistettu hyvin tuo ditherointi ja pykälöityminen: Bjango - Gradients

      Poista
  4. Väriprofiilit vaikuttaa kans, saattaa olla et sun jpg:s käyttää väärää väriprofiilia. Jotain tossa sun testissä joka tapauksessa menee pieleen, tein saman testin ja jpg:llä pääsee portaattomaaan liukuun murto-osalla tiedoston koosta. Tsekkaa värihallinta nyt ainakin.

    VastaaPoista
    Vastaukset
    1. Työiedosto on tehty illun webbipresetillä ja molemmat esimerkit samasta aineistosta Save for webbillä joten en oikeen keksi että miten jpg olisi mystisesti väärässä väriprofiilissa.

      Ja jos käytit Photoshoppia kuten Elina ja teit ditheröidyn gradientin, niin tilanne ei ole vertailukelpoinen (kts. vastaukseni yllä). Tee saman kokoinen gradientti ilman ditheröintiä ja käytä samoja värien lähtöarvoja ja kokeile uudestaan jos haluat toistaa kokeen.

      Poista

Jätä toki kommentti tai kysymys.