Grafiken in HTML-Seiten

Kurzzusammenfassung
 Übung 07 
 Übung 08 
Eine Grafik als Gestaltungselement
Grafikformate
GIF (Grafics Interchange Format) JPEG (Joint Picture Expert Group)
  • Kompression ohne Qualitätseinbuße,
  • kann eine (oder mehrere nacheinander anzuzeigende = "animierte") Grafiken mit bis zu 256 Farben darstellen
  • eine dieser Farben kann als transparent definiert werden
  • ermöglicht den Bildaufbau in 2 Schritten (Interlaced Mode)
  • Bildkompression (unabhängig vom Grafikformat) jedoch mit Qualitätsverlust
  • existiert leider in unterschiedlichen Formatvarianten
  • besonders geeignet für Photos
  • kleinere Bilddateien durch höhere Kompressionsstufen (bei 16.7 Millionen Farben)
Vorteile Nachteile Vorteile Nachteile
hohe Kompression einfacher Grafiken mit wenigen Farben (z.B. ein 5 x 5 Pixel großer Punkt in zwei Farben benötigt nur 80 Bytes). Beschränkung auf 256 Farben.  keine Farbbegrenzung (rund 16.7 Millionen Farben sind darstellbar)  geringe Kompression bei einfarbigen Flächen, da jedes Bild immer mit allen 16.7 Millionen Farben gespeichert wird
transparente Bildfarbe ermöglicht das Plazieren von rechteckigen, runden oder anders geformten Bildern schwache Kompression von Bildern bei hoher Farbanzahl und fließenden Übergängen Kompression von Photos auf 10:1 bis 20:1 Qualitätsverlust durch hohe Kompression 
"Interlace"-Option erlaubt dem Browser, Teile des Bildes anzuzeigen, wenn ein Achtel der Daten übertragen wurden   "Interlace"-Option erlaubt dem Browser, Teile des Bildes anzuzeigen, wenn ein Achtel der Daten übertragen wurden zusätzlicher Qualitätsverlust durch wiederholtes Speichern als JPEG-Datei
Anordnungsbeispiele für Grafiken
HTML-Code Beispiel
<IMG SRC="Top.gif" HEIGHT=25 WIDTH=50> Grafik (50 x 25 Pixel)
<IMG SRC="Top.gif" HSPACE=10 HEIGHT=25 WIDTH=50> Grafik mit horizontalem Abstand (10 Pixel)
<IMG SRC="Top.gif" BORDER=5 HEIGHT=25 WIDTH=50> Grafik mit Rand
<IMG SRC="Top.gif" HEIGHT=25 WIDTH=50 ALIGN=TEXTTOP> Text als Grafiktitel
<IMG SRC="Top.gif" HEIGHT=50 WIDTH=100 ALIGN=RIGHT>
untenstehende Abbildung besteht aus mehreren 1-Pixel-Grafiken, die verzerrt wurden.		 Dies ist ein Text, in welchem eine Grafik eingebunden wurde, um das Verdrängen des Textes durch die Grafik zu demonstrieren. Die Grafik wurde zusätzlich auf doppelte Größe verzerrt, d.h. sowohl Höhe als auch Breite der Grafik wurden verdoppelt.
        
Textschattierung mittels Grafik
 
16 Farben, 581 Bytes
 1. Erstellen einer Grafik (z.B. 150 x 20 Pixel) auf weißem Untergrund mit grauem Text mittels eines Grafikprogramms, welches möglichst wenige Einschränkungen bezüglich der Farbanzahl auferlegt (hier wurde eine 24-Bit-Grafik mittels Corel-Photopaint Version 7.373 erstellt).
 
16 Farben, 1210 Bytes
 2. Mittels "Filter" wird nun die Kontur des Textes verwischt. Hier wurde das "Gaußsche Unschärfefilter" mit einem Radius von 3 Pixeln verwendet. Dieser Vorgang kann mehrfach wiederholt werden (in Photopaint Menüfolge: Effekte - Unschärfe - Gaußsche Unschärfe).
 
16 Farben, 575 Bytes
 3. Wiederholtes Erstellen des eigentlichen Textes. Nunmehr jedoch in der gewünschten Farbe. Hilfreich ist ein Grafikprogramm, welches die in Schritt 1 erstellte Textabbildung im Nachhinein mit einer anderen Farbe versehen läßt.
 
32 Farben, 1438 Bytes
 4. Einfügen des gewünschten Textes in die Grafik, welche im Schritt 2 erzeugt wurde. Durch leichtes Verschieben des Textes in horizontaler und vertikaler Richtung um wenige Pixel entsteht der Effekt eines "weichen" Schattens.
 
32 Farben, 906 Bytes
 5. Einfügen des Textes aus Schritt 3 in die Grafik aus Schritt 1 und anschließendes Verschieben des Textes um wenige Pixel in horizontaler und/oder vertikaler Richtung erweckt den Eindruck eines "harten" Schattens.
 
16 Farben, 788 Bytes
 6. Durch Reduzierung der Anzahl darzustellender Farben läßt sich bei gleicher oder ähnlicher Bildqualität häufig die Dateigröße verringern. Hier wurde die Grafik aus Schritt 5 auf 16 Farben reduziert.
 
16 Farben, 1019 Bytes
 7. Hier wurde die Grafik aus Schritt 4 auf nur 16 Farben reduziert. Die Bildqualität leidet kaum darunter, wenn beim Reduzieren der Farbpalette (Menü: Bild - Farbformat ändern - Palette 8 Bit) die Option: "Palettenoptimierung mit Fehlerdiffusion" genutzt wird.
Webdesign by: Dipl.-Math. Horst Liske, EDV-Beratung HolyWare©,  E-Mail an Horst@holyware.de