Raskaat kuvat

Haaste - nettisivut kevyeksi

Sain tehtäväkseni selvittää miksi eräät kotisivut lataantuvat kovin hitaasti ja käyttäjiltä on tullut palautetta käytön raskaudesta ja takkuamisesta. Toiveena oli:

• kevyemmät ja nopeammin lataantuvat kotisivut ilman uusien sivujen tekemistä, eli optimoimalla olemassa olevaa sivustoa

• kuvamäärän pitäminen samana (eli kuvista ei haluttu luopua)

Vaihtoehdot

Vaihtoehtoisia ratkaisuja saatavilla useita

Raskauden aiheuttajana voi olla useita eri syitä. Piti ensin selvittää nämä asiat:

• Kuka ylläpitää sivujasi?
  Onko kotisivut ylläpidossa jollain vanhalla ja halvalla paikallisella palveluntarjoajalla, jonka nettikaista ei mahdollista nopeaa liikennettä sivustolle/sivustolta? Tällöin en pysty paljoa designerina auttamaan muuta kuin kertomaan, että helpoin tapa on vaihtaa palveluntarjoajaa ja ottaa palvelu, jossa sivut ovat pilvessä ja täten sivuston jakelun kaikille käyttäjille ympäri maailman hoitaa palvelun tarjoaja (tai hänen kautta hankkimansa CDN palvelu).

• Mikä on kotisivujen toteutusteknologia?
  Onko kyseessä ehkä vanhat PHP pohjaiset sivut, onko sivupohjissa paljon koodia jota ei edes tarvita ja käytetä ja jotka ovat tulleet ns. "kaupan päälle" jonkun palvelun käyttöön oton kautta? Tällöinkään en designerina pysty muuta auttamaan, kuin kertomaan, että olisi syytä käydä koodia läpi ja poistaa kaikki tarpeettomat ja turhat koodikirjastot, jotka eivät ole käytössä. Tai sitten päätyä ensimmäisen ongelman ratkaisuvaihtoehtoon, eli vaihtaa palveluntarjoajaa modernimpaan ylläpitäjään.

• Onko sivuston sisältö raskas?
  Eli onko paljon  isokokoisia kuvia? Tai peräti videoita upotettuna omalle serverille? Tässä minä designerina pystynkin jo auttamaan melkoisesti ja siihen ratkaisussani seuraavaksi keskitynkin.
  
  

Kun sivun sisältö on raskasta

Rupesin listaamaan ne vaihtoehdot, jotka olivat jo itselleni entuudestaan tuttuja kotisivujen kuvasisällön optimoisen yhteydessä. Näitä ovat mm.

• kuvien tallentaminen WebP formaattiin (esim. Photoshop, Pixlr, Birme.net)

• kuvien kompressointi sitä varten suunnitelluilla työkaluilla (esim. ImageOptim, Compress Now, Tiny PNG, Optimizilla jne.)

• kuvien kompressointi omilla työkaluilla (esim. Photoshop tai joku muu kuvien muokkausohjelma omalla koneella)

• kuvien kompressointi ohjelmallisesti käyttäen komentorivi scriptiä (esim. https://css-tricks.com/converting-and-optimizing-images-from-the-command-line/)

Entä muut vaihtoehdot?

Kenties tehokkain tapa optimoida kuvia, varsinkin jos ne ovat graafisia symboleita tai vektoripohjaisia yksinkertiaisia kuvia, on tallentaa ne kompressoidussa SVG-formaatissa. Tällöin kuvat eivät ole enää bitmap pohjaisia kuvia, vaan puhtaasti sivupohjaan upotettavaa koodia, jotka kaupan päälle näyttävät hyvältä kaikessa koossa huolimatta siitä katsotaanko niitä tietokoneella, älylaitteella tai 100" telkkarilla. Iso miinus on se, että tämä formaatti ei ole tuettu kaikilla vanhemmilla selaimilla. Myöskään kaikki nettisivujen ylläpito-ohjelmat eivät anna käyttää tätä formaattia, vaan ne pitää upottaa koodina sivupohjaan joka usein tarvitsee ymmärrystä miten tämä tapahtuu. SVG ei myöskään ole optimaalinen monimutkaisissa kuvissa koska samalla upotettavan koodin määrä kasvaa merkittävästi.

Jos taas sivustosi on raskas sen takia, että sisältönä on isoja videotiedostoja ja ne on upotettuna samaiselle palveluntarjoan palvelimelle suosittelen tällöin suoraan siirtämään videot sitä varten suunnitelluille alustoille ja upottamaan videot katsottavaksi sivuilla. Tällöin videon katsominen ei syö kotisivujesi kaistaa, joka hidastaa kaikkien sivulla kävijöiden käyttökokemusta, vaan sen videon katsomisosuuden hoitaa videon ylläpitäjän palvelimet joissa on valmiina videon bufferointi (puskurointi), oikeat videokodekit kullekkin alustalle, räätälöidyt videoversiot yhteysnopeuden mukaan jne. Tällaisia palvelun tarjoajia ovat mm. YouTube, Vimeo, Uscreen, Wistia, JW Player jne.

Ratkaisu

Päädyin lopulta käyttämään ImageOptim -palvelua. 

Syynä valintaani oli se, että sovellus on ilmainen ja on ladattavissa myös koneelle, koska en tykkää latailla online palveluihin kuvia kun en tiedä mihin jäävät roikkumaan. Myöskin käyttö on todella helppoa isompienkin kuvamäärien kanssa kerralla työskennellessä. Idea on yksinkertainen:

Plussat

• ilmainen

• nopea käyttää

• kevyt sovellus ja tuki Mac OS, Win, Linux

• löytyy myös Sketch plug in

• tietoturvallinen

• poistaa kuvista kaiken ylimääräisen metadatan, kuten paikkatiedot jne.

• ison kuvamäärän massatoiminto mahdollisuus

• tuki kuvaformaateille: JPEG, PNG ja GIF sekä SVG

• mahdollisuus vaikuttaa kuvakompression määrään

• mahdollisuus kompressoida joko alkuperäiset tai luoda duplikaatit 

Miinukset

• En varsinaisesti keksinyt yhtään miinusta palvelusta. Ehkä juuri siksi valitsinkin tämän.