Kuvat: kokojen ja rajauksen käyttäminen

Kuvilla on olennainen rooli sivustossa, mutta joskus on hankalaa määrittää oikeat tiedostokoot, pikselit ja kuvien rajaus. Tämä artikkeli korostaa parhaimpia käytäntöjä kuvien käyttöön sivustollasi.

Pikselit ja tiedostokoko (yleisesti)

Pikseleistä ja kuvasuhteista puhuttaessa ei ole kyse pelkästään editorin suosituksista, vaan kyse on myös sivustosi visuaalisesta ilmaisusta. Pikseleiden ja kuvasuhteiden suositukset perustuvat siksi ensisijaisesti kuvan leveyteen, sillä leveys on tärkeä responsiivisen ulkoasun omaavalla sivustolla, kun taas korkeus on ensisijaisesti ulkoasumieltymys. 

Miksi leveys on tärkeä?

Käyttämällä kuvia, joilla on minimileveys, varmistat että ne näyttävät aina hyviltä responsiivisilla sivustoilla riippumatta kävijän näytön koosta. Tämän takia suosittelemme koko rivin ulottuville kansikuville vähintään 2600 pikselin leveyttä. Itseasiassa numero 2600 on aina hyvä pitää mielessä, jos sinulla on useampi kuva samalla rivillä, koska kuvien yhteen lasketun leveyden on hyvä olla 2600 pikseliä. 

Suositeltu pikselileveys: 2600 pikseliä tai enemmän (72 dpi)

Kiinteiden rivien leveys

Jos sivustossasi on kiinteä rivien asettelu, kuvien mitat ovat luonnollisesti eri, koska kiinteän rivin sarakkeiden leveys on 1140 pikseliä. Älä huoli, sillä voit käyttää samoa kuvia kuin muuttuvissa riveissä, joiden leveys on 2600 pikseliä tai enemmän. Lisää 2600 pikselin kokoinen kuva ja editori luo automaattisesti optimoidun version kiinteille riveille sivuston julkaisun yhteydessä. 

Entä korkeus?

Kuviesi korkeus on myös tärkeä mitta, mutta kyseessä on enemmänkin ulkonäöstä ja mieltymyksistä kuin vuorovaikutteisesta käyttäytymisestä. Tärkein asia pitää mielessä, kun valitset kuviesi korkeuden, on että pidät korkeuden samana kaikille vierekkäisille kuvillesi. Lue alta osuus "kahden, kolmen tai useamman kuvan käyttö", josta saat lisätietoa kuvan korkeudesta.

Huomaa, että rivin ilme ja tuntuma muuttuvat kuvasi korkeuden mukaan, sillä se määrittää sarakkeen korkeuden, johon kuvamoduuli on lisätty. Jos kuva on lisätty rivin tai sarakkeen taustaksi, kuvan korkeuden määrittävät rivin/sarakkeen väliasetukset. Jos haluat näyttää valitusta kuvastasi enemmän, kasvata rivin tai sarakkeen väliä. 

Kuvien rajaaminen: useamman kuvan käyttö rivissä

Editoriin sisältyy sisäänrakennettu kuvaeditori, joka on loistava työkalu varmistamaan, että kuviesi pikselikoko on oikea ilman kolmannen osapuolen sovelluksia rajaukseen ja koon vaihtoon. Kuvaeditori on yksinkertainen käyttää ja sisältää ennalta määritettyjä kokoja, joiden avulla voit tallentaa kuvasi halutun kokoisina ja oikeassa muodossa. 

Kahden, kolmen tai useamman kuvan käyttö

Kun käytät kahta, kolmea tai useampaa kuvaa rivissä, vaatimukset kuville ovat samat kuin yllä. Suosittelemme, että noudatat kahta seuraavaa sääntöä: 

• Ensiksi varmista, että kuviesi kokonaisleveys on 2600 pikseliä tai suurempi responsiivisuuden optimoimiseksi. Jos leveys on alle 2600 pikseliä, ulkoasu saattaa olla erilainen suurilla pöytätietokoneiden näytöillä ja saattaa sisältää ei toivottuja välejä kuvien välillä. Leveyden suuruus riippuu kuvien (sarakkeiden) määrästä rivissä. Jos sinulla on kolme kuvaa vierekkäin, jokaisen kuvan koon pitää olla vähintään 2600/3 = 866 pikseliä. Jos sinulla on neljä vierekkäistä kuvaa, jokaisen pitää olla vähintään 2600/4= 650 pikseliä.

• Toiseksi varmista, että kuvat ovat saman korkuisia varmistaaksesi yhtenäisen ja virtaviivaisen ilmeen.

Kuvasi tiedostokoko

Kuviesi tiedostokoko on tärkeä sivun lataamisen kannalta. Editori pakkaa kuvasi automaattisesti, jotta sivustosi latautuu nopeammin, mutta suosittelemme silti kuvien enimmäiskooksi 200 kt. 

Käytä kuvia, joiden koko on enintään 200 kt.