Kotisivuilla käytettävien kuvien vaarat

Kuvia voi käyttää moneen tarkoitukseen

Kotisivuilla käytettävät kuvat ovat keino välittää tietoa ja luoda brändin mukaista tunnelmaa.  Kuva voi olla esimerkiksi taustakuvana, sivusto-otsakkeessa pääkuvana, linkkilaatikon kuvituksena, tekstin joukossa tai muodostaa muiden kuvien kanssa kokonaisen gallerian.

Kuvat voivat aiheuttaa ongelmia

Jos kotisivut on toteutettu WordPressillä, niin sivuston eri osissa käytettyjen kuvien vaihtaminen onnistuu useimmiten parilla klikkauksella. Äkkiseltään voisikin ajatella, kun kuvien vaihtaminen WordPressissä on niin helppoa, ettei siihen liity mitään ylimääräisiä temppukertoimia. Huolimaton kuvien lataaminen voi kuitenkin johtaa ongelmiin.

Kuvat vievät kaiken tilan ja hidastavat sivustoa

Suurin ongelma, mikä kuvien lataamisen myötä tulee esiin, on tallennustilan loppuminen. Monissa tapauksissa kotisivut ovat asennettu edulliseen kotisivutilaan eli webhotelliin. Edullinen kotisivutila on yleensä ihan riittävä peruskotisivuja varten, mutta edullisuuden kääntöpuolena on usein vähäinen tallennustila. Kotisivutilaan ei yksinkertaisesti vain mahdu kaikki ladattavaksi tarkoitetut kuvat. (Tallennustilaa vievät kuvien lisäksi itse kotisivut ja usein myös sähköpostilaatikko/t.)

Tallennustilan loppumisen lisäksi ongelmana on, että sivuston latausnopeus voi hidastua kuvien käytön myötä. Sivuston hidastuminen on ongelmallista sekä hakukoneoptimoinnin että käyttäjäkokemuksen kannalta. Google ja muut hakukoneet arvostavat nopeasti latautuvia sivustoja ja palkitsevat nopeudesta paremmilla hakusijoituksilla. Käyttäjät arvostavat myös nopeaa sivustoa ja hylkäävät sivuston, jos se ei lataudu parissa kolmessa sekunnissa.

Liian suurien kuvien käyttäminen ongelmien syynä

Syy näihin molempiin on tiedostokooltaan liian suurien kuvien käyttäminen sivustolla.  Suuria kuvia ovat kaikki ne kuvat, joiden tiedostokoko mitataan megatavuissa (MB). Kun tiedostokoko on kymmeniä tai joitain satoja kilotavuja (kt), niin ollaan jo turvallisemmilla vesillä.  Isot pienet tiedostot, eli 500 kt – 1 MB, ovat harmaalla alueella ja niidenkin käyttöä olisi hyvä rajoittaa sivustolla.

Suoraan kamerasta ladatut kuvat on usein helppo tunnistaa kotisivuilla. Tyypillisesti monen megatavun kokoiset kuvat tulevat näkyviin vaakaviiva kerrallaan. Kuvagallerian tapauksessa galleria on pitkään kuvaton kunnes kuvat alkavat yksitellen välkähdellä esiin.

Älä lataa kuvia kotisivuille suoraan kamerasta

Käytännössä liian suuret kuvat ovat niitä kuvia, jotka on ladattu sivustolle suoraan kännykkä-, digi- tai järjestelmäkamerasta. Myös painoon tarkoitetun materiaalin, esimerkiksi sanomalehtimainos, käyttäminen sellaisenaan kotisivuilla on aivan yhtä turmiollista.

WordPress tekee kuvasta monta kokoversiota

WordPress lisää myös oman muuttujansa tallennustilan nopeaan täyttymiseen. Jos WordPressin oletusasetuksia ei ole muutettu, niin järjestelmä tallentaa jokaisesta ladatusta kuvasta viisi erikokoista versiota.

Kuvakoot ovat

• alkuperäinen kuva (full),
• iso (large),
• keski-iso (medium_large),
• keskikokoinen (medium) ja
• esikatselukuva (thumbnail).

Näiden lisäksi voi tietysti olla lisäosien (esimerkiksi WooCommerce-verkkokauppa) tai ulkoasuteeman määrittelemiä kuvakokoja, jotka myös tallennetaan kuvan lataamisen yhteydessä kotisivutilaan.

Eri kokovaihtoehdot ovat hyviä siinä mielessä, että eri käyttötarkoituksia varten löytyy sopivan kokoinen kuva. Esimerkiksi uutislistauksessa ei aina tarvitse käyttää täysikokoisia kuvia vaan siihen riittää pienet esikatselukuvat. Jos sivustolla ei kuitenkaan käytetä kuin vain paria eri kuvakokoa, niin kaikki muut koot ovat turhia tilansyöjiä.

Käsittele kuvat ennen sivustolle lataamista

Isojen kuvien aiheuttamat ongelmat on mahdollista ennaltaehkäistä käsittelemällä kuvat ennen niiden lataamista sivustolle. Kuvankäsittelyyn on olemassa monia eri ohjelmia. Yksinkertaisimmillaan käsittelyn voi tehdä Windowsin tutulla Paint-ohjelmalla, jolla voi muuttaa kuvakokoa pienemmäksi.

Kuvia voi myös muokata erityisillä kuvankäsittelyohjelmilla kuten GIMP:llä tai Photoshop:lla. Joidenkin digi- ja järjestelmäkameroiden mukana voi myös tulla kameravalmistajan oma muokkausohjelma, jolla kuvankäsittely luonnistuu aivan yhtä hyvin.

Kuvien käsittely onnistuu myös verkossa

Jos omalta tietokoneelta ei entuudestaan löydy sopivaa ohjelmaa kuvien muokkausta varten, tai sellaista ei halua koneelleen asentaa, niin kuvankäsittelyn voi tehdä tänä päivänä myös verkossa. Hakukoneiden kautta löytyy moniakin eri vaihtoehtoja hakulauseella ”free online photo editor”.

Yksi verkosta löytyvä helppokäyttöinen kuvankäsittelyohjelma on Canva Photo Editor. Sen avulla voi hieman säätää kuvan värejä, rajata, kääntää ja muuttaa kuvan kokoa parilla klikkauksella. Canvan kuvamuokkain toimii täysin selaimessa, eikä sitä varten tarvitse ladata tai asentaa mitään. Ohjeet Photo Editorin käyttämiseen löydät kuvankäsittelyartikkelistamme.

Rajoita WordPressin luomien kokoversioiden määrää

WordPressin aiheuttamaa kuvatulvaa voi hillitä muuttamalla sivuston Media-asetuksia ( pääkäyttäjätunnuksella Asetukset > Media). Kun muuttaa keskikokoisen ja ison kuvakoon arvot nolliksi, niin WordPress ei enää tallenna näitä kahta oletuskokoa kuvan lataamisen yhteydessä. Pienintä oletuskokoa, esikatselu, käytetään usein sivustoilla, joten sitä ei välttämättä tarvitse poistaa käytöstä.

Keski-isolle oletuskoolle ei vielä löydy asetusta Media-sivulta, joten sen käytöstä poistaminen vaatii parin koodirivin lisäämisen teeman functions.php -tiedostoon.

add_filter( 'intermediate_image_sizes', function( $sizes )
{
    return array_filter( $sizes, function( $val )
    {
        return 'medium_large' !== $val; // Filter out 'medium_large'
    } );
} );

Lähde: wordpress.stackexchange.com

Teeman ja lisäosien mahdollisten lisäämien muiden kuvakokojen poistaminen vaatii yleensä myös koodimuutoksia. Jos itseltä ei löydy tarvittavaa osaamista niiden tekemiseen, niin on hyvä olla yhteydessä sivuston kehittäjään tai FissioMediaan.

Järkevä kuvien käyttö säästää tilaa ja sekunteja

Kuvien käyttäminen kotisivuilla voi aiheuttaa erilaisia harmeja, jotka ovat kuitenkin täysin ennaltaehkäistävissä. Kotisivutilan tallennuskapasiteetin saa riittämään pidemmäksi aikaa, kun lataa sivustolle tiedostokooltaan pieniä kuvia ja WordPressin kohdalla rajoittaa kuvaversioiden määrää. Hakukoneet ja käyttäjät kiittävät, kun sivuston latautumista ei tarvitse kuvien takia odotella sekuntitolkulla.

Kuvat ovat vain yksi osatekijä sivuston nopeudessa

On hyvä kuitenkin muistaa, että kuvat ovat vain yksi sivuston latausnopeuteen vaikuttava tekijä. Esimerkiksi, mitä kotisivutilaa käyttää, vaikuttaa myös nopeuteen samoin kuin koko kotisivukokonaisuus. Kotisivujen latausnopeutta voikin kasvattaa muun muassa valitsemalla huippuunsa viritetyn webhotellin, käyttämällä välimuistia ja sisällön jakeluverkosta (CDN, Content Delivery Network).

Kuvat ovat kuitenkin usein se helpoin ja nopein tapa vaikuttaa sivujen latausnopeuteen.

Artikkelikuva Igor Miske, Unsplash