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

Kuvaus:

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.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />

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.
Luokka: »
Avainsanat:, , , , ,
http://raulihaverinen.fi/verkko-opas/?id=112