www.BuntesWeb.de - Computer & Internet

Das Homepage-Handbuch speziell für blutige Anfänger

Grundelemente einer Webseite - Bilder

Grundsätzliches über Bilder (Eigenschaften von Bildern)

Bilder sagen mehr als 1000 Worte - so sagt man. Allerdings kann man das im Internet auch anders sehen. Suchmaschinen können keine Bilder anschauen und so findet man Informationen im Internet nicht über Bilder und sonstige Mediendateien, sondern über Worte. Aber für den menschlichen Betrachter gilt das Sprichwort sehr wohl. Bilder dienen zur Illustration und Auflockerung der Textinformationen, aber auch als grafisches Beiwerk, um die Seite für den Betrachter gefälliger erscheinen zu lassen. Auch das Seitenlayout wird durch graphische Elemente aufgepeppt. Das beginnt schon beim Hintergrundbild der Webseite und kann weiter gehen, indem man die Ecken von Tabellen scheinbar abrundet, dekorative Buttons für die Webseitennavigation verwendet und wasauch immer dem Grafikdesigner noch einfällt. An dieser Stelle beschränken wir uns aber zunächst mal auf die Grundelemente.

Bilder werden nicht in das HTML-Dokument eingebettet, sondern liegen immer als eigenständige Datei vor. Wenn man also ein Bild auf einer Seite einbaut, dann erzeugt man eigentlich nur einen Verweis, damit der Browser weiß, woher er das Bild bekommt. Im HTML-Code wird also nur die Adresse des Bildes angegeben. Dabei ist es grundsätzlich egal, ob das Bild am selben Ort gespeichert ist wie die HTML-Seite oder ob das Bild sich irgendwo in den Weiten des WWW befindet.
 

Bild-Formate (GIF,JPG, PNG)

Damit Ihre Bilder mit jedem Computer weltweit angezeigt werden, sollten Sie die üblicherweise verwendeten Grafikformate verwenden. Dies sind die Formate GIFund Jpeg (JPG). Außerdem können moderne Browser auch Bilder im Format PNG anzeigen. Das besondere an diesen 3 Grafikformaten ist die effiziente Datenkomprimierung und die popularität. Andere Bildformate werden ggf. ebenfalls angezeigt, so z.B. das Bitmap-Format BMP. Aber die Verwendung ist nicht zweckmäßig, da entweder keine Datenkompression verwendet wird und somit die Bilder unnötig lange Ladezeiten haben oder das Bildformat nicht von allen Browsern angezeigt werden kann.

GIF

GIF steht für 'Graphics Interchange Format' - zu deutsch: Grafikaustausch-Format. Dieses Format ist schon sehr alt; es wurde in den 1980er Jahren entwickelt und 1987 von CompuServe eingeführt. Daher unterstützt es nur die damals üblichen 256 Farben. Aber es hat einige Vorzüge, durch die es noch heute äußerst beliebt ist und durch die es zum Standard für alle Computer geworden ist:

• Verlustfreie und dennoch sehr gute Komprimierung (LZW)
• Mehrere Einzelbilder können in einer Datei gespeichert werden
• Mittels einer Art Scriptsprache wird aus den Einzelbildern eine Animation
• Eine der 256 möglichen Bildfarben kann als 'transparent' deklariert werden
• Offene Lizenzpolitik - Das GIF-Format kann kostenlos verwendet werden
• und in der Folge: Quasi jeder Computer/Browser kann GIF-Bilder anzeigen

Zudem kann so ziemlich jedes Grafikbearbeitungsprogramm zumindest GIF-Bilder importieren und exportieren. Nicht jedes Programm beherrscht die GIF-Animation. Aber es gibt einige sehr schöne und kostenlose Tools dafür. Auch im Lieferumfang von Namo WebEditor ist ein GIF-Animator enthalten.

Das Format GIF eignet sich auf Grund seiner besonderen Eigenschaften für Kleingrafiken und sog. 'Zappelbilder'. Insbesondere also für Banner und Buttons, sowie für kleine Textausschnitte, die man eingescannt hat oder Texte, die man als Bild darstellen muss, weil sie eine ganz besondere Schriftart verwenden. Bilder, die mehr als 256 Farben benötigen, speichert man hingegen als JPEG-Datei.

JPG (JPEG/JFIF)

JPEG ist die Abkürzung für 'Joint Photographic Experts Group', den Entwickler dieses Bildkompressionsverfahrens. JFIF hingegen ist das Speicherformat für Bilder mit JPEG-Bildkompression. Wenn wir also von einer JPEG-Datei oder von einer JPG-Datei sprechen, dann meinen wir eigentlich ein Bild im Format JFIF. Auf einem Computer mit Windows-Betriebssystem haben diese Bilder die Dateiendung .JPG.

Fest steht, dass dieses Format etwas jünger ist als das GIF-Format. Mit der Einführung des Mosaic-Browsers anfang der 90er Jahre wurde es zum Standardformat für Fotos und sonstige Bilder, für die das GIF-Format wegen der zu geringen Farbenanzahl nicht geignet war.

Vorzüge des JPEG/JFIF-Formates:

• Deutlich mehr als nur 256 Farben, bis hin zu den Millionen Farben
• Komprimierung frei einstellbar (mehr oder weniger verlustbehaftet)
• Wahl zwischen sequenziellem oder progressivem Bildaufbau
  (Bei progressivem Bildaufbau wird schon nach der Übertragung weniger Kilobytes ein vollständiges, aber noch recht unscharfes Bild angezeigt, das sich dann bis zum Eintreffen der letzten Bytes zusehends verfeinert.

Ein Nachfolgeprojekt von JPEG ist JPEG 2000 mit verbesserter (aufwändigerer) Kompression und ein paar zusätzlichen Features. Für die Verwendung auf Webseiten ist es aber noch zu wenig verbreitet.

PNG

Das relativ neue Portable Network Graphics Format (PNG) beherrscht sehr gute, verlustfreie Bildkompression. Es unterstützt Farbpaletten mit 256 Farben wie GIF, aber auch RGB-Farben mit bis zu 48 Bit pro Pixel, also millionen Farben wie JFIF. Transparenz kann wie bei GIF über die Auswahl einer Palettenfarbe oder - ganz neu - über einen sogenannten Alphakanal erzeugt werden. Dabei kann sogar eingestellt werden, wie stark der Hintergrund durchscheinen darf. Allerdings kommen ältere Browserversionen damit noch nicht klar.

Kurzum: Das PNG-Format ist ein recht guter Ersatz für das GIF-Format - insbesondere wenn 256 Farben mal nicht ausreichen, man aber eine verlustfreie Kompression wünscht. Dank einer speziellen Vorfiltertechnik lässt sich das Bild mit PNG in eine im Vergleich zu GIF deutlich kleinere Datei packen, obwohl man auf den LZW-Algorhitmus verzichten musste und statt dessen die für Bilder nicht ganz optimale ZIP-Kompression verwendet. Auch Fotos lassen sich im PNG-Format speichern, dank RGB-Unterstützung. Im Vergleich zu JPEG wird die Datei allerdings recht groß. Dafür bleibt aber auch die volle Bildqualität erhalten. Das ist OK für kleine Bilder (bis 200x300 Pixel). Darüber hinaus sollte man lieber auf das verlustbehaftete JPEG Kompressionsformat zurückgreifen.
 

Eigene (interne) Bilder einfügen

Ein Bild wird zunächst mal wie ein Buchstabe behandelt. Ein ziemlich großer Buchstabe womöglich. Um es in Ihr HTML-Dokument einzufügen, setzen Sie also einfach die Schreibmarke an die gewünschte Stelle und wählen dann aus dem Menü: Einfügen - Bild > Bild bzw. führen Sie einen Rechtsklick auf die gewünschte Stelle im Text aus und wählen Sie dann aus dem Kontextmenü "Bild einfügen". Es erscheint das Dialogfeld "Bildeigenschaften". Dort finden Sie die Eingabezeile "Bildpfad", wo sie die Bildadresse eingeben müssen. Befindet sich das Bild zusammen mit dem HTML-Dokument im selben Verzeichnis, dann reicht hier die Angabe des Bild-Dateinamens - also z.B. "meinegrafik.gif". Befindet sich das Bild in einem Unterordner, dann muss der Pfad zum Bild angegeben werden. Am besten klicken Sie aber auf das Ordnersymbol:   und wählen Ihr Bild aus dem Verzeichnis aus. Namo WebEditor trägt dann gleich die Werte für die Bildgröße korrekt ein und erstellt den richtigen Pfad im Feld "Bildpfad". Bei dieser Methode handelt es sich um die relative Adressierung. Dier Bildpfad wird relativ zum Speicherort des HTML-Dokumentes angegeben.

Hier der HTML-Code:  <img src="meinegrafik.gif">

Ihre Bilder sollten sich zu diesem Zwecke entweder im selben Ordner befinden, wie das HTML-Dokument, oder in einem entsprechenden Unterordner des Homepageverzeichnisses. Bevor Sie also ein Bild auf einer Seite einfügen, sollten Sie es in den entsprechenden Ordner der Homepage kopieren oder verschieben.

Namo Ressourcendateiverarbeitung

Wenn Namo WebEditor beim Speichern einer HTML-Seite bemerkt, dass einige Bilder sich nicht im selben Ordner (Dokumentordner) befinden, dann wird man gefragt, was mit den Bildern geschehen soll. Das passiert hin und wieder auch, wenn man gar keine neuen Bilder eingefügt hat. Folgende Meldung erscheint:

Diese Auswahl ist für den Anfänger ziemlich verwirrend. Wenn Sie wissen, dass sich alle Bilder an ihrem Platz befinden, dann muss Namo WebEditor nichts unternehmen und daher wählen Sie "Aktueller Pfad zum ursprünglichen Dateispeicherort". Wenn Sie aber z.B. Namo-Cliparts eingefügt haben oder im Gegensatz zu meinem Ratschlag die Bilder nicht zuvor in den entsprechenden Ordner Ihrer Homepage kopiert haben, sondern Bilder aus irgendwelchen eigenen Verzeichnissen oder von einer ClipArt-CD direkt eingebaut haben, dann befinden sich diese noch in ihren ursprünglichen Verzeichnissen. Die kann man so aber nicht veröffentlichen. Wählen Sie in dem Falle bitte "Dateien in den Dokumentenordner kopieren", damit Namo sich die Bilder von den externen Ordnern in den Dokumentordner holt und die Bildverknüpfungen entsprechend anpasst. Damit sind Sie immer auf der sicheren Seite. Alle Bilder befinden sich dann aber immer im selben Verzeichnis wie die zugehörige HTML-Seite. Wenn Sie mit Unterverzeichnissen arbeiten, dann werden einige Bilder womöglich doppelt angelegt.

An dieser Stelle sagt Ihnen Namo WebEditor nicht, welche Bilder gemeint sind. Daher ist es ratsam, dass sie selbst immer im Auge behalten, welche Bilder sie verwendet haben und welche Aktion ggf. noch notwendig ist. Am besten speichern Sie das HTML-Dokument nach jedem neu eingefügten Bild.

Fortgeschrittene Namo-Anwender können die 4. Option verwenden, um selbst auszuwählen, welche Bilder wohin kopiert werden und unter welchem Namen sie gespeichert werden sollen. Da dies hier aber ein allgemeines Homepage-Handbuch für Anfänger ist und kein Namo-Kurs für Fortgeschrittene, gehe ich auf die beiden anderen Möglichkeiten in der Ressourcendateiverarbeitung gar nicht näher ein. Sie können sich durch einen Klick auf das Fragezeichen (Namo Programmhilfe) oder durch eine entsprechende Anfrage im Namo WebEditor Forum gern näher informieren.

Externe Bilder einfügen

Befindet sich das Bild nicht auf dem eigenen Server, dann kann man eine komplette URL als Bildpfad angeben. Beispielsweise "http://www.buntesweb.de/banner.gif". Dies ist die absolute Adressierung. Sie funktioniert sowohl bei Bildern auf fremden Servern also auch bei Bildern auf der eigenen Webpräsenz.

Der HTML-Code dazu könnte dann also wie folgt aussehen:
<img src="http://www.buntesweb.de/banner.gif">

Auch bei solchen Bildern würde Namo WebEditor fragen, wie er mit den neuen Bildern vorgehen soll. Da diese Bilder sich bereits im Web befinden, ist es natürlich nicht erwünscht, dass Namo sie in den Dokumentordner holt. Die richtige Auswahl im Popupfenster "Ressourcendateiverarbeitung" ist also: "Aktueller Pfad zum ursprünglichen Dateispeicherort".

Achtung: Die Verwendung fremder Bilder auf der eigene Homepage ist sehr unhöflich. Man belastet damit den fremden Server.
 

Angaben zur Bildgröße

Grundsätzlich könnte man die Angaben zur Bildgröße auch weglassen. Aber damit der Browser die Webseite schneller aufbauen kann, ist es nützlich, wenn er die Breite und die Höhe des Bildes bereits kennt, bevor die Bilddatei vollständig geladen wurde. Namo WebEditor erzeugt diese Angaben daher automatisch, wenn man das Bild einfügt. Sie können diese Daten aber auch selbst eingeben (oder nachträglich ändern) und wenn Sie wollen, dann können sie auch "lügen". Das Bild wird dann genau in der von Ihnen angegebenen Größe angezeigt.

In Namo WebEditor stellen Sie die Bildgröße In den Bildeigenschaften ein (Eingabefelder für Breite und Höhe). Im HTML-Code stehen dafür die beiden Attribute width und height. Man gibt einfach eine Zahl ein. Der Browser geht dann davon aus, dass als Maßeinheit die Pixel gemeint sind.

Im folgenden Beispiel sehen Sie links ein Bild in Originalgröße und rechts daneben das selbe Bild, aber diesmal absichtlich mit kleineren Größenangaben:

  

Hier auch der entsprechende HTML-Code. Beachten Sie die unterschiedlichen Werte bei den Attributen "width" und "height":

Bild in Originalgröße:
<img src="beispielbild.jpg" width="264" height="194">

Selbes Bild, aber kleiner dargestellt:
<img src="beispielbild.jpg" width="100" height="73">

Wie man sieht funktioniert das sehr gut. Aber effektiv veranlassen wir den Browser nur dazu, ein Bild kleiner anzuzeigen als es wirklich ist. Diese Vorgehensweise kann manchmal durchaus von Vorteil sein, aber grundsätzlich ist es eine Verschwendung von Speicherressourcen, wenn man große Bilder mit entsprechend großem Speicherbedarf überträgt, um sie dann verkleinert darzustellen. Besser ist es, wenn man Bilder stets in einem Grafikprogramm auf die gewünschte Größe bringt und sie erst dann in die HTML-Seite einfügt. Das erhöht die Qualität des Bildes und spart Speicherplatz. Somit verkürzt sich auch die Ladezeit, was insbesondere die Verwender von normalen 56k-Modems sehr zu schätzen wissen...

Angaben zum Bildlayout

Ausrichtung

Kombiniert man Bilder direkt mit Text, dann benötigt man zusätzliche Angaben, um festzulegen, wie sich das Bild relativ zum Text verhält. Nehmen wir z.B. ein rechteckiges Testbild: - und fügen es einfach mal hier so mitten in den Text ein. Nicht sonderlich schön, oder? Die Zeile in der sich das Bild befindet verschiebt sich spürbar nach unten, weil das Bild sich wie ein sehr großer Buchstabe auswirkt.

Besser wäre es dann wohl, wenn man das Bild zumindest Mittig zum Text ausrichtet. Hierzu wählt man in den Bildeigenschaften die Ausrichtung "Mitte" - - so, nun wird das Bild relativ zur Textzeile schön mittig gesetzt. Die Zeile verschiebt sich allerdings nach wie vor, weil das Bild noch immer wie ein zu großer Buchstabe wirkt.

Wenn die Textzeilen nicht verschoben werden sollen, dann müssen neben dem Bild mehrere Textzeilen ausgegeben werden. Dies erreicht man mit einer von zwei möglichen Ausrichtungen für umfließenden Text. Sie können wählen, ob das Bild links- oder rechtsbündig sein soll. Wählen wir z.B. die Ausrichtung "Links", dann sieht es aus wie hier in diesem Absatz.

Hier der Vollständigkeiten noch das Beispiel für das Bild rechts vom umfließenden Text. Weitere Ausrichtungen, wie "oben", "mitte" oder "Grundlinie" u.s.w sind möglich, aber nicht von großer Bedeutung. Probieren Sie aber einfach selbst mal aus, welche Einstellung womöglich zu Ihrem Vorhaben passt. Wenn Sie das Thema vertiefen wollen, dann schauen Sie mal in die Trickkiste, wo auf die Ausrichtung von Bild- und anderen Seitenelementen näher eingegangen wird.

Hier der HTML-Code der 4 Beispiele:

<img src="testbild.gif" width="155" height="46" >
<img src="testbild.gif" width="155" height="46" align="middle">  
<img src="testbild.gif" width="155" height="46" align="left">
<img src="testbild.gif" width="155" height="46" align="right">

Abstände (horizontal und vertikal)

Wie man im obigen Beispiel sieht, klebt der Text ziemlich am Bild. Es können daher noch Abstände definiert werden. Hier in diesem Absatz sieht man, dass sich rund um das links ausgerichtete Bild noch ein Rand befindet und der Text somit nicht mehr ans Bild anstößt. In Namo WebEditor stellt man diese Ränder gleich unterhalb Ausrichtung ein. Die Maßeinheit sind Pixel. Geben Sie im Feld "Horiz. Abstand" einen Wert ein, dann entsteht ein entsprechend breiter Rand rechts und links vom Bild. Ein Wert bei "Vert. Abstand" erzeugt Ränder oben und unten vom Bild. Beim Beispielbild in diesem Absatz habe ich jeweils eine '10' eingegeben, es entsteht also ein 10 Pixel breiter Rand sowohl seitlich als auch oben und unten vom Bild. Im HTML-Code sieht das wie folgt aus:

<img src="testbild.gif" width="155" height="46" vspace="10" hspace="10">

Die Rahmenstärke

Es gibt noch eine Angabe bei Bildern, die man eigentlich weglassen könnte, die aber für Verwirrung bei den Anfängern sorgt, sobald sie einen Link auf eine Grafik setzen.

Hier ein Beispiel. So sieht ein Bild aus, wenn man es mal ohne und mal mit Angabe einer Rahmenstärke (5 Pixel) einbaut:

  

Wie Sie sehen, wird ohne Angabe kein Rahmen verwendet. Mit Angabe entsteht ein Bildrahmen. Die Farbe hängt vom Browser ab. Standard dürfte ein schwarzer Rahmn sein.

Jetzt verlinken wir die beiden Bilder:

  

Was ist das??? Der Rahmen färbt sich blau! Aber auch das linke Bild hat jetzt einen Rahmen! Ein dünner, blauer Strich läuft um das Bild!

Wenn man ein Bild verlinkt, dann will der Browser darauf hinweisen, indem er einen blauen Rahmen um das Bild zieht. Sagt man dem Webbrowser also nicht, wie der Rahmen aussehen soll, dann bestimmt er selbst. Und dann entsteht in der Regel eine dünne Linie.

Wenn man nun aber Buttons für die Navigationsleiste verwendet, dann stört der Rahmen! Die Farbe des Rahmens kann man nicht steuern. Er ist überflüssig. Er muss also weg. Und das kann geschehen, indem man explizit eine Rahmenbreite von NULL vorgibt.

Also machen wir es uns zur Gewohnheit, dass wir jedem Bild grundsätzlich eine Rahmenbreite von 0 geben. Das tut Namo WebEditor auch, wann immer wir ein Bild damit einfügen. Und daher sieht der HTML-Code immer so aus:

<img src="beispielbild.jpg" width="264" height="194" border="0">

Der Alternativtext

So, und nun muss das Bild noch eine Textbezeichnung bekommen. Diese wird immer dann angezeigt, wenn das Bild nicht geladen werden konnte oder wenn der Webbrowser grundsätzlich keine Bilder anzeigt. Beispielsweise unterdrücken blinde Surfer gern die Bildanzeige, denn sie bekommen den Bildschirminhalt nur vorgelesen. Verwenden Sie also ruhig aussagekräftige Bildbeschreibungen. Auch die Suchmaschinen nehmen diese Bildbeschreibung gern in ihre Bilder-Datenbank auf und letztlich folgt man damit auch der Empfehlung des W3C.

Mit Namo WebEditor erzeugen Sie die Bildbeschreibung über die Bildeigenschaften im Eingabefeld "Alternativer Text". Nehmen wir wieder unser Beispielbild: Links das Bild ganz normal und rechts daneben erscheint je nach Browser nur der Alternativtext und ggf. ein Bildplatzhalter.
  
<img src="beispielbild.jpg"
width="264" height="194" border="0"
alt="Beispielbild: Leuchtturm in Tusche">

---

Damit haben wir das Grundelement 'Bilder' erschlagen.
Als nächstes befassen wir uns mit der Verwendung von Listen
Danach kommen dann noch zu den Tabellen.
 

Seitenanfang || www.BuntesWeb.de - Startseite | Stichwortverzeichnis | Impressum