HTML & CSS pro začátečníky (část 09): Grafika pro web (01)

Když uložíte obrázky v grafickém programu, máte k dispozici různé grafické formáty. Který z nich byste měli ale vybrat, pokud jde o začlenění obrázku do webové stránky?



Pokud chcete na svých webových stránkách představit obrázek, máte na výběr ze tří formátů.

• GIF

• JPEG

• PNG

Který formát ale vybrat pro jaký účel? Je lepší pro fotografie používat GIF nebo PNG? Nejprve stručný přehled o schopnostech jednotlivých formátů.

Tento malý přehled již ukazuje rozdílné vlastnosti formátů. Je tedy málo překvapivé, že se určité formáty lépe hodí k jednotlivým účelům než jiné. Právě v tomto bodě začíná následující oddíl. Zde je ukázáno, kdy je nejlepší použít jaký formát.

Obrázky

Není pochyb, pro fotografie se používá formát JPEG. Protože zde lze obrázky velmi dobře komprimovat, přičemž lze volit variabilní kvalitu. Zde najdete správnou rovnováhu mezi kvalitou a kompresní rychlostí.

Snímky obrazovky/Diagramy

Pro tyto účely je nejvhodnější formát PNG. PNG je zajímavý také pro technické kresby, půdorysy atd. PNG lze také použít u obrázků, kde se pracuje s průhlednými oblastmi.

Písma/Loga

Pokud máte ve svém logu text nebo vůbec chcete zobrazovat písmo, měli byste použít GIF nebo PNG. Většinou se vzhledem k lepší výkonu obvykle sáhne po formátu PNG. JPEG pro zobrazení písem neni vhodné, protože okraje budou zobrazeny nečistě.

Průhlednost

Pokud jde o zobrazení průhledných oblastí, JPEG je automaticky vyloučen. Zbývají tedy GIF a PNG. Ale který z těchto dvou formátů použít, když záleží na průhlednosti? GIF obecně dokáže pracovat s průhledností, ale výsledky jsou obvykle nečisté. Pixel v formátu GIF může být buď plně viditelný, nebo úplně průhledný. U PNG se tento jev nevyskytuje. Tento formát má dodatečný alfa kanál, díky němuž lze dosáhnout jemnějších výsledků průhlednosti.

Začlenění obrázků

Grafiku lze začlenit pomocí prvku img. (Mějte prosím na paměti, že obrázky jsou nyní velmi často začleňovány pomocí CSS. Podrobné informace o CSS budou samozřejmě následovat. Zobrazená cesta pomocí HTML je však zcela standardní a lze ji používat i v HTML5 bez obav.)

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

Při img se jedná o samostatný prvek. Pomocí příslušných atributů lze obrázek podrobně popsat. Nejdůležitějším atributem je nepochybně src. Tím se určí obrázek, který má být začleněn. V uvedeném příkladu předpokládám, že obrázek logo.png se nachází ve stejném adresáři jako soubor HTML, ve kterém byl definován prvek img.

Aby se obrázky skutečně zobrazily, musíte uvést správnou cestu k nim. HTML nabízí různé možnosti pro odkazování.

• Absolutní cesty

• Absolutní zápis cesty vzhledem k základní adrese

• Relativní zápis cesty vzhledem k základní adrese

Nejprve k absolutním cestám. Tuto možnost obvykle používáte vždy, když se obrázek nenachází na vašem serveru. Předpokládejme, že chcete do své webové stránky začlenit známého motýla z PSD-Tutorials.de. Potenciálně byste jej mohli načíst přímo ze serveru, na kterém se nachází. Nejprve zjistěte cestu k obrázku. Nejsnáze to uděláte tak, že kliknete na obrázek v prohlížeči pravým tlačítkem myši a pak zvolíte Kopírovat URL obrázku.

To, co se nahrává do schránky, by mělo vypadat nakonec takto:

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

Jedná se tedy o úplnou adresu obrázku. Tato informace stačí k začlenění obrázku.

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