Kuvan pakkaaminen verkkoa varten

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.

Bittikarttagrafiikka koostuu pikseleistä ja sietää huonosti suurentamista ja pienentämistä.

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, mutta kuvankäsittelyohjelmista esimerkiksi Photoshop ei tue sitä sellaisenaan. Photoshopille on olemassa WebP-plugineja, esimerkiksi WebPShop, mutta niiden käyttö ei ole sujunut aina ongelmitta. Sen sijaan esimerkiksi 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.

Jaa kirjoitus muille

Leave a Comment