HTML ja CSS aloittelijoille (Osa 09): Kuvat verkkoon (01)

Kun tallennatte kuvia grafiikkaprogrammissa, tarjolla on monenlaisia grafiikkamuotoja. Mutta mitä niistä pitäisi valita, kun kuvaa halutaan lisätä verkkosivustolle?



Kun haluat esitellä kuvan verkkosivustollasi, sinulla on kolme valittavana olevaa muotoa.

• GIF

• JPEG

• PNG

Mutta mitä muotoa valita mihinkin tarkoitukseen? Kannattaako valita valokuvia varten GIF vai PNG? Aluksi lyhyt yleiskatsaus kunkin muodon kykyihin.

Tämä pieni yleiskatsaus osoittaa jo muotojen erilaiset ominaisuudet. On siis hyvin ymmärrettävää, että tietyt muodot soveltuvat paremmin tietyille käyttötarkoituksille kuin toiset. Tässä vaiheessa seuraava osio astuu kuvaan. Siellä näytetään, milloin kulloinkin kannattaa käyttää jotakin muotoa.

Valokuvat

Ei epäilystäkään, valokuvia varten käytetään JPEG-muotoa. Täällä kuvia voidaan pakata erittäin hyvin, ja samalla voi valita muuttuvan laadun. Tässä löytyy oikea tasapaino laadun ja pakkaussuhteen välillä.

Näyttökuvat / Kaaviot

Siihen sopii parhaiten PNG-muoto. PNG on kiinnostava myös teknisille piirustuksille, pohjapiirroksille jne. PNG:ta voidaan käyttää myös kuvissa, joissa työskennellään läpinäkyvien alueiden kanssa.

Fontit / Logot

Jos logossasi on tekstiä tai haluat yleensä esittää kirjasimia, sinun tulisi käyttää GIF- tai PNG-formaattia. Tehokkaamman suorituskyvyn vuoksi yleensä turvaudutaan kuitenkin PNG:hen. JPEG ei sovellu kirjasinten esittämiseen, koska reunat näytetään epäselvästi.

Läpinäkyvyys

Kun on kyse läpinäkyvien alueiden esittämisestä, JPEG jää automaattisesti pois. Jäljelle jäävät siis GIF ja PNG. Kumpaa näistä muodoista tulisi kuitenkin käyttää, kun kyseessä on läpinäkyvyys? GIF voi pohjimmiltaan käsitellä läpinäkyvyyttä, mutta tulokset ovat usein epäselviä. Yksi pikseli voi GIF-muodossa olla joko täysin näkyvä tai täysin läpinäkyvä. PNG:ssä tätä ilmiötä ei esiinny. Tässä muodossa on lisäksi lisäkanava, jonka avulla voidaan saavuttaa hienostuneempia läpinäkyvyystuloksia.

Kuvien lisääminen

Grafiikat voidaan lisätä käyttämällä img-elementtiä. (Huomaa, että kuvia upotetaan nykyään hyvin usein CSS:n avulla. Tarkemmat tiedot CSS:stä tulevat luonnollisesti vielä. Kuitenkin esitetty HTML-tapa on täysin standardinmukainen ja sitä voidaan käyttää huoletta myös HTML5:ssä.)

<img src="logo.png" alt="PSD-Tutorials.de" />

img on itsenäinen elementti. Kuvaa voidaan kuvata tarkemmin vastaavilla attribuuteilla. Tärkein attribuutti on epäilemättä src, jonka avulla kuvataan kuva, joka halutaan upottaa. Annan esimerkkinä, että grafiikka logo.png sijaitsee samassa hakemistossa kuin HTML-tiedosto, jossa img-elementti on määritelty.

Jotta kuvat näkyisivät todella, niiden polku on ilmoitettava oikein. HTML tarjoaa useita vaihtoehtoja viittaamiseen.

• Absoluuttiset polut

• Absoluuttiset polut suhteessa perusosoitteeseen

• Suhteelliset polut suhteessa perusosoitteeseen

Ensinnäkin absoluuttisia polkuja. Tätä vaihtoehtoa käytetään yleensä aina, kun kuva ei sijaitse omalla palvelimellasi. Oletetaan, että haluat lisätä PSD-Tutorials.de-sivustolta tutun perhoskuvan verkkosivustollesi. Voit ladata kuvan suoraan paikasta, jossa se sijaitsee. Aluksi sinun on määritettävä kuvan polku. Helpoiten se onnistuu niin, että klikkaat kuvaa selaimessa oikealla näppäimellä ja valitset sitten Kopioi kuvan URL-osoite.

Se, mikä ladataan leikepöydälle, tulisi lopulta näyttää tältä:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Tämä on siis koko kuvan osoite. Tämä tieto riittää kuvan upottamiseen.

<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />

Man weist dem src-Attribut also den vollständigen Pfad zum Bild zu.

Das Problem an diesen absoluten Pfaden ist aber letztendlich, dass man keine wirkliche Kontrolle über den eingebundenen Inhalt hat. Wird die von euch referenzierte Grafik also vom Server gelöscht oder dort in ein anderes Verzeichnis verschoben, gibt es einen Anzeigefehler.





Daher sollte dieses absolute Referenzieren tatsächlich die Ausnahme sein.

Absolute Pfadangaben relativ zur Basis-Adresse

Diese Variante bietet sich immer dann an, wenn die Grafik auf dem gleichen Rechner/Server wie die HTML-Datei liegt und über das aktuelle Protokoll erreichbar ist. Das klingt kompliziert, ist es aber nicht.

Ein Beispiel:

http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Dabei handelt es sich um die vollständige Adresse. Der folgende Teil ist dabei die absolute Pfadangabe.

wp-content/uploads/2013/01/logo-psd-tutorials.jpg

Diese absolute Pfadangabe bezieht sich relativ auf die Basis-Adresse http://4eck-media.de.

Relative Pfadangaben relativ zur Basis-Adresse

Die jetzt vorgestellte Variante ist sicherlich am gebräuchlichsten. Dabei wird immer der aktuelle Pfad als Bezugspunkt genommen, von dem aus letztendlich adressiert wird. Auch hierzu wieder einige Beispiele. Angenommen, es gibt die Datei index.htm, in die ihr ein Bild einbinden wollt. Zusätzlich existiert auf derselben Ebene das Verzeichnis images, in dem besagtes Bild liegt.

index.htm
images
--logo.png

Der Aufruf im src-Attribut sähe in diesem Fall so aus:

src="images/logo.png"

Wie würde das Ganze aber aussehen, wenn sich das Bild in einem Verzeichnis befindet, das oberhalb der HTML-Datei liegt?

projekt
--images
-----logo.png
--archiv
-----index.htm

In diesem Fall liegt die index.htm ein Verzeichnis unterhalb des einzubindenden Bildes logo.png.

src="../images/logo.png"

Die Syntax bedeutet hier also: Gehe eine Ebene nach oben, wechsle dort in das Verzeichnis images und zeige die logo.png an.

projekt
--images
----logo.png
----2013
------januar
--------index.htm

Hier sieht die Syntax so aus:

src="../../images/logo.png"

Das Bild logo.png liegt in diesem Fall zwei Ebenen oberhalb der index.htm im Verzeichnis images.

Der Vorteil der relativen Pfadangaben ist deren Flexibilität. Ihr könnt so beispielsweise das Projekt lokal entwickeln und dann auf einen "echten" Server kopieren. Die Pfade stimmen danach unverändert.