Nykyaikaiset sivut ja verkko-osat on suunniteltu reagoimaan täysin eri laitteisiin, mikä tarkoittaa, että verkko-osissa käytettävät kuvat skaalautuvat eri tavalla sen mukaan, missä ne näkyvät, mitä asettelua käytetään ja millä laitteella niitä katsellaan. Esimerkiksi nykyaikaiset sivut on suunniteltu näyttämään hyvältä mobiililaitteissa, ja automaattinen kuvan skaalaus auttaa luomaan tämän houkuttelevan käyttökokemuksen.
Mitkä kuvakoot toimivat parhaiten?
Responsiivisen sivun suunnittelun vuoksi kuvan päällä ei ole tiettyä pikselimuotoista korkeutta tai leveyttä, joka varmistaisi, että kuva säilyttää tietyn muodon eri laitteissa ja asetteluissa. Kuvien kokoa ja kuvaa rajataan automaattisesti, jotta ne näkyvät parhaalla mahdollisella tavalla eri laitteilla ja asetteluilla. On kuitenkin olemassa joitakin ohjeita, joiden avulla voit varmistaa, että kuvat näyttävät upeilta sivuillasi.
Sopivien kuvakokojen löytäminen sivulle riippuu seuraavista tekijöistä:
- Kuvasuhde: kuvien korkeuden ja leveyden välinen suhde
- Sarakkeen asettelu: sivun sarakkeiden tyyppi ja määrä
- Verkko-osan asettelu: asettelu, jonka valitset verkko-osalle, jossa kuvaa käytetään
Kuvasuhde
Kuvasuhde on kuvien korkeuden ja leveyden välinen suhde. Se ilmoitetaan yleensä kahdella luvulla, kuten 3:2, 4:3 tai 16:9. Leveys on aina ensimmäinen numero. Suhde 16:9 voi olla esimerkiksi 1600 kuvapistettä leveä ja korkeus 900 kuvapistettä. Tai se voi olla 1920 x 1080, 1280 x 720 tai mikä tahansa muu leveys-korkeusyhdistelmä, jonka voi laskea vastaavan 16:9. Löydät kuvasuhdelaskimia verkosta ja joistakin kuvankäsittelytyökaluista, joiden avulla voit määrittää kuviesi kuvasuhteet.
Useimmissa tapauksissa modernien verkko-osien kuvat toimivat parhaiten eri asetteluissa ja laitteissa, kun niiden kuvasuhde on joko 16:9 tai 4:3 asettelusta riippuen.
Sarakkeiden asettelut
Sivulle voidaan määrittää osia, jotka sisältävät erilaisia saraketyyppejä ja asetteluja, kuten täysleveitä sarakkeita, yhden sarakkeen, kaksi palstaa, kolme palstaa tai kolmasosan oikeaa saraketta. Yleissääntönä kuville, joiden odotetaan täyttävän sarakkeen leveyden, on, että niiden on oltava vähintään yhtä leveitä kuin sarake, johon ne on sijoitettu. Esimerkiksi yhdessä sarakkeessa olevan Kuva-verkko-osan kuvan pitäisi olla vähintään 1 204 kuvapistettä leveä.
Seuraavassa on kunkin sarakeasettelun leveysohjeet:
| Asettelu | Leveys kuvapisteinä |
|---|---|
| Leveä sarake | 1920 |
| Yksi sarake | 1204 |
| Kaksi saraketta | 586 per sarake |
| Kolme saraketta | 380 per sarake |
| Kolmasosan vasen sarake | 380 vasemmalle sarakkeelle; 792 oikeanpuoleiseen sarakkeeseen |
| Kolmanneksen oikea sarake | 792 vasemmanpuoleisessa sarakkeessa; 380 oikeanpuoleiseen sarakkeeseen |
Koska sivut reagoivat visuaalisesti, täysleveiden sarakkeiden kuvat näkyvät aina näytön koko leveyden kokoisina automaattisesti näyttökoon mukaisen automaattisen korkeuden perusteella.
Muihin sarakeasetteluihin sijoitettujen kuvien korkeus määräytyy kuvasuhteen mukaan. Seuraavassa ovat korkeuden ja leveyden ohjeet 16:9- ja 4:3-kuvasuhteille (pyöristettynä ylös/alas lähimpään kuvapisteeseen). Näin voit pitää kuvat mobiililaitteille sopivalla leveydellä ja korkeudella, esimerkiksi:
| KUVASUHDE ASETTELU |
16 x 9 Leveys x korkeus kuvapisteinä |
4 x 3 Leveys x korkeus kuvapisteinä |
|---|---|---|
| Yksi sarake | 1204 x 677 | 1204 x 903 |
| Kaksi saraketta | 586 x 330 | 586 x 439 |
| Kolme saraketta | 380 x 214 | 380 x 285 |
| Kolmasosan vasen sarake | 380 x 446 vasemmassa sarakkeessa; 792 x 446 oikeanpuoleisessa sarakkeessa | 380 x 594 vasemmanpuoleisessa sarakkeessa; 792 x 594 oikeanpuoleisessa sarakkeessa |
| Kolmanneksen oikea sarake | 792 x 446 vasemmassa sarakkeessa; 380 x 446 oikeanpuoleisessa sarakkeessa | 792 x 594 vasemmassa sarakkeessa; 380 x 594 oikeanpuoleisessa sarakkeessa |
WWW-osien asettelut
Myös käyttämiesi verkko-osien asettelut vaikuttavat kuvien skaalautumiseen. Seuraavissa esimerkeissä esitellään eri verkko-osia sekä joitakin käytettävissä olevia asetuksia ja kuvasuhteita.
| WWW-osa | Kuvasuhteet |
|---|---|
| Hero-verkko-osa | Ruudut ja kerrokset -asettelujen kuvasuhteet ovat seuraavat:
|
| Korostetun sisällön verkko-osa | 16:9 on karuselli-, filminauha- ja ruudukkoasettelujen kuvasuhde. Tässä on esimerkki 16:9-kuvasuhteesta. Ensimmäisessä kuvassa on filminauhan asettelu ja toisessa ruudukon asettelu: 
|
| Kuvan verkko-osa | Kuvat laajenevat verkko-osan sisältävän osan leveyteen. Tässä on esimerkki Kuva-verkko-osassa olevasta kuvasta, joka käyttää kuvasuhdetta 16:9. 
Voit myös muuttaa kuvasuhdetta tai rajata ne vapaalla kädellä kuvanmuokkaustyökalun avulla tai suurentaa tai pienentää kuvaa koonmuuttokahvojen avulla. 
|
| Kuvavalikoiman verkko-osa | Eri asetteluissa voidaan käyttää seuraavia kuvasuhteita:
|
| Uutiset-verkko-osa | Asettelusta riippuen Uutiset-verkko-osan kuvat voivat olla 4:3-, 16:9- tai 21:9-kuvasuhdetta. Tässä on esimerkki kuvista päätarinassa ja karuselli-asettelussa: 
|
| Sivun otsikkoalue | Kuvat näyttävät parhaimmilta, kun ne ovat vaakasuuntaisia, kuvasuhteiltaan 16:9 tai suurempia ja ne ovat kooltaan vähintään 1 Mt. Muista myös asettaa painopisteeksi kuvan tärkeimmän osan pitäminen näkyvissä erityisesti silloin, kun kuvaa käytetään pikkukuvissa, uutisasetteluissa ja hakutuloksissa. Esimerkki (alkuperäinen kuva 16:9), jossa korostuspiste on asetettuna kaiuttimeen: 
|
| Sivun pikkukuva | Sivujen pikkukuvat näkyvät paikoissa, kuten hakutuloksissa, korostetun sisällön tuloksissa ja uutisjulkaisuissa. Pikkukuva tulee oletusarvoisesti sivun otsikkoalueelta tai sivun ensimmäisessä järjestyksessä olevasta verkko-osasta (kuten sivun asettelun vasemmasta yläkulmasta). Voit ohittaa oletusasetuksen ja vaihtaa sivun pikkukuvan. Kun teet niin, on parasta käyttää kuvaa, jonka kuvasuhde on 16:9. Esimerkki (alkuperäinen kuva 16:9): 
|
| Pikalinkkien verkko-osa | Pikalinkkien verkko-osassa on kuusi erilaista asettelua. Tässä ovat esiasetetut kuvasuhteet:
|
Vihje
Kun lisäät kuvan sivun otsikkoalueeseen tai Hero-verkko-osaan, kohdistuksen asettaminen on kätevämpää siihen kuvan alueeseen, jonka haluat aina näkyvän. Lisätietoja näiden kahden tilanteen keskipisteen määrittämisestä on artikkeleissa Hero-verkko-osan käyttäminen ja Modernien sivujen luominen ja käyttäminen SharePoint-sivustossa.
Sivusto-otsikon kuvasuositukset
Sivujen lisäksi voit halutessasi lisätä mukautettuja logoja tai kuvia laajennetussa asettelussa. Tässä ovat kokosuositukset kyseisille elementeille.
| Elementti | Kuvaus | Suositus Leveys x korkeus kuvapisteinä |
|---|---|---|
| Sivuston logo | Suurempi logo, joka voi olla muu kuin neliön muotoinen ja läpinäkyvä riippuen ladatusta mallista. | 192 x 64 Muoto: PNG, JPEG, SVG (SVG:tä ei sallita ryhmään liitetyissä sivustoissa) |
| Sivuston logon pikkukuva | Neliölogon pikkukuva, jota käytetään, jos sivuston logoa ei ole ladattu, tai jos square-muotoa edellytetään. Tämä elementti on pakollinen. |
64 x 64 Muoto: PNG, JPEG, SVG (SVG:tä ei sallita ryhmään liitetyissä sivustoissa) |
| Laajennetun asettelun sivuston logo | Laajennetussa ylätunnisteasettelussa on laajennettu sivuston logon leveys. | 300 x 64 Muoto: JPEG, PNG, SVG |
| Laajennettu asettelu -taustakuva | Uusi taustakuva, jota voidaan käyttää laajennetun otsikon kanssa. | 2560 x 164 Tiedostomuoto: JPEG, PNG |