Summary  
This chapter explains the difference between vector graphics—which use mathematical equations to define scalable shapes without quality loss—and raster graphics, which use fixed pixels and lose quality when scaled.  

General domain of usage  
Graphic design  

Digitaalisessa mediassa käytetään kahta pääasiallista grafiikkamuotoa: **vektorigrafiikka** ja **rasterigrafiikka**.

## Vektorigrafiikka
Vektorigrafiikka luodaan matemaattisten yhtälöiden avulla, jotka perustuvat viivoihin ja muotoihin pikseleiden sijaan. Tämä tarkoittaa, että vektorigrafiikkaa voidaan suurentaa tai pienentää ilman laadun heikkenemistä, sillä ne ovat resoluutiosta riippumattomia. Tavallisia vektorigrafiikan tiedostomuotoja ovat **SVG**. Suoritetaan seuraava esimerkki ja varmistetaan, ettei kuvan laadussa ole eroa, vaikka koko on eri.

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY29kZS0xL3ZlY3RvcitncmFwaGljK2V4YW1wbGUiCiAgYWx0PSJtaWNyb3dhdmUiCiAgd2lkdGg9IjgwIgovPgo8aW1nCiAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdmVjdG9yK2dyYXBoaWMrZXhhbXBsZSIKICBhbHQ9Im1pY3Jvd2F2ZSIKICB3aWR0aD0iMTYwIgovPgo8aW1nCiAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb2RlLTEvdmVjdG9yK2dyYXBoaWMrZXhhbXBsZSIKICBhbHQ9Im1pY3Jvd2F2ZSIKICB3aWR0aD0iMzIwIgovPg==

## Rasterigrafiikka
Rasterigrafiikka puolestaan muodostetaan pikseleistä ja on tarkkuudesta riippuvaista. Tämä tarkoittaa, että kun rasterikuvaa suurennetaan, pikselit tulevat näkyvämmiksi ja kuvan laatu heikkenee. Yleisiä rasterigrafiikan tiedostomuotoja ovat **JPEG**, **PNG** ja **GIF**. Tarkastellaan seuraavaa esimerkkiä. Leveyden kasvaessa pikselit korostuvat enemmän ja kuvan laatu heikkenee.

PGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMva2V0dGxlLnBuZyIKICBhbHQ9ImtldHRsZSIKICB3aWR0aD0iNjQiCi8+CjxpbWcKICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzQ2ODA1MmQtNmQ0Ny00Njc3LWIxZDEtZmIxMWFjZTcxOWIxL21lYWRpYS0lMjYtdGFibGVzL2tldHRsZS5wbmciCiAgYWx0PSJrZXR0bGUiCiAgd2lkdGg9IjEyOCIKLz4KPGltZwogIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jNDY4MDUyZC02ZDQ3LTQ2NzctYjFkMS1mYjExYWNlNzE5YjEvbWVhZGlhLSUyNi10YWJsZXMva2V0dGxlLnBuZyIKICBhbHQ9ImtldHRsZSIKICB3aWR0aD0iMzYwIgovPg==

Yhteenvetona, **vektorigrafiikkaa** käytetään tyypillisesti logoihin, kuvituksiin ja muihin suunnitelmiin, joissa vaaditaan skaalautuvuutta. Sen sijaan **rasterigrafiikkaa** käytetään valokuviin ja muihin suunnitelmiin, joissa tarvitaan korkea yksityiskohtaisuus. Molemmilla grafiikkatyypeillä on kuitenkin omat vahvuutensa ja heikkoutensa.

Mikä grafiikkamuoto soveltuu parhaiten logoihin ja kuvituksiin, joita täytyy suurentaa tai pienentää ilman laadun heikkenemistä?

Mikä grafiikkamuoto soveltuu parhaiten valokuviin ja suunnitelmiin, joissa tarvitaan korkea yksityiskohtaisuus?

Voiko rasterigrafiikkaa suurentaa tai pienentää ilman laadun heikkenemistä?

Opi HTML:n (HyperText Markup Language) perusteet, joka on verkkokehityksen perusta. Tämä aloittelijaystävällinen kurssi kattaa tunnisteet, attribuutit, elementit ja verkkosivujen rakenteen. Hanki käytännön taitoja otsikoiden, kappaleiden, listojen, kuvien, linkkien, lomakkeiden ja taulukoiden luomisessa. Tutustu parhaisiin käytäntöihin, optimointiin ja verkkosivustojen saavutettavuuteen. Aloita verkkokehityksen matkasi HTML:n avulla.

Tutki verkon sisäistä toimintaa. Opi, miten data kulkee verkkojen läpi, tutustu protokollien rooliin ja selvitä IP-osoitteiden ja verkkotunnusten mysteerit. Saa korkeatasoinen ymmärrys siitä, miten verkkoselaimet ja palvelimet kommunikoivat toimittaakseen verkkosisältöä.

Tutustu tunnisteiden voimaan sisällön jäsentämisessä, otsikoista ja kappaleista listoihin ja taulukoihin. Opi, kuinka voit parantaa elementtejä attribuuteilla.

HTML-dokumentin rakenteen ydin. Opi HTML-dokumentin osat, mukaan lukien doctype-ilmoitus, head ja body. Ymmärrä kunkin elementin tarkoitus ja miten ne vaikuttavat verkkosivun kokonaisrakenteeseen.

Tee verkkosivusta houkuttelevampi median, kuten kuvien, äänen ja videon avulla. Työskentele jäsennellyn taulukkomuotoisen datan kanssa taulukoiden muodossa.

Tutustu HTML-lomakkeiden monipuolisuuteen. Opi suunnittelemaan intuitiivisia ja käyttäjäystävällisiä lomakkeita hyödyntämällä keskeisiä käsitteitä ja tekniikoita. Selvitä, kuinka lomakkeet mahdollistavat käyttäjän vuorovaikutuksen ja tietojen lähettämisen verkkosivustoilla.

Vektori- ja rasterigrafiikan ymmärtäminen

Vektorigrafiikka

Rasterigrafiikka

1. Mikä grafiikkamuoto soveltuu parhaiten logoihin ja kuvituksiin, joita täytyy suurentaa tai pienentää ilman laadun heikkenemistä?

2. Mikä grafiikkamuoto soveltuu parhaiten valokuviin ja suunnitelmiin, joissa tarvitaan korkea yksityiskohtaisuus?

3. Voiko rasterigrafiikkaa suurentaa tai pienentää ilman laadun heikkenemistä?