Kuvaformaatit verkkosivuilla

Päivitetty 5.10.2021

Tämä kyseinen artikkeli on näkynyt verkkosivustomme tilastoinnissa varsin suosittuna ja edelleenkin sitä luetaan. Päivitin alkuperäisen artikkelin, joka oli tätä kirjoitettaessa jo 4v 8kk vanha mutta edelleen sekä aihe, että sisältö ajankohtainen. On siis syytä palata aiheeseen ja päivittää artikkelin sisältöä.

Viisi vuotta webin tekniikoissa on pitkä aika ja siinä on ehtinyt tapahtua yhtä jos toistakin myös kuvien osalta verkossa.

Kerrataan ensin perusteet – mikä on tärkeää?

Kuva on tärkeä viestinnässä. Merkittävää on mm.

• kuvan sopivuus tilanteeseen

• kuvan tekninen laatu (terävyys, valotus, värien oikeellisuus jne.)

• oikea kuvasuhde

• kuvan latautuminen (ns. laiska lataus)

• tiedoston koko

• tiedostoformaatti

Jätetään tässä yhteydessä käsittelemättä kuvan aiheenmukaisuus ja jätetään myös kuvan terävyys, valotus, värit ym. tämän artikkelin ulkopuolelle. Sovitaan, että ne jäävät ”taiteilijan” vastuulle. Kirjoitan nyt vain tekniikasta.

Kuvasuhde

Ok, myönnetään, kuvasuhde ei liity tiedostoformaatteihin mutta haluan muistuttaa sen merkityksestä verkkosivuilla. Väärä kuvasuhde voi nimittäin vaikuttaa sivun sisällön asemointiin tai kuvan itsensä esittämiseen. Verkkosivuilla kannattaisi aina vakioda samankaltaisissa tilanteissa tai sivun elementeissä käytettävien kuvien kuvasuhteet. Eli siis leveys:korkeus. Tällä varmistetaan se, että sivuja selattaessa tai kuvakarusellissa kuvien vaihtuessa ei tapahdu ei-toivottua sisällön uudelleen asemoitumista tai kuvan itsensä koon muuttumista.

Kuvat eivät välttämättä tule kamerasta suoraan verkkosivustosi käyttämien kuvien kanssa oikean muotoisina. Kuvia on siis rajattava. Varmista kuvien oikea kuvasuhde ennen kuvien siirtämistä verkkosivulle.

Kuvan latautuminen

Tämäkään ei ole kuvaformaatteihin sellaisenaan liittyvä asia vaan kyse on siitä missä vaiheessa web-palvelin lähettää kuvan käyttäjän selaimelle. Lisään tämän aiheen tähän siksi, että verkkosivujen nopea latautuminen on tärkeää monestakin syystä (mm. käyttökokemus, SEO).

Esimerkiksi WordPress on versiosta 5.4 alkaen natiivisti tarjonnut kuvien ns. laiskaa latausta, eli sitä, että kuvat lähetään selaimelle vasta niitä tarvittaessa, ei heti sivulatauksen alettua. Tämä luo vaikutelman nopeammin toimivista sivuista ja parantaa käyttökokemusta. Kerron tämän tässä vain muistuttaakseni, että Lazy Load, laiska lataus ei ole syy, ei edes kelvollinen tekosyy, jättää muut optimointitoimet tekemättä!

Tiedoston koko

Tiedoston koko on edelleen se suurin vaikuttava tekijä kuvien latautumisessa! Tee kuvistasi aina verkkokäyttöön tiedostokooltaan riittävän pieniä mutta laadultaan riittäviä. Paino sanoilla pieni ja riittävä. Kuvan koko on aina kompromissi koon ja laadun välillä.

Mieti aina kuvan osalta

• missä tarkoituksessa kuvaa käytetään

• missä yhteydessä kuvaa esitetään

• millä laitteilla ja missä koossa kuvaa tarkastellaan

• mitä kuvalla tavoitellaan

Kaikki edellä kirjoitettu on oikeastaan ollut samaa jo silloin kun tämän artikkelin alkuperäisen version julkaisin.

Seuraavaksi päästään uusiin asioihin – mikä on muuttunut tiedostformaateissa?

Uudet tiedostoformaatit

Selaimet ymmärtävät nykyisin myös muita kuvatiedostojen tiedostomuotoja kuin perinteisiä .jpg, .png, .gif tai .svg.

Uusien tiedostoformaattien tarkoituksena on parantaa em. kompromissia kuvan laadun ja tiedostokoon kesken. Eli tavoitteena on luoda entistä parempilaatuisia kuvia, jotka ovat tiedostokooltaan pienempiä. Tähän tarkoitukseen on luotu .WebP tiedostoformaatti.

Eikä se tule jäämään tähän. WebP formaatillekin on jo voittaja tulossa. Maailma ei olekaan vielä valmis, odotellaan tässä AVIF ja JPEG XL formaatteja (ei kuitenkaan kannata pidättää hengitystään niitä odottaessa).

WebP kuvaformaatti

WebP kuvaformaatin on tarkoitus tukea sekä häviöllistä että häviötöntä pakkausta, animaatiota ja läpinäkyvyyttä. Lisäksi kuvatiedostojen koko on tehokkaamman pakkaussuhteen vuoksi pienempi kuin vastaavan laatuisilla perinteisillä kuvaformaateilla. Kaikin puolin siis parempi tiedostomuoto.

Tuki selaimissa on jo erittäin hyvä. Apple vielä vähän Safarinsa kanssa roikkuu perässä ja IE:sta ei enää kannata puhuakaan. Safarin osittainen tuki liittyy Safarin ja macOS versioihin ”Partial support in Safari refers to being limited to macOS 11 Big Sur and later”. Pitäkää ne koneet päivitettyinä 😉

Miten kuvat webP formaattiin?

Adobe Photoshop

WebP formaatti ei valitettavasti ole (vielä/kään) valittavissa kuvan tiedostomuodoksi esimerkiksi Adobe Photoshop:ssa mutta ei hätää. Joku muu ehti ensin – Google. Google on tehnyt Photoshoppiin plugin (lisäosan), jonka avulla Photoshopilla voi sekä avata että tallettaa WebP kuvia. Pluginin voi ladata Adoben sivulta.

Muita työkaluja

Työkaluja on jo varmaan useita mutta jatkan nyt tällä Google-linjalla ja kerron, että Googlelta saa kyllä koodia WebP kuvien työstämiseen. Eikä tarvitse kuin ladata koodit, kääntää ohjelma ja komentoriviltä ajaa kuvamuunnoksia.
Esimerkiksi näin:

cwebp -q 80 image.png -o image.webp

Ei taida olla ihan jokaisen peruskäyttäjän normipäivää 😉 , joten jätetään sikseen.

Online palvelut

Verkkosta löytyy useita ilmaisia konversiosivustoja, joissa voi muuntaa kuviaan webP formaattiin. Alla esimerkkinä CloudConvert.com -palvelussa tekemäni konversio jpg -> webp.

Esimerkkikuvan .jpg version koko 552Kt ja .WebP 302Kt eli koko on vain 54% alkuperäisen tiedoston koosta. Tämä on merkittävä säästö datan siirrossa ja erityisesti WebP-formaatista hyötyy jos ja kun sivustolla on paljon kuvia.

Alkuperäinen kuva .jpg-formaatissa.

Kuva konvertoituna WebP tiedostomuotoon. Kuvan tiedostokoko on lähes puolet pienempi kuin .jpg-kuvassa. Huomaatko kuvien laadussa eron? … Ei se mitään, en minäkään!

WordPress lisäosat

Kuvia voi muuntaa WebP formaattiin myös suoraan julkaisujärjestelmissä. WordPressiin on tarjolla lisäosia, jotka osaavat optimoida kuvia ja muuntaa niitä myös Webp tiedostomuotoon. Niistä osa on erityisesti kuvien optimointiin tarkoitettuja ja osa yleisempiä optimointilisäosia eli tekevät paljon muutakin. Valitse käyttöösi soveltuva ja testaa toiminta.

Alkuperäinen artikkeli (julkaistu 10.2.2017)

Tästä jatkuu alkuperäinen, pian lähes 5 vuotta sitten julkaistu, artikkeli. Kiva, jos jaksoit lukea tänne asti. Kannattaa ehkä lukea myös loppuun sillä alkuperäisen artikkelinkin aiheet ovat edelleen tosia ja lopussa on vielä tärkeä vinkki ja muistutus siitä, miten kuvat näytetään selaimessa selaimen määrittämässä koossa, jolloin turhan suurten kuvien lataaminen verkkosivulle ei hyödytä lainkaan. Päin vastoin, se haittaa sivujen latautumista.

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:

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

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.

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.

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

Esimerkkinä 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.

Tasaisia väripintoja sisältävä grafiikka

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

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.

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ä.

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ä.

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