Täydellisesti optimoitu kuvatiedosto on kevyt ja tarkka. Kuvatiedoston ”painoon” eli tiedostokokoon vaikuttaa yllättävän moni asia eli pelkkä kuvan mittojen muutos ei yleensä ole riittävä toimenpide. Tosin se on parempi kuin ei mitään.
Kuva muokataan aina ennen sen lataamista nettisivuille. Mediakirjastossa on tarjolla joitain työkaluja muokkaukseen, mutta yleensä ne eivät toimi aivan halutulla tavalla.
Käydään optimointi läpi esimerkkikuvan avulla. Minulla on Jenni Orasen ottamia kesäisiä kuvia, joista haluan ottaa yhden kotisivuilleni artikkelikuvaksi. Kuva on käytössäni täydellä resoluutiolla eli voin tarvittaessa käyttää sitä esim. painotuotteissa.
Esimerkkikuvamme lähtötiedot:
- Leveys 6016 px
- Korkeus 4016 px
- Tiedostokoko 16,9 Mt (16 900 kt)
- Tarkkuus 310 dpi
Kuvatiedoston tärkeimmät tiedot näkyvät, kun viet hiiren tiedoston päälle resurssienhallinnassa. Lisätietoja saat klikkaamalla kuvaa hiiren oikealla painikkeella ja valitsemalla ”Ominaisuudet”.
Näet esim. nämä tiedot:
- Kuvatiedoston koko eli paino
- Tiedostotyyppi
- Kuvan mitat
- Kuvan tarkkuus
Kaikki yllä olevat vaikuttavat siihen, miten kuva toimii juuri sinun nettisivuillasi. Käydään nyt kohdat yksitellen läpi ja optimoidaan samalla esimerkkikuvaa. Artikkelin lopusta löydät listan työkaluista, joita voit hyödyntää kuvien optimoimisessa.
Kuvatiedoston koko eli paino
Kuvatiedoston koko on mielestäni tärkein kuvan ominaisuus. Sitä ei voi muuttaa suoraan, vaan koon muutos tapahtuu muokkaamalla kuvan muita ominaisuuksia. Muokkausten jälkeen kuvatiedostoja voi vielä pakata.
Esimerkkikuvamme tiedostokoko on hulppea 16,9 Mt eli 16 900 kt. Yleensä annan asiakkailleni ohjeeksi pyrkiä alle 200 kt painoluokkaan. Satunnainen koko ruudun levyinen näyttävä kuva voi joskus painaa jopa 400 kt, mutta se on jo kipurajoilla. Mitä kevyempi kuva, sen parempi!
Kuvatiedoston koko vaikuttaa siihen, miten nopeasti tai hitaasti sivu latautuu kävijälle. Varhaiset netin käyttäjät muistavat, miten kuvat piirtyivät ruudulle pikselirivi kerrallaan. Vaikka nettiyhteyksien nopeudet ovat kasvaneet, tulee silti edelleen vastaan sivustoja, joissa tuo rivi kerrallaan -efekti toistuu. Silloin tietää varmaksi, että sivulla on valtava kuvatiedosto.
Kuvatiedoston suuri koko ei takaa tarkkaa tai erityisen upeaa kuvakokemusta. Näytöt toistavat vain tietyn määrän pikseleitä ja kaikki sen yli menevä on turhaa painolastia, joka riisutaan pois. Mitä suurempia tiedostoja sivulta ladataan jokaisella näyttökerralla, sitä enemmän tarvitaan kävijän verkkoyhteydeltä sekä yrityksen palveluntarjoajan palvelimilta. Sopivan kävijäpiikin myötä koko sivusto kaatuu, kun siirtokaista tulee käytettyä jättikuvien lataamiseen.
Tiedostotyyppi
Kuville tarkoitettuja tiedostotyyppejä on useita. Nettisivuille riittää niistä muutama.
- JPG / JPEG
Suositeltu tiedostotyyppi kaikkiin kuviin. JPG / JPEG on kevyt vaihtoehto ja se toimii kaikilla ruuduilla. Läpinäkyvät kohdat muuttuvat valkoisiksi, kun tiedosto muunnetaan JPG / JPEG -muotoon. - PNG
Tarkka kuvanlaatu. Käytetään silloin, kun kuvassa on läpinäkyviä osia. Kuvien tiedostokoot ovat usein huomattavan suuria. - WebP
Kevyt, Googlen kehittämä kuvatiedosto, joka ei toimi esim. kaikissa Applen laitteissa. Kuvien muuntaminen hoidetaan yleensä verkkosivujen päässä niin, että kuvien näyttäminen määritellään laitekohtaisesti. - GIF
Somessa yms. paljon käytetty, pientä liikkuvaa kuvaa ja animaatiota mahdollistava tiedostomuoto. Nettisivuilla voidaan käyttää tarvittaessa, mutta jos kyseessä on staattinen kuva, niin valitaan mieluummin joku yllä olevista vaihtoehdoista. - SVG
Vektorimuotoinen kuva, jota käytetään usein esim. logotiedostoissa ja ikoneissa sekä muussa grafiikassa. - PDF
Ei varsinainen kuvatiedostotyyppi, mutta usein graafikolta saatu versio esim. logotiedostosta. Jotta kuvaa voi käyttää nettisivuilla, se pitää ensin muuntaa kuvatiedostomuotoon.
- JPG / JPEG
Nyrkkisääntönä voisi pitää, että valitaan tiedostomuoto, jolla saadaan pienin tiedostokoko ja tavoiteltu tulos. Tavallinen, koko leveytensä ja korkeutensa peittävä kuva toimii ruudulla parhaiten JPG / JPEG -muodossa ja jos kuvassa on läpinäkyvyyttä, valitaan PNG.
Esimerkkikuvamme on jo JPEG-muodossa, joten tiedostotyypin vaihtamista ei tarvita. Vaihdoin tiedostotyypin testin vuoksi PNG-muotoon ja tiedostokooksi tuli 35,9 Mt (vrt. 19,6 Mt JPEG-muodossa).
Kuvan mitat
Kuvan mitat kertovat kuvan leveyden ja korkeuden. Mitat voitaisiin esittää senteissä ja milleissä, mutta koska kuva näytetään näyttöruudulla, käytetään ruutujen koon ilmoittamisessa käytettävää yksikköä eli pikseliä (lyhenne px).
Kuvan koko suhteutetaan keskimääräisen näyttöruudun koon mukaan. Koko ruudun leveydelle ulottuvan kuvan maksimimittana on nettisivuilla käytetty yleisesti 2048 px, mutta ruutukokojen ja -tarkkuuksien lisääntyessä on käytetty tarvittaessa myös suurempia pikselimääriä. Näiden jättinäyttöjen osuus sivustokäynneistä on kuitenkin melkoisen pieni (ellei kävijäkuntasi ole erityisesti jättiruutujen ystäviä) ja siksi kannattaa punnita, onko kuvan mittojen kasvattaminen latautumisnopeuden kustannuksella tarpeen.
Kuvan leveys ja korkeus määräytyy sen mukaan, miten kuva asettuu sivustolla.
Jos kuva on asetettuun paikkaan liian suuri, se kutistetaan sopiviin mittoihin. Ylimääräinen tiedostokoko on vain turhaa ylimääräistä, joka ei tee kuvalle muuta kuin hidastaa sen latautumista.
Jos kuva taas on liian pieni, se näkyy asetetussa paikassa asetuksista riippuen joko liian pienenä, tai epätarkkana pikselimössönä kun pikseleitä venytetään täyttämään annettu alue.
Tuotekuvat ja artikkelikuvat
Jos kuvaa käytetään artikkelikuvana tai tuotekuvana eli ns. jakokuvana, niin tarkista kanavan antamat suositus- ja minimimitat kuville. Aika yleisesti kuvan tulisi olla vähintään 1200 px leveä, jolloin se huomioidaan esim. Facebook-jaoissa ja Googlen palveluissa.
Kuvan tarkkuus
Kuvan tarkkuus eli resoluutio ilmaistaan yksiköllä ”dpi” eli dots per inch eli pistettä (pikseliä) tuumalla. Painotuotteissa käytetään yleisesti yli 300 dpi:n lukemia ja digikameroiden kuvat ovat käsittelemättöminä tätä luokkaa.
Näyttöjen tarkkuus on kuitenkin alle 100 dpi, yleisesti käytetään lukua 72 dpi. Tämä tarkoittaa sitä, että vaikka kuvassasi olisi tuplasti tai kolme kertaa enemmän pikseleitä, ne eivät näy ja taas kaikki ylimääräinen vain suurentaa turhaan tiedostokokoa ja hidastaa kuvan latautumista.
Esimerkkikuvamme mitat olivat siis 6016 x 4016 px eli noin kolme kertaa liian suuri keskimääräiselle näytölle. Tarkkuutta oli 310 dpi.
Kuva tulee paikalle, jossa se kattaa puolet tietokoneen näytön näkymästä (2048 px / 2) ja lähes täyden leveyden kännykän ja tabletin näkymästä (max 1080 px), joten kuvan leveydeksi käy tuo 1024 px ja tarkkuus 72 dpi.
Koon muuttamisen jälkeen esimerkkikuvan tiedostokoko on 783 kt eli höyläsimme tiedostokoosta jo valtaosan pois. Painoa on kuitenkin vielä liikaa.
Kuvatiedoston pakkaaminen
Kuvatiedoston pakkaaminen poistaa kuvatiedoston koosta vielä ne viimeiset turhat kilotavut. Hyvä työkalu säilyttää kuvan tarkkuuden samalla kun se pienentää tiedoston kokoa.
Minulla on tapana tallentaa kuvat Photoshopin ”Save for web” toiminnolla ja tämän jälkeen käytän kuvan vielä TinyPNG-pandan kautta (kts. lista työkaluista).
Esimerkkikuvamme koko oli Photoshopin jälkeen 236 kt ja pandan käsittelystä lopullinen versio tuli koossa 177 kt. Tiedoston koko on siis noin sata kertaa pienempi kuin aloittaessa.
Esimerkkikuvamme lopullinen versio:
- Leveys 1024 px
- Korkeus 684 px
- Tiedostokoko 177 kt (0,18 Mt)
- Tarkkuus 72 dpi
Kuvatiedoston nimeäminen
Niin kätevää ja näppärää kuin se onkin klikata muokkausten päätteeksi vain Tallenna-valintaa, niin suosittelen kuitenkin tallentamaan kuvan sellaisella nimellä, josta on hyötyä tulevaisuudessa. Myönnän, että sorrun kyllä usein itsekin tuohon ajatuksettomaan tallentamiseen.
Kuvan nimeämisestä on apua mm. näissä asioissa:
- Hakukoneoptimointi
Kuvan nimi toimii yhtenä hakukoneoptimoinnin osana. Kuvan nimen on siis hyvä kertoa kuvan sisällöstä ja käyttötarkoituksesta. - Kuvan löytäminen
Omalle kohdalleni hyvin usein tuleva tilanne on sellainen, että satoja, jopa tuhansia tuotekuvia sisältävän kaupan mediakirjastosta pitäisi lisätä kaupan logo esim. sähköpostiasetuksiin. Mediakirjaston selaaminen on tuskastuttavan hidasta, mutta jos hyvin käy, löydän logokuvan, kun kirjoitan hakukenttään ”logo”. Kun kuvan nimi on riittävän kuvaava, se on helppo hakea vuosienkin jälkeen. - Saavutettavuus
Vaikka ruudunlukuohjelmat käyttävätkin pääasiassa kuvien alt-tekstejä, ne poimivat joskus myös kuvien nimiä. IMG200003442-2.jpg ei kerro kauhean tarkasti kuvan käyttötarkoituksesta tai sisällöstä.
- Hakukoneoptimointi
Miksi kuva ei vaihdu, vaikka vaihdan kuvan?
Jos olet jo kertaalleen ladannut kuvasta version mediakirjastoon ja yrität korvata sen toisella versiolla, sinun pitää joka kerta nimetä kuva hieman eri tavalla kuin aiempi versio.
WordPressissä on ominaisuus, joka säilyttää alkuperäisen mediatiedoston näkyvissä vaikka ko. kuva olisi poistettu mediakirjastosta ja korvattu uudella, mutta täsmälleen saman nimisellä tiedostolla. Voit käyttää tiedostojen nimeämisessä esim. numerointia (kiva-kuva-v3.jpg) tai keksiä aina uusia nimiä tai päätteitä kuvien nimille.
Työkaluja kuvien muokkaamiseen
Jos teet paljon kuvien muokkausta esim. verkkokauppaa varten, niin suosittelen panostamaan hyvään ja toimivaan työkaluun. Lisenssimaksu näyttää arvonsa selkeillä ja nopeilla prosesseilla eikä sinun tarvitse käyttää aikaa usean eri työkalun kanssa säätämiseen.
Kuvankäsittelyohjelmat
Erilaisia kuvankäsittelyohjelmia on tarjolla runsaasti. Itse käytän näitä kolmea:
- Photoshop
Ammattilaistason työkalu, jolla voit muokata kuvien kokoa ja tarkkuutta sekä pakata kuvatiedoston nettiä varten. Voit myös nauhoittaa makroja, joiden avulla suurien kuvamäärien muokkaus onnistuu nopeasti ja vaivattomasti. Tärkeimmät toiminnot löytyvät kohdista Image -> Image Size (kuvan koko ja tarkkuus) sekä File -> Export -> Save for web (pakkaaminen).
Hinta: alk. 25,09 €/kk Linkki Adoben tilaussivulle - Canva
Verkossa toimiva monipuolinen suunnittelutyökalu, jota voi hyödyntää myös kuvankäsittelyssä. Valmiiseen pohjaan voi tuoda muokattavat kuvat ja esim. koko muokataan automaattisesti pohjan mukaiseksi. Tärkeimmät työkalut löytyvät kohdista Muuta kokoa ja Jakaminen -> Lataa -> Koko TAI Rajoita tiedoston koko (pro-ominaisuus)
Hinta: ilmainen rajatuilla ominaisuuksilla, pro alk. 110 €/vuosi Linkki Canvan kotisivulle - PhotoScape
Ilmaiseksi työkaluksi hyvinkin monipuolinen kuvankäsittelyohjelma. Tärkeimmät toiminnot löytyvät kohdista Koon muutos (kuvan koko) ja Tallenna (tarkkuus ja pakkaaminen).
Hinta: ilmainen Linkki PhotoScapen lataussivulle
- Photoshop
Lisää ilmaisia vaihtoehtoja ja työkaluja kuvien muokkaukseen löydät esim. Kamerakoulun listauksesta (linkki sivustolle) ja Digi-kuvan artikkelista (linkki sivustolle).
Kuvien pakkaaminen
Mainitsinkin jo aiemmin pandan, joka toimii yhden tärkeän työkaluni maskottina.
- Tinify / TinyPNG
Verkossa toimiva helppokäyttöinen sovellus, joka puristaa kuvatiedostoista pois kaikki näkymättömät ja turhat painolastit ilman, että kuvien laatu kärsii. Käytän kaikki nettisivuille lataamani kuvat aina viimeiseksi pandan kautta.
Hinta: ilmainen, pro-jäsenyys suurempia latausmääriä varten alk. $39/vuosi Linkki Tinifyn sivustolle - Compress JPEG
En ole käyttänyt tätä henkilökohtaisesti, mutta moni tuttava suosittelee, joten eiköhän tämä toimi aivan yhtä näppärästi kuin pandakin. Nopea testi esimerkkikuvalla pakkasi kuvatiedoston kokoon 207 kt (panda 177 kt) eli pieni ero näillä on.
Hinta: ilmainen Linkki Compress JPEG sivustolle
- Tinify / TinyPNG
Tähänkin työhön on tarjolla runsas valikoima työkaluja, jotka löytyvät helposti Google-haulla.
Sivutaikurin vinkki
Tarvittaessa asennan sivustollesi lisäosan, joka rajoittaa valtavien kuvatiedostojen koon automaattisesti määrättyihin mittoihin.
Näin et voi vahingossa tukkia sivustoasi liian suurilla kuvilla.
