Kuvia pitää web-sivulla olla, sehän on selvä. Mutta, mikä on kuvan informaatioarvo, onko jokainen kuva varmasti tarpeen? Ainakaan niitä ei saisi olla kovin monta eikä kovin suuria, sillä, kuvat ovat verkkosivun raskainta ladattavaa, ja kun toisaalta tavoitteena tulisi olla sivu joka latautuu nopeasti.
Asiaa auttaa kun valitsee oikean kuvaformaatin ja ottaa huomioon kuvien laadun ja tiedostojen koon. Jokaiselle kuvaformaatille on oma käyttökohteensa. Kuvat pitää tallentaa joko jpg, png tai gif -muodossa.
Kuvaformaatit
*.jpg, *.jpeg, Joint Photographic Experts Group
Häviöllinen kuvan pakkausformaatti. Yleinen digikameroissa, siksi laajalti käytetty. Käytä isommissa ja keskikokoisissa kuvissa.
*.gif, Graphics Interchange Format
Häviötön bittikarttagrafiikan tallennusformaatti. Vain 8-bitinen, joten värejä vain 256. Ei sovi valokuviin. Soveltuu hyvin piirrosten esittämiseen ja animaatioihin.
*.png, Portable Network Graphics
Avoimmuuteen perustuva häviötön tallennusformaatti, joka kehitettiin giffin korvaajaksi. Näytön kaappauskuvat.
Kuvien käyttöoikeuksista
Netissä olevat kuvat eivät ole vapaasti käytettävissä. Jos teet sivuja jotka näkyvät internetissä, varmista, että käyttämäsi kuvat ovat laillisia. Siis käytä vain omia kuvia.
Meidän RasPissa oleva web-serveri ei näy internetissä. Toimitaan silti lain mukaisesti ja käytetään vain luvallisia ja/tai omia kuvia.
Flickr-sivustolla on erillinen creative commons-osio, joka listaa kuvia, joiden käyttö on sallittua tietyin ehdoin. Löydät eri ehdot ja kuvia osoitteesta http://www.flickr.com/creativecommons/.
On myös sivuja, jotka tarkoituksella keräävät materiaalia tiettyihin aiheisiin liittyen. Esimerkiksi sivusto OpenGameArt tarjoaa vapaasti peleissä käytettäviä materiaaleja.
Täältä https://pixabay.com/fi/ löytyy vapaasti käytettäviä kuvia. Google löytää lisää.
Kuvan liittäminen web-sivuun
Kuvat lisätään web-sivuun <img>-elementillä, jolla on attribuuttina src, jonka arvona on kuvan sijainti eli osoite. Jos kuvan laittaa samaan hakemistoon html-dokumentin kanssa, img-elementin src-attribuutin arvoksi riittää kuvan nimi. Käytämme ainakin aluksi sitä.
<img src="UKK.png" alt="Urkin kuvaa ei löydy">
HTML5 standardissa kuvan tag on yllä olevan rivin mukainen. Alt-lisämäärettä on hyvä käyttää. Jos jostain syystä kuvaa ei löydy, linkki väärä tai vanhentunut, jne, niin silloin alt-määritteen teksti tulee kuvan paikalle. Jos kuva sijaitsee eri kansiossa, niin tarvitaan polkutieto. HTML5 standardissa kuvan tagi on alla olevan koodimallin mukainen.
Mallikoodissa kuva määritetään kahdella eri tavalla:
1. Kuvan koko voidaan määritellä WIDTH- ja HEIGHT-attribuuteilla. Jos käytössä on CSS-tiedosto, se voidaan tehdä siellä.
<img src="esimerkkikuva.png" alt="esimerkkikuva" width="leveys" height="korkeus">
Määreillä width ja height määritellään kuvan koon pikseleinä jolloin kuva aukeaa nopeammin:
2. Kuva esitetään sellaisena jona se esiintyy kansiossa.
Klikkaa kuva suuremmaksi.
Kuvan tarkkuuden pitäisi olla nettisivuille noin 72 dpi - 150 dpi eli 72-150 pistettä tuumalle.
Klikkaa kuva suuremmaksi.