+358 44 251 2827 hello@avosorsa.com

    Alkusanat

    Oikeita perusasioita noudattamalla saavutetaan kuitenkin näyttävä lopputulos ja saavutetaan sivustolle yhdenmikainen ilme. On kuitenkin huomattava, että yhtä oikeaa kuvakokoa ei ole olemassa kaikkien verkkosivujen tai verkkokauppojen tarpeisiin. Tämä johtuu siitä, että kaikki verkkosivut ja verkkopalvelut ovat hieman erilaisia.

    Tässä oppaassa kerromme perusteet kuvien muokkaamiseen ja oikeiden kuvakokojen valintaan kuvasuhteilla 1:1 ja 16:9. Ohje toimii kaikilla Avosorsan toteuttamilla verkkosivuilla. Ohjetta voi vapaasti hyödyntää myös muiden verkkosivujen toteutuksessa.

    Käytetyt termit

    Kuvasuhde: korkeus x leveys
    Sarakke: Kuvalle valittu tila sivulla. Esimerkiksi koko sivun levyinen kuva on 1 sarake ja puolen sivun kuva 1/2 saraketta.
    Responsiivisuus: Kuvat esittäminen eri laitteissa, kuten puhelin tai tabletti.

    Oikea kuvakoko WordPress verkkosivuille tai WooCommerce verkkokauppaan.

    WordPress verkkosivujen kuvissa suosittelemme käytettäväksi kuvasuhdetta 16:9
    WooCommerce verkkokaupan tuotekuvissa suosittelemme käytettäväksi kuvasuhdetta 1:1

    Muita yleisesti käytettyjä kuvasuhteita ovat 4:3 ja 3:4, joista 4:3 on yleisemmin käytetty.

    Kuvasuhde ilmaisee kuvan suhteelliset mitat (leveys ja korkeus). Vasemman puoleinen numero esittää leveyttä ja oikeanpuoleinen korkeutta. Termit ovat ehkä tutumpia TV:n katselusta, vanhat “telkkarit” olivat kuvasuhteeltaan 4:3 ja uudet laajakuvatelevisiot edustavat kuvasuhdetta 16:9.

    Tässä ohjeessa on kuvien käsittely mittasuhteissa 16:9 ja 1:1.

    Vinkki: Ilmaisen kuvasuhdelaskuri voi auttaa sinua löytämään oikeat kuvakoot. Avaa kuvasuhdelaskuri tästä. (englanniksi)

    Kuvatiedoston koko ja erottelukyky

    Optimoi kuvat aina ennen niiden tallentamista WordPress mediakirjastoon.

    Kuvantiedoston koko – Verkkoon ladattavien kuvien oikea koko on noin 30kB – 200kB riippuen kuvasta. Liian suuri kuvatiedoston koko hidastaa latausaikoja ja vähentää tämän johdosta sivuston hakukonenäkyvyyttä.

    Kuvan erottelukyky (dpi) – Verkkoon ladattavien kuvien dpi (erottelukyky) on tyypillisesti 72dpi tai 96dpi.

    Kuvatiedoston muoto (kuvaformaatti) ja optimointi ennen käyttöä

    Kuvien tallennus (kuvafortmaatti) – Kuvat tulee tallentaa .JPG, .GIF tai .PNG -muodossa riippuen kuvan käyttökohteesta:

    JPEG (JPG) – Käytä kun kuvassa on paljon värejä ja yksityiskohtia – taustakuvat, valokuvat jne.

    PNG – Verkkojulkaisuun tarkoitettu. Soveltuu erinomaisesti pieniin kuviin joissa on paljon yksityiskohtia. PNG formaatin etuna on tuki läpinäkyvälle taustalle ja se soveltuu varsinkin logoille.

    GIF – Soveltuu vähän värejä sisältäviin pieniin kuviin sekä videota muistuttaviin animoituihin kuviin.

    Muista kuvien ja mediatiedostojen hakukoneoptimointi

    Muista lisätä kuviesi hakukonetiedot samalla kun lisäät kuvan mediakirjastoon. Ohjeet hakukonetietojen täyttämiseen löydät Täältä.

    Kuvien mittasuhteet (16:9)

    Perusasia on muistaa, että kuvan on oltava vähintään yhtä leveä kuin sarakkeen, johon se asetetaan. Alapuolella on esitetty kuvakoot sarakkeittain. Hyvän lopputuloksen saat tekemällä kuvista oikean kokoisia haluamassasi käyttötarkoituksessa.

    1 Sarake

    3/4 Sarake

    2/3 Sarake

    1/2 Sarake

    1/2 Sarake

    1/3 Sarake

    1/3 Sarake

    1/3 Sarake

    1/4 Sarake

    1/4 Sarake

    1/4 Sarake

    1/4 Sarake

    Lataa Ilmainen kuvankäsittelyohjelma

    Hyvän ja täysin ilmaisen GIMP -kuvankäsittelyohjelman (Windows, Mac, Linux) voit ladata täältä.

    Tarvitsetko apua verkkosivuston tai verkkokaupan kehittämisessä?

    Kaikki ohjeemme ovat yhteensopivia Elegant Themesin teemojen kanssa.

    Mikäli et ole asiakkaamme voit hankkia yhden maailman käytetyimmistä WordPress teemoista itsellesi siirtymällä teeman valmistajan kotisivuille tästä.

    Avosorsa Divi Theme

    Avosorsa Divi Theme

    Avosorsa Divi Theme

    Etkö löytänyt etsimääsi?

    avosorsa on puujalkakäännös avoimen lähdekoodin ohjelmista.

    Pin It on Pinterest

    Share This