Kuvat ja grafiikka verkkosivuilla 2008-01-12 17:46

Varsinaiset sisältökuvat lisätään sivuille XHTML-elementtinä img. Grafiikat ja logot kannattaa useimmiten lisätä taustakuvana CSS:n background-ominaisuudella. Sivun lopussa linkkejä kuvapankkeihin ja erilaisille grafiikkasivuille.

Kuvan koko ja tiedostotyyppi

Valokuvat kannattaa tallentaa JPG-tiedostona, joka tukee kaikkia värejä. Grafiikat joissa on tasavärisiä pintoja ja erottuvia viivoja kannattaa tallentaa GIF-tiedostona jonka pakkaus on häviötöntä. GIF tukee myös läpinäkyvyyttä toisin kuin JPG, mutta GIF-tiedostoon voi tallentaa maksimissaan 256 eri väriä. Nykyään jo varsin hyvin selainten tukema PNG sopii molempiin tarkoituksiin. Se yhdistää JPG:n ja GIF:n ominaisuudet, ja siinä on omia lisäominaisuuksia. PNG:n pakkaus on häviötöntä kuten GIF:ssä, se tukee kaikkia värejä kuten JPG, lisäksi PNG:ssä on täydellisen läpinäkyvyyden lisäksi mahdollista määrittää jokin pinta osittain läpinäkyväksi.

Kuvaformaatit

Kuvatiedostotyyppien esittely esimerkkikuvineen.

Mitä eroa on gif:llä, jpg:llä ja png:llä?

Verkossa käytettävistä kuvaformaateista lyhyesti.

When to use GIFs or JPEGs

Demo GIF- ja JPG-tiedostotyyppien käytöstä.

JPG, PNG or GIF: How to Choose an Image Format for Screenshots

Formaatit kuvankaappauksille: PNG tekstille ja grafiikalle, JPG valokuvamaisemmille.

Läpinäkyvyys

Transparent GIFs

Demo läpinäkyvyyden toteuttamisesta kuville.

Understanding Antialiasing and Transparency

Kuvan läpinäkyvyydestä ja reunojen pehmennyksestä.

Valokuvat

Tarkkaa ohjetta kuvan koolle web-sivulla ei voi antaa, sillä oikea koko on sivukohtainen, ja riippuu mm. kuvaa ympäröivän tekstipalstan leveydestä. Sopivaa kuvan kokoa voi kuitenkin lähteä etsimään asettamalla pidemmän sivun pituudeksi 300-400 pikseliä. Kuvan näyttötarkkuutta (72 ppi) ei tarvitse asettaa, sillä kuva näytetään Internet-sivulla pikselikokonsa (resoluutionsa) mukaan.

Ks. myös ohje kuvan reunojen varjostuksesta GIMP-kurssin sivuilta.

Grafiikka

Taustagrafiikka navigointipainikkeille

Katso navigointipainikkeiden tekeminen sivulta Navigointi.

a) Taustakuvaa siirtämällä

Navigointilistoista saa helposti painikkeita lisäämällä taustaksi väriliukuman (gradient). Grafiikasta tehdään leveydeltään 1px, ja sitä kopioidaan leveyssuunnassa. Korkeudeltaan se voi olla esimerkiksi 1,5 kertaa navigointipalkin korkeuden verran, jolloin sitä voidaan esimerkiksi siirtää :hover-valitsimella kun hiiri viedään navigoinnin päälle, painikkeen muuttuessa käyttäjän näkökulmasta tummemmaksi tai vaaleammaksi. Tiedosto tallennetaan gif-tiedostona.

#navigointi a { 
	background-image: url(grafiikka/gradient30px.gif);
	background-repeat: repeat-x
	background-position: left bottom; 
}
#navigointi a:hover { 
	background-position: left top; 
} 

b) Kahden eri elementin päällekkäisenä taustakuvana

Grafiikan siirtäminenkin aiheuttaa vilkkumista Internet Explorerin perusasetuksilla. Silloin :hover-grafiikka kannattaakin sijoittaa a-elementin alla olevalle elementille taustakuvaksi.

XHTML-asiakirjassa navigointilistan a-elementti ympäröidään ylimääräisellä div-elementillä.

<div id="navigointi">
<ul>
    <li><div><a href="esim1.html">Eka</a></div></li>
    <li><div><a href="esim2.html">Toka</a></div></li>
    <li><div><a href="esim3.html">Kolmas</a></div></li>
</ul>
</div>

a-elementin taustakuva piilotetaan :hover-efektin yhteydessä, ja alla olevan elementin tausta tulee esiin.

/* hover-taustakuva laitetaankin ylimääräiselle div-elementille */
#navigointi li div { 
	background-image: url(kuvat/gradient_omppu.gif);
	background-repeat: repeat-x;
	background-position: left top; 
}

/* painikkeiden normaali tausta */
#navigointi li a { 
	background-image: url(kuvat/gradient_omppu.gif);
	background-repeat: repeat-x;
	background-position: left bottom; 
}

/* hover-valitsimella a:n taustakuva ja väri pois, 
	jolloin div:n tausta näkyviin */
#navigointi li a:hover {
	background-image: none;
	background-color: transparent;

}

Fast Rollovers Without Preload

Navigoinnin taustagrafiikat latautuvat nopeammin yhtenä tiedostona.

Minimize Flickering CSS Background Images in IE6

Ratkaisuja taustagrafiikoiden vilkkumiselle.

Pyöristetyt kulmat

Pyöristettyjen kulmien toteuttaminen pelkällä CSS:llä vaatii yleensä vähintään kaksi kuvatiedostoa jotka liitetään taustakuviksi itse elementille ja esimerkiksi sen sisälle liitetylle ylimääräiselle span-elementille, tai ylimääräisiä div-elementtejä.

CSS Rounded Corners 'Roundup'

Eri tapoja toteuttaa pyöristettyjä kulmia web-sivuilla.

Liquid round corners

Skaalautuvat pyöristetyt kulmat ylimääräisten div-elementtien avulla.

Mountaintop Corners

Pyöristettyjen kulmien tekeminen grafiikkaan. Ohjeeseen liittyvät esimerkit: #1, #2, #3.

Rounding Tab Corners

Pyöristetyt kulmat kahdella kuvalla ja CSS:llä.

Luettelomerkkikuvake

CSS:ssä tarjolla olevien luettelomerkkien sijaan voi käyttää myös omaa grafiikkaa luettelomerkkeinä.

ul {
	list-style-image: url(esimerkki.gif);
}

Tekstin korvaaminen kuvalla

Koska erikoisempien fonttien yhteydessä ei voi laskea sen varaan, että sivun käyttäjällä on toivottu fontti, voidaan esimerkiksi otsikoissa korvata tekstiä kuvatiedostolla. Saavutettavuuden kannalta ei ole toivottavaa käyttää XHTML-asiakirjassa img-elementillä liitettyjä kuvia tekstin sijaan. Alla muutamia linkkejä joissa kerrotaan kuinka otsikon tekstin voi piilottaa, ja tilalla näytetään taustakuva. Nämäkään menetelmät eivät ole saavutettavuuden kannalta täysin ongelmattomia.

Using Background-Image to Replace Text

Perinteinen FIR-menetelmä tekstin korvaamiseksi kuvalla. Katso myös huomautukset.

Revised Image Replacement

Uudempia menetelmiä tekstin korvaamiseksi kuvalla.

Kirjanmerkkikuvake favicon

Sivuille voi liittää myös oman 16x16 pikselin kokoisen kuvatiedoston, joka näkyy selaimen osoiterivillä, ja kirjanmerkin kuvakkeena. favicon.ico-tiedosto liitetään sivustoon lisäämällä jokaisen sivun head-elementtiin link-elementissä tehtävä linkitys kuvatiedostoon.

Kaikki kuvankäsittelyohjelmat eivät kuitenkaan osaa tallentaa kuvaa oikeassa ico-tiedostomuodossa. Ilmaisohjelmista IrfanView (ks. Työkalut) osaa, mutta sillä taas ei voi tehdä itse grafiikkaa.

1. Grafiikan tekemiseen voi käyttää GIMP:iä tai jotain piirto-ohjelmaa (CorelDRAW, OpenOffice.org Draw).
2. Tiedosto tallennetaan bmp- tai gif-muodossa.
3. Tiedosto avataan IrfanViewissä, ja tallennetaan siellä ico-tiedostona.

Linkit

Ilmaiset kuvapankit

Mikäli sinulla ei ole aiheeseen liittyviä kuvia, verkosta löytyy myös ilmaisia kuvapankkeja. Lue tarkkaan kunkin palvelun käyttöehdot kuvia käyttäessäsi. Osaa kuvista voi käyttää ilman rajoituksia, osa yksityiseen ei-kaupalliseen käyttöön, jne...

BurningWell.Org

Kuvia public domain -lisenssillä, eli vapaasti käytettävissä mihin tahansa tarkoitukseen.

Free Images - Free Stock Photos

Kuvapankki.

FreeStockPhotos.com

Kuvapankki.

Gimp-Savvy.com

GIMP-oppaan 'Photos'-osiossa Public domain valokuvia, mm. NASA:n avaruusvalokuvia.

Image * After

Kuvia ja tekstuureja.

morguefile.com

Ilmaisia kuvia, myös kaupalliseen käyttöön.

stock.xchng

Käyttäjien jakamia kuvatiedostoja.

Tekes » Kuvapankki

Lähinnä suomalaisten kuvaajien kuvia.

Wikimedia Commons

Laajasti ilmaisia kuvia eri lisensseillä. Täältä kannattaa etsiä esim. nähtävyyksien tai tunnettujen henkilöiden kuvia.

Grafiikkaa

Ilmaisia grafiikoita jakavia sivuja löytyy paljon, mutta kannattaa tarkistaa käyttöoikeudet.

Bullet Madness

Listanappeja, nuolia, kuvakkeita...

Free! Icons for your website or application

Linkkejä ilmaisia kuvakkeita tarjoaville web-sivuille.

96 of the Best Ever Free Icon Sets - For Web Designers, Developers and Bloggers

Kuvakkeita.

50 Most Beautiful Icon Sets Created in 2008

Kuvakkeita.

36 Must Have Backgrounds and Patterns Resources for all Designers

Taustagrafiikoita.

How To Use Icons To Support Content In Web Design

Tässä ei tarjota kuvakkeita, vaan design-vinkkejä niiden sisältöä tukevalle käytölle.