HTML és CSS kezdőknek (Rész 09): Grafikák a webre (01)

Amikor képeket mentesz egy grafikus programban, különböző grafikaformátumokat kínálnak. De melyiket kell választani, amikor egy képet egy webhelyre szeretnél beilleszteni?



Ha bemutatnál egy képet a webhelyeden, három formátum közül választhatsz.

• GIF

• JPEG

• PNG

De melyik formátumot válaszd milyen felhasználás céljából? Inkább GIF-et vagy PNG-t válassz fotókhoz? Először egy rövid áttekintés az egyes formátumok képességeiről.

Ez a kis áttekintés már mutatja a formátumok különböző tulajdonságait. Természetesen nem meglepő, hogy bizonyos formátumok jobban alkalmazkodnak bizonyos felhasználási területekhez, mint mások. Pontosan itt veszi kezdetét a következő szakasz. Ott mutatjuk be, mikor melyik formátum a legmegfelelőbb.

Fotók

Nem kérdés, fényképekhez használjuk a JPEG-et. Itt a képeket nagyon jól lehet tömöríteni, a minőség pedig változóan választható. Itt megtalálható a megfelelő egyensúly a minőség és a tömörítési arány között.

Képernyőképek/Diagramok

Ehhez a PNG formátum a legmegfelelőbb. A PNG érdekes technikai rajzokhoz, alaprajzokhoz stb. is. A PNG-t képeknél is lehet használni, amikor átlátszó területekkel dolgozol.

Betűtípusok/Logók

Ha a logódban szöveg van vagy általában betűket akarsz megjeleníteni, akkor GIF-et vagy PNG-t kell használnod. Általában a jobb teljesítmény miatt azonban általában a PNG-t választjuk. A JPEG mindenesetre alkalmatlan a betűtípusok megjelenítésére, mivel a szélek nem tiszták.

Átlátszóság

Ha átlátszó területek megjelenítéséről van szó, a JPEG az elején kiesik. Így marad a GIF és a PNG. De melyik e két formátum közül használd, ha az átlátszóságról van szó? A GIF alapvetően tud kezelni átlátszóságot, az eredmények azonban általában nem tiszták. Egy pixel a GIF formátumban vagy teljesen látható, vagy éppen teljesen átlátszó lehet. A PNG esetében ez a jelenség nem fordul elő. Ennek a formátumnak egy extra alfacsatornája van, amely lehetővé teszi finomabb átlátszósági eredmények elérését.

Képek beillesztése

Grafikákat az img elem segítségével lehet beilleszteni. (Kérlek, vedd figyelembe, hogy a képeket manapság nagyon gyakran CSS-ben illesztik be. A CSS-ről részletes információk majd természetesen következnek. A bemutatott HTML módszer azonban teljesen standardnak tekinthető, és ártalmatlanul használható az HTML5-ben is.)

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

A img egy önálló elem. A megfelelő attribútumokkal részletesen leírható a kép. Az egyik legfontosabb attribútum kétségtelenül az src. Ennek segítségével adod meg a képet, amelyet be kell illeszteni. Az itt bemutatott példában arra azonosításra teszek, hogy a grafika, amelyet az img elem definíciója tartalmaz, ugyanabban a könyvtárban található-e, mint az HTML-fájl.

A képek megjelenítéséhez helyesen kell megadni az útvonalat. Az HTML különböző lehetőségeket kínál a hivatkozás megadására.

• Abszolút utak

• Az alapcímhez viszonyított abszolút elérési utak

• Az alapcímhez viszonyított relatív elérési utak

Először az abszolút utakhoz. Ezt a módszert általában akkor használják, ha a kép nem a saját szerveren található. Tegyük fel, hogy a PSD-Tutorials.de-nek ismert pillangót szeretnéd beilleszteni a webhelyedre. Elméletileg közvetlenül tölthetnéd le a szerverről, ahol található. Először határozd meg a kép útvonalát. Ezt a legegyszerűbb a böngészőben az egérgombbal történő kattintás után és a Kép-URL másolása kiválasztásával megtenni.

A vágólapra másolt dolog végül így néz ki:

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

Ez a kép teljes címe. Ez az információ már elegendő ahhoz, hogy beilleszd a képet.

<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.