Grafiken einer Homepage Juergen Kneller

HTML: Grafiken/Animationen

Die gängigen optischen Formate im Internet sind JPG-Bilder (mit max. 16.7 Mio Farben) oder GIF-Dateien (Bilder oder Animationen mit max. 256 Farben). Diese kann man selbst erstellen oder aus entsprechenden GIF-Sammlungen kopieren.

Eine Grafik per Image-Kommando in einer HTML-Seite anzeigen:

  <img src="bild.gif">

Mit diesem Kommando wird per <img> -Tag die Datei "bild.gif" in einer HTML-Datei angezeigt.

Besser: Eine Grafik mit den Größenangaben in eine HTML-Seite einbauen:

  <img src="bild.gif" width="123" height="123">

Der Browser liest erst eine HTML-Datei und fordert dann dann alle Objekte (Bilder, Sounds, Flash,...) nach. Werden dem Browser die Weite (width) und Höhe (height) einer Grafik in Pixel "angekündigt", dann muss dieser die Werte nicht erst ermitteln (Zeitersparnis). Außerdem wird der benötigte Platz für die Grafik reserviert und das "Ruckeln" beim Aufbau einer HTML-Seite (verursacht durch das Nachladen von Bilder ohne Größenangabe) entfällt.

Eine kleine HTML-Datei mit einem Bild könnte so aussehen:

  <html>
    <head>
      <title>Meine Homepage mit Bild</title>
    </head>
    <body bgcolor="gray" text="white">
      <h1>Willkommen</h1>
      <hr>
      Hier ein Bild: <img src="bild.gif" width="123" height="123">
    </body>
  </html>

Die Werte für Weite und Höhe eines Bildes können folgendermaßen ermittelt werden:

Das Bild in ein Grafikprogramm (Bsp: PaintShopPro) laden.
Meist wird unten in der Statuszeile die Bildgröße in Pixel dargestellt.
Die Pixelgröße einer Animation in einem Animationsprogramm (Bsp: Gif-Animator von ULEAD) anzeigen lassen.
Im Browser mit der rechten Maustaste auf das Bild oder die Animation klicken.
Es öffnet sich ein Menue, dort "Eigenschaften" wählen. Neben einigen anderen Infos wird die Größe angezeigt.

Hinweis:
Wird statt eines Bildes ein Kasten mit einem roten Kreuz gezeigt, dann konnte der Browser das Bild nicht finden. Es gibt zwei wirklich seeeeeehr beliebte Fehlerquellen: Entweder ist der Name falsch (auf Gross-/Kleinschreibung achten) oder der Pfad zum Bild ist nicht korrekt (auf dem WEB-Server anders als auf der Festplatte?).

Hinweis:
Läßt man sich eine Animation in einem Grafikprogramm anzeigen, dann wird nur das erste (oberste) Bild der Animation angezeigt!