KUVAT

Kuvat tuodaan julkaisujärjestelmään jpf tai png-tiedostoina. Myös gif käy.

Julkaisujärjestelmässä on laitettu päälle automaattinen kuvien pienennys, ihan varmuuden vuoksi:

• Maksimileveys 1920px
• Maksimikorkeus 1080 px
• Pakkauslaatu 85

Sivustoa nopeuttaa kuvien optimointi edellämainittua pienemmiksi (pikselimitta ja tiedostokoko), VAIKKA C5 osaakin pienentää automaattisesti kuvia mm. mobiililaitteille.

Sopivia kuvakokoja:

Vaakakuvat: leveys 1200 px

Pystykuvat: leveys 720 px TAI korkeus 1080 px

Gallerian etusivun vaakakuva: 720 px x 480 px

Sivuston etusivun iso taustakuva on toteutettu Full Screen Background Image and Overlay lisäosalla. Sen tekijän ohjeet:

• to improve performance, avoid using overly large or poorly optimized images
• for targeting desktop and tablet displays, an image aspect ratio between 4:3 and 16:10 often works well
• a happy medium for quality and size is between 1200 x 900 pixels and 1600 x 1200 pixels (ranging between 100KB and 250KB in size)
• remember to keep your site performance budget in mind

Eli lyhyesti: kuvat kannattaa optimoida huolella ja välttää turhan isoja kuvia. Sopiva kuvasuhde tietokoneille ja tableteille on usein 4:3 ja 16:10 välillä. Sopiva koko voisi olla 1200 x 900 px ja 1600 x 1200 px (leveys x korkeus) väliltä, tiedostokoon ollessa 100–250 Kb.

Leveät ja matalat piirroskuvat hieman kuvan mukaan, maksimileveys 1600 px, maksimikorkeus sivulle sijoitettuna noin 300 px. Huomaa, kuvan ei tarvitse yltää koko sivun leveydelle.

Kuvan voi muokkauksen jälkeen tallentaa Photoshopissa joko "tallenna" tai "save for web". Uudessa Photoshopissa tämäkin oli hieman toisin.

Kuvien järjestely

Kuvat tulevat tiedostohallintaan

Niitä on hyvä ryhmitellä: ryhmillä helpotetaan kuvien hakemista. Galleriat perustuvat ryhmiin.

Kuvien lisääminen sivuille

1) Tekstin joukkoon tekstieditorissa

2) Kuvalohkoina

3) Kuvagalleriat

4) erilaiset "nostokuvat", jollainen on esimerkiksi gallerian etusivun kuva.

Sivun alaosan leveät kuvat

- Kuvalohkossa

- kuvan sijoittaminen vasemmalla, oikealle tai keskelle:

Klikataan Alaosan kuva-nappia (ko. alueen nimi), Muokkaa alueen ulkoasua / painetaan asetukset/hammaspyöränappia Klikkaamalla Custom class ikkunaan, tulee näkyville valittavissa olevat tyylit

Kuvagalleriat - ks oikean palstan video