Kuvaformaatit verkkosivuilla

Selaimet voivat esittää eri formaateissa tallennettuja kuvia ja onkin tiedettävä missä formaatissa kuvat kannattaa milloinkin tallettaa. Oikean kuvaformaatin valinta on tärkeää sekä sivuston toiminnan että kuvan laadun kannalta. Verkkokäyttöön kuvan tallentaminen on aina kompromissi kuvan laadun ja tiedostokoon välillä. Kuvaformaatin valintaan vaikuttaa myös tarpeet kuvan esittämiselle ja sisältö – tarvitaanko kuvassa läpinäkyvyyttä tai animaatiota, onko kuvassa paljon sävyjä vai tasaisia pintoja, onko kuvassa tekstiä tms. ja tarvitseeko kuvaa skaalata. Tässä artikkelissa kerron kuvaformaattien eroista ja annan muutaman vinkin kuvien valmistelemiseksi verkkokäyttöön.

Käytettävät tiedostoformaatit webissä

Verkkosivuilla voidaan käyttää kuvina JPG, PNG, GIF ja SVG –tiedostoja. Valinta tallennusmuotojen välillä tulee tehdä tapauskohtaisesti kuvan käyttötarkoituksen mukaan. Yksinkertaistettu pääsääntö kuvien tallennusmuodon valintaan on:

Kuvan käyttötarkoitus tai tarve Tallennusmuoto
Valokuvat ja monisävyiset kuvat JPG
Tasaiset väripinnat tai vähän sävyjä PNG 8bit tai GIF
Läpinäkyvyyttä edellyttävät kuvat PNG 8bit tai 24bit
Liikettä (animaatiota) sisältävät kuvat GIF
Logot tai tekstiä sisältävät kuvat SVG tai PNG

Tiedostoformaateista yleisesti

Kaikki nykyisin selainten ymmärtämät kuvatiedostojen formaatit ovat jo varsin iäkkäitä. Ne ovat syntyneet aikansa tarpeisiin ja tekniikoilla eivätkä suuresti muuttuneet ajan myötä.

JPG

Jpg –formaatti on häviöllisesti pakattu. Se tarkoittaa sitä, että toistuvilla tallennuskerroilla tiedoston pakkausalgoritmi hävittää kuvasta informaatiota ja kuvan laatu heikkenee. Kuvaa tallennettaessa sen pakkaussuhdetta voidaan nostaa mikä johtaa pienempiin tiedostoihin mutta samalla huonompaan kuvan laatuun. Kuva ns. pikselöityy

Vahvasti pakattu jpg

Oikein tehtynä kuvaa voi kuitenkin pakata varsin runsaasti laadun kärsimättä liiaksi. Sopiva pakkaussuhde on riippuvainen kuvan sisällöstä. Nyrkkisääntönä voisi sanoa, että mikä tahansa webbikuva voidaan pakata (Photoshopin) laatuasetuksella 75 laadun kärsimättä. JPG soveltuu erityisen hyvin valokuville.

PNG

PNG –formaatin kuvat on pakattu häviöttömästi. Toisin kuin jpg-kuvissa tallennus ei hävitä kuvasta informaatiota ja siksi laatu säilyy parempana. Tämän hintana on kuitenkin suurempi tiedostokoko. Png-kuvien etuna on, että ne voivat sisältää ns. alfakanavan eli läpinäkyvyyttä. Tämän lisäksi png-kuville on valittavissa siinä käytettävien värien määrä eli tiedoston bittisyys. 8bit PNG-kuvassa voi olla vain 256 värin paletti mutta mikäli se riittää on turha käyttää muuta.

tekstin laatu PNG8 kuvassa

Yllä oleva kuva on tallennettu png 8bit muodossa. Vaikka sävyissä voisi havaita pientä raidoittumista on tekstin laatu merkittävästi parempi kuin jpg-kuvassa. Molemmat kuvatiedostot ovat pieniä; jpg 6Kt ja png 8Kt. Kumman valitsisit laadun perusteella?

PNG- kuvat soveltuvat parhaiten logojen, kuvakkeiden ja graafisia elementtejä sisältävien kuvien talennusmuodoksi, sillä se säilyttää graafisten elementtien reunat terävämpinä ja laadun parempana.

GIF

Gif voi sisältää vain 256 väriä ja on siksi varsin rajallinen tallennusmuoto kuville. GIF kuvissa voi kuitenkin olla animaatiota, mikä tekee siitä nykyisinkin erittäin suositun tallennusmuodon. GIF onkin kokenut eräänlaisen uudelleensyntymisen Adobe Flashin tuen lakattua.

GIF –kuvat soveltuvat parhaiten vähäisiä sävyjä sisältävien tasaisia väripintoja sisältävien kuvien tallennusmuodoksi tai jos kuvassa tarvitaan animaatiota.

SVG

SVG on noussut viime vuosina varsinaiseksi webbi-ilmiöksi. Sen avulla voidaan toteuttaa skarppeina elementteinä pienet kuvakkeet ja valtavat graafit. SVG (Scalable Vector Graphics) on siis vektoria ja sellaisenaan tekstitiedosto. SVG -tiedosto voidaan sijoittaa verkkosivuille usealla eri upotustekniikalla mutta myös sellaisenaan – tekstinä HTML-koodiin. Tällöin SVG-tiedoston sisältöön voidaan helposti vaikuttaa tavallisin CSS –tyylein tai vaikkapa JavaScriptilla. Tämä mahdollistaa interaktiivisten graafien luomisen sivuille.

SVG –tiedostot ovat tyypillisesti varsin pieniä. Ellei skaalaustarpeita ole (esimerkiksi kuvake), voi olla helpompaa toteuttaa kuva PNG -tiedostona. SVG vektorigrafiikan käyttö ei saa olla itsetarkoitus – lopputulos on tärkeämpi kuin teknologia.

SVG soveltuu parhaiten, logoille, kuvakkeille ja graafeille.

Optimoinnin merkitys kuvien tallentamisessa

Verkkosivuilla kuvien tiedostokoko on erittäin merkittävä sivujen latautumisnopeuden kannalta. Verkkosivujen latautumisen merkitys on tärkeää käyttäjäkokemuksen vuoksi mutta nopeudella on merkitystä myös sivujen sijoittumisessa hakukoneiden tuloslistauksissa. Verkossa näytettävien kuvien osalta merkitsevänä tekijänä on ainoastaan kuvan pikselimitat (leveys x korkeus) ja laatu (jpg kuvien pakkaussuhde).

Leveys x Korkeus ja resoluutio

Oikaistakseni usein kuulemiani väitteitä kerrataan nyt vielä peruskäsitteet. Kun kuvia valmistellaan verkkokäyttöön, vain kuvan leveys- ja korkeusmitoilla on merkitystä. Vain niillä ja tallennusformaatilla tai sen yhteydessä valitulla kuvan pakkaustasolla (Photoshopissa laatu, quality -säädin).

Kuvan kokoa muutettaessa valittavalla resoluutiolla ei ole merkitystä webbikuvissa! Photoshopin Image Size -valinnassa on aivan sama onko resoluutiona 1, 300 vai 5000! Tällä arvolla ei ole merkitystä kuvan laadulle. Tällä ei myöskään ole vaikutusta kuvan tiedostokokoon.

Photoshop image size and resolution

Mikä formaatti mihinkin käyttötilanteeseen

Esitän seuraavaksi muutamia käyttötilanteita ja näytän vertailukuvan, jossa sama kuva tallennettuna eri formaateissa. Muista, että webbikäyttöön tavoitteena on pienin mahdollinen tiedostokoko, jolla saavutetaan käyttötarkoitukseen riittävä kuvanlaatu.

Kaikki esimerkin kuvat ovat tallennettu Adobe Photoshop CC 2017 Save for Web –toiminnolla.

Valokuvat

vertailu eri kuvaformaateista ja tiedostokoostaEsimerkkinä 500px leveä valokuva, jossa tekstiä tallennettuna eri formaatteihin.

 

Kuvien välinen laatuero on nähtävissä, kun eri versiot ovat rinnakkain. ellei verrokkikuvaa ole, voisi mikä tahansa näistä kelvata useissa tilanteissa lukuun ottamatta alhaisella laatutasolla tallennettua jpg-tiedostoa.

Tallennusmuoto Tiedoston koko
JPG laatuasetuksella 100 219Kt
JPG laatuasetuksella 25 35Kt
PNG 24bit 336Kt
PNG 8bit 104Kt

Tasaisia väripintoja sisältävä grafiikka

vertailu tiedostoformaateista ja tiedostokoostaLaatuerot eivät ole edelleenkään silmiinpistäviä ellei sitten jpg-kuvaa pakata riittävästi. Sen sijaan ero näkyy parhaiten tiedostojen koossa.

 

 

Tallennusmuoto Tiedoston koko
JPG laatuasetuksella 100 88Kt
JPG laatuasetuksella 25 19Kt
GIF 13Kt
PNG 24bit 20Kt
 PNG 8bit  9Kt
 SVG  5Kt

Kuvien tallentamisesta ja kuvakoosta

Kuvia verkkoon tallennettaessa kannattaa ottaa kaikki optimointikeinot käyttöön. Erityisesti PNG-kuvien osalta on helpointa käyttää ulkoista optimointipalvelua. Olen käyttänyt ja uskallan suositella tinyPNG –palvelua https://tinypng.com/

TinyPNG pakkaa esimerkiksi Photoshopin PNG kuvia tyypillisesti noin 75% ilman, että laatu silminnähden kärsii. Suosittelenkin aina käyttämään PNG-kuvat TinyPNG palvelussa tai vastaavassa.

TinyPNG kuvien pakkaus

Bonus vinkki

Joskus kannattaa kokeilla jotain aivan uutta ja ajatella ns. laatikon ulkopuolelta. Selaimet osaavat skaalata kuvia pienemmäksi niitä näyttäessään, voi heikompi laatuinen kuva näyttää aivan kelvolliselta kun se esitetään omia pikselimittojaan pienemmässä koossa. Selainten kyky skaalata kuvia on mm. yksi responsiviisen web-suunnittelun perustekniikoista. Verkkosivun layout-suunnittelussa määritetään miten sivun elementit asemoituvat ja sivun elementtien mitat. Jos kuvan näyttämiseen tarkoitettu alue on maksimissaan 500px leveä näkyy alueen sisälle sijoitettu kuva maksimissaan 500px leveänä siitä riippumatta kuinka suuri kuva on.

Yleisin ohje ja jota itsekin pääsääntöisesti noudatan on valmistella kuva juuri siihen mittaan, jossa sitä suurimmillaan verkkosivulla esitetään. Tästä voidaan kuitenkin poiketa, sillä selain skaalaa kuvan sille annetun tilan mittoihin. Kuvan tiedoston koko saadaan pienemmäksi valmistelemalla kuva pikselimitoiltaan suuremmaksi mutta tallentamalla se korkealla pakkaussuhteella. 1:1 suhteessa tarkasteltuna kuva näyttää tosin huonolta mutta selaimen skaalatessa kuvan pienempään kokoon, pienenevät myös virheet ja kuva näyttääkin hyvältä.

Kuinka kuvat skaalautuvat selaimessa

Alla olevassa kuvassa on rinnakkain kaksi saman kokoisena näytettyä kuvaa, joista toinen on tosin tuplasti suurempi pinta-alaltaan mutta pakattu Photoshopissa laatutasolla 10! Kuvien laatuero on vähäinen mutta suuremman kuvan tiedostokoko on pienempi ja laatu silti kelvollinen.

Fyysisistä mitoistaan huolimatta molemmat kuvat esitetään selaimessa 500px leveinä.

Vertailu tiedostokoko ja pakkaussuhde

Huomaa varsin merkittävä ero tiedostojen koossa. Ilman verrokkia molemmat kuvat näyttävät selaimessa hyviltä. Itseasiassa isompi kuva skaalattuna alaspäin taitaa olla jopa parempi.

Yhteenveto

Kuvien muokkaus ja tallentaminen oikein käyttötarkoituksensa mukaan on tärkeää. Webbikäytössä on lisäksi huomioitava muitakin seikkoja kuin kuvan ominaisuudet. Käyttö ratkaisee. Näitäkin asioita käsitellään Corellian sekä webbikursseilla että Photoshop –koulutuksissa. Aihetta käsitteleviä kursseja ovat mm.
HTML ja CSS Perusteet viestinnän ammattilaisille
Photoshop peruskurssi

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *