Kuvien julkaisu nettisivuilla

Tämä artikkeli tarkastelee kuvaformaattien valintaa verkkopalvelujen näkökulmasta. Sopivimpien kuvaformaattien valintaan ns. master-kuvien tallennukseen PIM-järjestelmään vaikuttaa useita asioita, esimerkiksi kuvien lähteestä käytettäviin kanaviin ja niiden erityisvaatimuksiin. Näissä me Canterilla luonnollisesti mielellämme autamme.

Verkkosivustot ja muut web-teknologioihin perustuvat palvelut ovat kehittyneet valtavasti viime vuosikymmeninä. Yksi syy tähän on ollut sisällönhallintajärjestelmien kehitys, joka on mahdollistanut entistä tehokkaamman tavan hyödyntää automaatiota sivustojen tuotannossa. Verkkoyhteydet ovat nopeutuneet niin mobiili-, kuin fyysisten verkkojen puolella, joka on osittain mahdollistanut raskaampien sivustojen suunnittelun (Bermes 2015). Samaan aikaan vaatimukset ovat kiristyneet erityisesti sivustojen hakukonelöydettävyyden saralla. Yksi suuri muutos sivustojen hakukonealgoritmeihin on tullut sivuston nopeudesta, joka on kääntynyt vahvasti mobiilipainotteiseksi (Doantam, 2016). Vaikka mobiiliyhteydet ovat Suomessa globaalillakin tasolla huippuluokkaa, on Googlen mobiililaitteiden nopeudeksi määritelty melko hidas verkkoyhteys (Google PageSpeed n.d.), joka pakottaa suunnittelemaan sivustojen toimivuutta hakukonelöydettävyyden takia. Tämä painostaa suunnittelemaan sivuston entistä kevyemmäksi ja helpoksi ladata.

Yksi suurimmista sivustojen nopeuteen vaikuttavista tekijöistä on sivustolla käytettävien kuvien koko. Kuvat ovat (videon ohella) yksi suurimmista sivuston latausaikaa hidastavista tekijöistä. (Bermes 2015) Samaan aikaan kuvilla voi kuitenkin vaikuttaa merkittävästi ja työmäärältään kohtuullisella vaivalla sivuston latausnopeuteen ja toimivuuteen. Kuvissa haasteeksi muodostuu osittain kahden vastakkaisen tekijän tasapaino: kuvan visuaalinen laatu vastaan kuvan tiedostokoko . Käytännössä mitä laadukkaampi kuva, sitä suurempi tiedostokoko mutta oikeilla kuvavalinnoilla ja pakkausmenetelmillä tähän voi vaikuttaa merkittävästi.


Hyvät kuvaformaatit nettisivuille

JPEG-kuvat

JPEG: Suurin osa nykyisten verkkosivustojen bittikarttakuvista ovat JPEG-muotoisia, koska JPEG on ylivoimainen formaatti kooltaan suurten ja paljon kuvadataa sisältävien kuvien tallennuksessa.

JPEG-kuvien tallennuksessa käytettävällä laatuparametrilla saa kuvakokoa pienennettyä merkittävästi sillä hinnalla, että visuaalisella puolella kuvaan saattaa alkaa ilmestyä pakkausartefakteja. Näiden havaittavuus on vaikeaa korkeammilla pakkausasteilla (>60 % pakkauslaatu), joten visuaalisesti kuva ei tyypillisesti heikkene näissä pakkauslaaduissa.

Formaatin heikkouksia ovat läpinäkyvyyden puute, kuvan laadun heikkeneminen joka pakkauskerralla sekä varsinkin perinteisessä JPEG-formaatissa jossain määrin tehoton pakkausmetodi. JPEG-formaatista on ilmestynyt viime vuosina uuden sukupolven versioita JPEG2000 ja Progressive JPEG, jotka ovat entistä tehokkaampia pakkaamaan kuvien kokoa. Näiden haasteina ovat kuitenkin rajattu selaintuki, joka saattaa estää kuvien näkymisen vanhemmilla selaimilla.

Tuotetiedon hallinta

PNG-kuvat

PNG-formaatti on toinen yleinen bittikarttaformaatti , joka on erityisen tehokas kaavioita ja yksinkertaista kuvadataa tai läpinäkyvyyttä tarvitsevilla kuvilla.

PNG tukee läpinäkyvyyttä ja siitä on olemassa 2 eri versiota: PNG-8 ja PNG-24 . PNG-8 tarjoaa pienemmän pakkauskoon kuin PNG-24 mutta siinä on kaksi merkittävää rajoitusta: Värien maksimimäärä on 256 kpl ja pikselien läpinäkyvyys on binääristä, eli pikseli on joko täysin läpinäkyvä tai läpinäkymätön. Reunapikselit joudutaan tällöin tuottamaan ns. ”matte-värillä”, joka edustaa taustaa, jonka päälle kuva laitetaan. Hyvin optimoituna PNG-8 -kuva voi olla kooltaan vain muutamia kilobittejä.

PNG-24 tarjoaa maksimaalisen laadun mahdollistamalla täyden tuen osittain läpinäkyville pikseleille mutta se on huomattavasti PNG-8:n tiedostokokoa suurempi.

PNG-esimerkkikuva

GIF-kuvat

GIF on viimeinen tässä artikkelissa käsiteltävä bittikarttagrafiikkaa ja PNG-8 mukaisesti läpinäkyvyyttä tukeva tiedostomuoto, jonka erikoisuus on animaatiotuki.

GIF on vähentynyt merkittävästi videoiden yleistyttyä useista syistä. Jos GIF-kuva sisältää paljon yksittäisiä frameja, on tyypillistä, että maksimissaan 256 väriä sisältävä valikoima ei riitä kaikkien yksittäisten kuvien kunnolliselle esitykselle. Tämän ohella paljon dataa sisältävät GIF-kuvat tuppaavat kasvamaan tiedostokoon puolesta suuriksi, mutta toisin kuin modernit suoratoistoa tarjoavat videopalvelut, GIF-animaatio ei sisällä puskurointia (buffering), jolla animaation voisi avata jo osittain ennen latauksen päättymistä. Kun kokonaisuuteen lisää vielä täyden äänituen puuttumisen, on GIF käytössä enää lähinnä hyvin yksinkertaisissa muutaman framen animaatioissa.

Canter Avainlippu

SVG-kuvat

SVG-formaatti on toistaiseksi ainoa web-sivustoilla tuettu vektorimuotoinen kuvaformaatti.

SVG on tiedostokoon suhteen erittäin kevyt ja piirtyy aina täydellisessä tarkkuudessa mistä on suurta etua vaih-televien piirtotarkkuuksien mobiilinäytöissä (Bermes 2015). SVG tukee vain puhtaasti vektorimuotoista dataa (eli ei esim. upotettuja pikseliosuuksia), joten SVG edellyttää pääsyä kuvan vektorimuotoiseen dataan ja vektorigrafiikkaa käsittelevään ohjelmistoon, joita ei ole aina tarjolla. Tällöin värioptimoitu PNG-8 voi olla hyvä vaihtoehto SVG:lle. Vaikka selaintuki on alkanutkin yleistymään merkittävästi, on SVG vielä osittain haastava web-kuvaformaatti esim. tietoturvan kannalta, jonka vuoksi esim. WordPress-tekniikka vaatii erillistä liitännäistä SVG-kuvien lisäykselle (Jackson 2019).

SVG on luonteeltaan perinteisistä kuvista niin poikkeava ja vielä toistaiseksi harvinainen, että siihen löytyy jo tällä hetkellä oma hakuparametrinsä Googlen kuvahaussa, joka voi tuoda uutta kilpailuetua kuvien löydettävyyteen hakukoneista perinteisiin kuvamedioihin verrattuna (Jackson 2019).


Kuvaformaattien tulevaisuus

WebP-formaatti on uusi Googlen kehittämä avoimeen lähdekoodiin pohjautuva formaatti, joka tukee kuvien pakkausta, läpinäkyvyyttä ja animaatioita, eli käytännössä kaikkien perinteisten kuvaformaattien parhaita puolia (Google Developers n.d.). WebP:n haasteena on ollut perinteisesti selaintuki, joka on ollut rajallinen uudempien JPEG-teknologioiden tavoin. WebP saattaa jossain vaiheessa kumota PNG:n ja GIF:n mutta JPEG on tuskin katoamassa mihinkään lähitulevaisuudessa sen laajan raakamateriaaliroolin vuoksi.

Yhteenveto

Optimaalisimman kuvaformaatin valinta web-sivustokäyttöön on väistämättä monen tekijän summa, johon vaikuttaa moni tekninen muuttuja. Lähtökohtaisesti kuvaprosessia kannattaa miettiä saatavilla oleva lähdemateriaalin, saavutettavan hyödyn sekä ajankäytön kannalta ja kokonaisuudessa vaikuttaa muutkin käytettävät kanavat.

Web-käyttöä varten, pienimmän mahdollisen tiedostokoon saavuttamiseksi, valokuvat on lähtökohtaisesti syytä tuottaa JPEG-muotoon. Tässä toki PIM-järjestelmän automaatio auttaa, joten kuvaoriginaali voi olla melkein missä muodossa tahansa ja silti verkkoon saadaan muodostettua automaattisesti hyvin optimoitu kevyt JPEG. Web-käyttöön kaikki yksinkertaiset grafiikat olisi hyvä olla vektorimuodossa, joka tarkoittaa verkossa parhaiten toimii SVG-formaattia. Toki vektorikuvien originaali on yleensä esimerkiksi AI tai EPS. Mikäli näitä ei ole tarjolla ja/tai vektorointi on saavutettua hyötyä työläämpää, niin PNG-8 tarjoaa yleensä JPEG-formaattia tehokkaamman pakkausvaihtoehdon yksinkertaisen grafiikan tallennukselle.


Lähteet

Bermes, Barbara 2015. Lean Websites. Fitzroy: Sitepoint. Luettavissa osoitteessa:
https://learning.oreilly.com/library/view/lean-websites/9781457192883/ (luettu 30.11.2019)

Phan Doantam 2016. Mobile-first Indexing. Google Webmaster Central Blog. Luettavissa osoittessa:
https://webmasters.googleblog.com/2016/11/mobile-first-indexing.html (luettu 30.11.2019)

Google PageSpeed Insights. About PageSpeed Insights. Luettavissa osoitteessa:
https://developers.google.com/speed/docs/insights/v5/about#faq (luettu 30.11.2019)

Santora Jacinda 2019. The 10 Essential SEO Ranking Factors You Need to Rank #1 in 2019. Optinmonster. Luettavissa osoitteessa:
https://optinmonster.com/seo-ranking-factors/#seorank2 (luettu 30.11.2019)

Google Developers. A new image format for the Web. Luettavissa osoitteessa:
https://developers.google.com/speed/webp/?csw=1 (luettu 30.11.2019)

Jackson Brian 2019. How to Safely Enable WordPress SVG Support (2 Simple Clicks). Kinsta. Luettavissa osoitteessa:
https://kinsta.com/blog/wordpress-svg/ (luettu 30.11.2019)