Kuvien koko verkkojulkaisuissa – lyhyt oppimäärä

Verkkosivuilla julkaistavien kuvien koolla on suuri merkitys. Liian suuret kuvatiedostot hidastavat sivuston latautumista ja vaikuttavat heikentävästi hakukonenäkyvyyteen. Lisäksi isot kuvatiedostot täyttävät käytettävissä olevan palvelintilan tehokkaasti ja pahimmassa tapauksessa sivusto lakkaa toimimasta. Kannattaa siis opetella kuvien pienentäminen ja optimointi.

Tiedostokoko

Kuvan tiedostokoko on kuvan digitaalinen koko, joka mitataan kilotavuina (kt), megatavuina (Mt) tai gigatavuina (Gt). Kuvan tiedostokoko on suoraan verrannollinen kuvan pikselimittoihin. Paljon pikseleitä sisältävät kuvat sisältävät paljon kuvainformaatiota mutta käyttävät myös paljon levytilaa.

Kameran kennon koosta ja laadusta, sekä kameran asetuksista riippuen tiedostokoko voi olla pienellä JPG-pakkauksella kahdesta pariin kymmeneen megatavua. Kuvan pikselikoko ilmoitetaan pikseleinä leveysXkorkeus. Esimerkiksi:

• puhelimesta ladattu kuvatiedosto 3305×1814 px, tiedostokoko 4,7 Mt
• järjestelmäkameran kuvatiedosto 6720×4480 px, tiedostokoko 19,3 Mt

Tiedostokoko vaihtelee myös kuvan sisällön mukaan, paljon värisävyjä ja/tai yksityiskohtia sisältävän kuvan tiedostokoko on eri kuin vähäsävyisen ja/tai laajoja sävypintoja sisältävän kuvan. Alla olevat kuvat on kuvattu samalla marraskuisella kuvauskävelyllä ja optimoitu samoilla asetuksilla.

Pakkaaminen ja tiedostomuodot

Kuvan pienentämisen ohella tiedostokokoon olennaisesti vaikuttava asia on kuvatiedoston pakkaaminen.

Tiedostomuodon valintakin vaikuttaa tiedostokokoon. JPEG-, PNG-tiedostomuodoissa käytetään eri pakkausmenetelmiä, minkä vuoksi samat pikselimitat sisältävien tiedostojen koot saattavat vaihdella huomattavasti.

Jpeg

eli jpg on verkkojulkaisuiden valokuvien perusformaatti. Jpg pakkaa kuvan tehokkaasti, joskin häviöllisesti. Pakattaessa kuvan laatu heikkenee mutta pakkaussuhde on säädettävissä. Pakkaaminen on kuvan pikselimittojen pienentämisen ohella tärkein tiedostokoon hallinnan keino.

Png

Png on häviötöntä pakkausta käyttävä bittikarttakuvien tiedostomuoto. Png on paras tiedostomuoto grafiikan esittämiseen, se tukee läpinäkyvyyttä ja esittää grafiikan iman suttuisuutta. Valokuville png ei ole hyvä vaihtoehto koska tiedostokoko jää suuremmaksi kun jpg:tä käytettäessä eikä laadussa voiteta mitään.

Jpg:n laajempi oppimäärä tiedonhaluisille https://fi.wikipedia.org/wiki/JPEG
ihan kaikki jpg-tiedostoista (englanniksi): https://jpeg.org/jpeg/index.html
Lisää tietoa png:sta: https://fi.wikipedia.org/wiki/PNG

Kuvien koon ja pakkauksen optimointi

Optimointi on kuvan tiedostomuodon, koon ja pakkassuhteen valintaa niin, että kuvan laatu säilyy mahdollisimman hyvänä, vaikka tiedostokoko pienenee. Kuvan optimointi on kompromissi kuvan laadun ja tiedostokoon välillä.

Kuvien optimointi varmistaa sivuston nopean latautumisen. Hyvälaatuiset, nopeasti latautuvat kuvat antavat sivustosta ammattimaisen ja luotettavan kokemuksen.

Allaolevassa kuvagalleriassa on puolukkakuva on rajattu ja pienennetty 650×650 px kokoon ja sitten pakattu Photoshopin Save for Web -työkalulla eri pakkauslaaduilla. Pakkausasetus ja tiedostokoko näkyvät kuvatekstissä kun avaat gallerian.

Laadulla 60 (High) pakattu kuva näyttää vielä terävältä ja tiedostoko on vain 133 kt, aika paljon vähemmän kuin pakkaamattoman kuvan 460 kt. Alkuperäinen pienentämätän ja pakkaamaton puolukkakuva on 2149×2149 px ja 3,1 Mt.

Mikä sitten on kuvan oikea koko www-sivulle?

Kameran muistikortilta tai puhelimesta ladattu jpg-kuva on siis lähes aina liian iso sellaisenaan julkaistavaksi ja kuva täytyy pienentää käyttötarkoitukseen nähden järkevän kokoiseksi. Tarvittaessa kuva rajataan teeman käyttämään kuvasuhteeseen ja pikselimitat pienennetään suurimpaan käytettävään kuvaan. Julkaisualustat yleensä huolehtivat eri kuvakokojen generoinnin automaattisesti. Mieti siis mikä on suurin koko missä kuvaa käytät ja säädä kuva sen mukaan. Toisaalta pientä 250×250 px vinjenttikuvaa ei kannata ladata 1000×1000 px koossa siltä varalta, että ehkä aiot käyttää sitä joskus isompana.

Pää- tai taustakuvat

Jos sivustolla käytetään isoa pääkuvaa kannattaa sen virittäminen tehdä huolellisesti. Iso pääkuva etusivuilla hidastaa tehokkasti sivuston latautumista ja kärsimätön kävijä ehtii häipyä muualle.

Näyttöjen tarkkuus on kasvanut, niinpä täysleveän (100 %) pää- tai taustakuvan vaakakoko on vähintään 1600 pikseliä, mielellään 2048 pikseliä tai jopa hieman enemmän, koska uusien tablettien ja läppäreiden näyttöjen tarkkuus saattaa olla 2560-3000 pikseliä ja 4k-näyttöjäkin on jo käytössä.

Jos kuva täyttää vain osan ruudusta, voi kuvan tarkkuus olla vastaavasti pienempi, esim. 1024-1600 pikseliä leveydeltään.

Sivustojen teemojen ohjeissa kerrotaan yleensä suositellut mitat ja kuvasuhteet, kannattaa tarkistaa.

Portfoliot, kuvagalleriat ja verkkokauppojen tuotekuvat

Kun kuvia on paljon on tärkeää huolehtia kuvien optimoinnista. Mieti maksimikoko. Tarkista näyttääkö käyttämäsi teema kuvat jossain tietyssä koossa ja käytä sitä, on turha ladata sivustolle tarvetta suurempia kuvia. Kun sivustolla on paljon kuvia on pakkausuhteen tarkistaminen erityisen tärkeää.

Muutamat tarkkaan harkitut, valitut ja optimoidut kuvat on parempi vaihtoehto kuin paljon liian isoja tai suttuisia kuvia.

Vielä muutama asia parantamaan hakukonenäkyvyyttä

Näillä ei ole tekemistä kuvakoon kanssa mutta ovat olennainen osa kuvan optimointia.

Nimeä kuvat

Kameran antama numerosarja on hukkaan heitetty tilaisuus hakukonenäkyvyyttä ajatellen. Mieti kuville sisältöä kuvaavat nimet, jos saat hakusanan sisältymään nimeen niin aina parempi. Tiedostonimissä ei käytetä ääkkösiä, välilyöntejä, eikä muita välimerkkejä kuin väli- ja alaviivaa tiedostojen nimissä. Jos kuva ei lataudu sivulle niin tarkista kuvan tiedostonimi.

Kirjoita kuvatekstit

Ihmiset lukevat ensin otsikot ja kuvatekstit, niiden perusteella päätetään onko sivuston asia kiinnostavaa. Hakukonenäkyvyyden kannalta kuvateksti on myös hyvä paikka saada sijoitettua hakusana sivun sisältöön.

Kirjoita Alt -tekstit

Alt-atribuutti eli vaihtoehtoinen teksti on kuvaus kuvan sisällöstä ja sitä käytetään hakukoneindeksoinnissa mutta vielä tärkeämpi se on kun tehdään saavutettavia julkaisuja. Alt teksti ei näy sivulla mutta sen avulla kerrotaan kuvan sisältö kun kuva ei näy. Vaihtoehtoinen teksti ei ole sama asia kuin kuvateksti.

Vaihtoehtoinen teksti ja saavutettavuus https://www.saavutettavasti.fi/kuva-ja-aani/kuvat/
Milloin ja mitä (englanniksi): https://www.w3.org/WAI/tutorials/images/decision-tree/

Sokerina pohjalla, dpi:llä ei ole merkitystä verkkojulkaisijalle.

Dpi=dots per inch (pisteitä tuumalla). Tämä arvo kertoo kuvaa tulostettaessa tai painettaessa kuvan laadun tulostimelle tai painokoneelle. Digitaalisen, verkossa julkaistavan kuvan dpi-arvolla ei todellakaan ole väliä.

Verkkojulkaisija voi siis huoletta vaikka unohtaa koko jutun, se ei vaikuta verkossa julkaistavan kuvan laatuun tai kokoon. Esimerkiksi Photoshopin Save for Web -työkalussa ei ole ollenkaan dpi valintaa.

Varmemmeksi vakuudeksi kaksi versiota hajuhernekuvasta, molempien kuvien tiedostokoko on 112 kt.

Paljon lisää resoluutiosta: https://fi.wikipedia.org/wiki/Resoluutio_(kuvatekniikka)