Tämän artikkelin tarkoitus on antaa yleiskuva, miksi ja miten kuvaa pakataan verkkoviestintää varten. Käymme myös läpi tärkeimmät tiedostotyypit.
Miksi kuvia pakataan
Mediatiedostoja pakataan, koska pakkaamaattomat mediatiedostot ovat suuria ja niiden siirtäminen verkossa sellaisenaan olisi hidasta ja rasittaisi yhteyksiä tarpeettomasti. Pakkaamisen periaate on , että laatua huononnetaan siten, ettei ihmisen aistit huomaa eroa. Äänistä pyritään poistamaan taajuuksia, joita korva ei kuule ja kuvista poistetaan informaatiota, jota silmä ei pysty havaitsemaan. Pakkaamisen pitäisi olla viimeinen vaihe kuvankäsittelyn työnkulussa, koska pakkaaminen kostautuu esimerkiksi värien säätämisen tai kohinan poistamisen yhteydessä, jos tiedosto on pakattu ennen sitä. Sen vuoksi on tärkeää tehdä kuvan tai äänen käsittelyt mahdollisimman hyvätasoisilla tiedostoilla.
Häviöllinen pakkaaminen
Häviöllinen pakkaus poistaa tietoa kuvasta ja huonontaa kuvan laatua usein havaittavasti. Näin kuvan koko voi pienentyä huomattavasti. Tieto poistuu kuvasta lopullisesti, eikä sitä voi enää palauttaa ennalleen. Häviöllisistä kuvaformaateista tunnetuimpia ovat JPEG ja GIF.
Häviötön pakkaaminen
Häviötön pakkaaminen ei huononna kuvan laatua havaittavasti. Häviöttömässä pakkauksessa poistetaan yleensä vain ylimääräistä, laitteen tai ohjelman luomaa metadataa. Toisaalta häviöttömästi pakatut tiedostot ovat suuria. Häviöttömästi pakattuja tiedostomuotoja ovat esimerkiksi PNG, WebP tai PSD.
Bittikarttagrafiikka
Bittikarttagrafiikka koostuu pikseleistä. Pikselit ovat neliöitä, joille on määritelty väri jollakin värijärjestelmällä. Yleisin värijärjestelmä on RGB-värijärjestelmä, jossa värit ilmaistaan 3 päävärin, punaisen (Red), vihreän (Green) ja sinisen (Blue) avulla. Esimerkiksi täysin punainen väri, jossa punaisen värin määrä on maksimi 255 ja vihreää ja sinistä ei ole ollenkaan, ilmaistaan RGB-arvolla rgb(255, 0, 0). Sama RGB-väri voidaan kertoa myös heksadesimaalimuodossa #FF0000. Kumpaakin edellä mainittua tapaa voidaan käyttää myös verkkosivun CSS-muotoiluissa.
WebP
Tällä hetkellä parhaaksi formaatiksi arvioidaan usein WebP. WebP-formaattiin voi tallentaa myös animaatioita. Googlen mukaan häviöttömästi pakatut WebP-kuvat 26% pienempiä kuin saman kokoiset PNG-kuvat. Häviöllisesti pakatut WebP-kuvat ovat 25-34% pienempiä kuin vastaavan kokoiset JPEG-kuvat.
Wix ja useat muutkin julkaisujärjestelmät konvertoivat järjestelmään ladatut kuvat automaattisesti webP-kuviksi. Tosin kirjoitushetkellä etenkin suuret taustakuvat kannattaa pakata itse, koska tällä tavalla latausaika lyhenee huomattavasti. Toisaalta on vielä useita paljon käytettyjä julkaisujärjestelmiä tai oppimisympäristöjä, joissa ei vastaavaa automattista pakkausta ole ole. WordPress on tukenut WebP formaattia 5.8-versiosta lähtien ja siihen voi asentaa useita lisäosia, joilla kuvat voi automaattisesti konvertoida pienemmiksi, esimerkiksi ShortPixel, Smush, Imagify ja Optimole.
Selaimet tukevat WebP-formaattia hyvin ja pikku hiljaa kuvankäsittelyohjelmatkin näyttävät seuraavan perässä. Photoshop on tukenut WebP-formaattia 23.2. versiosta lähtien. Myös GIMP tukee formaattia hyvin. WebP-fromaattiin muuntavia selainpohjaisia ohjelmistoja löytyy useita. Allekirjoittanut on käyttänyt https://convertio.co -konvertteria, mutta hakusanalla ”webp converter” löytyy hakukoneilla monia muitakin.
PNG
PNG-kuvissa on häviötön pakkaus, joka soveltuu myös kuvankäsittelyyn. PNG:n huono puoli on tiedostojen suuri koko, joka voi hidastaa sivun latautumista huomattavasti. PNG voi olla viivapiirustuksissa jopa pienempi kuin JPEG.
Alla olevan kuvaparin häviötön PNG-kuva on kooltaan 459 KB. Lähes yhtä hyvältä näyttävä häviöllisesti pakattu JPEG-kuva on kooltaan 38 KB, eli noin kymmenesosa PNG-kuvan koosta.
PNG-kuvan tärkeimmät asetukset ovat lomitus, läpinäkyvyys ja bittisyys. Alla voit valita tai klikata haluamaasi kohtaa saadaksesi lisätietoa.
JPEG
JPEG-kuva on kuvaformaateista eniten tuettu. Sitä voi käyttää esimerkiksi kameroissa kuvausformaattina, mutta koska pakkaus on häviöllinen, kuvan laatu huononee välittömästi. JPEG on parhaimmillaan valokuvan pakkaamisessa, mutta huono viivapiirrosten ja tasaisten värialueiden pakkaamiseen.
Alla näkyvien kahden kuvaparin JPEG-kuvan koko on 12 KB, GIF-kuvan 11 KB ja PNG-kuvan 42 KB.
JPEG-kuvan tärkeimmät asetukset ovat laatu ja optimointi. Alla voit valita tai klikata haluamaasi kohtaa saadaksesi lisätietoa.
GIF
GIF-kuva on yksi vanhimmista kuvaformaateista. GIF:in värimäärä on rajoitettu korkeintaan 256 väriin. Yksi tapa pienentää tiedoston kokoa on käyttää esimerkiksi viivapiirroksissa pienempää värimäärää. Tällä sivulla oleva CREATE-kuva indeksoitiin 8 värillä. Indeksoidut värit 256 väripaletti.
Alla olevan kuvaparin häviötön PNG-kuva on kooltaan 459 KB. Häviöllinen GIF-kuva on 128 KB, mutta siitä näkyy selvästi GIF-pakkauksen värien vähentäminen etenkin sateenkaaren värien kohdalla.
Yksi GIF:in ominaisuus on animaatio. Verkossa nähtävät GIF-animaatiot muunnetaan usein webP tai video-formaattiin. Siitä huolimatta animaatioita kutsutaan GIF-animaatioiksi.
GIF-kuvan tärkeimmät asetukset ovat värien määrä, rasterointi, läpinäkyvyys ja lomitus.
Vektorigrafiikka
Vektorigrafiikka muodostuu pisteistä ja niitä yhdistävistä viivoista. Verktorigrafiikkaa voi suurentaa ja pienentää lähes rajattomasti. Grafiikkaa voi myös muokata muuttamalla bezier-käyrien ominaisuuksia. Objektien muodot kuvataan koordinaateilla tai matemaattisilla funktioilla.
SVG
SVG-kuvauskielellä kuvatut vektorikuvat on hyvä formaatti esimerkiksi liikemerkkeihin, koska niitä joudutaan usein suurentamaan erilaisiin kokoihin verkkosivuilla. SVG-kuvia voi tehdä vektorigrafiikkaohjelmilla, kuten Illustrator tai Incscape. SVG on käytännössä XML-tiedosto, joka kuvaa vektorit, kuvat ja tekstin. SVG-kuvia voi ladat ilmaiseksi esimerkiksi osoitteesta https://freesvg.org/.
Julkaisujärjestelmien tuki vaihtelee. Joissakin järjestelmissä voi käyttää SVG-grafiikka sellaisenaan, mutta esimerkiksi WordPressissä SVG-grafiikkaa voi käyttää lisäosilla, koska perusasennuksessa tukea ei ole.
Pakkaamisen opettelu Photoshopilla
Photoshopin Tallenna Webiä varten, englanniksi Save for Web on hyvä toiminto pakkaamisen opettelemiseen. Se löytyy valikkokomennolla Tiedosto/Vie/Tallenna Webiä varten (vanha) (File/Export/Save for Web (Legacy). Toimintoa ollaan todennnäköisesti poistamassa Photoshopista, koska siihen ei löydy kovin tarkkaa ohjeistusta Adoben sivuilta. Toiminto on kuitenkin kätevä työkalu kuvan pakkaustapojen opiskeluun, koska siinä voi vertailla 4 eri tavoin pakattua kuvaa ja niiden tiedostokokoja keskenään.