Internet-Kurs

GIF-Animationen
Ein animiertes GIF-Bild besteht aus mehreren unbeweglichen Bildern, die schnell hintereinander angezeigt werden, um so die Illusion einer Bewegung zu erzeugen. GIF-Animationen sind im Web sehr beliebt, da sie einfach zu erstellen sind und von allen Browsern, die Bilder darstellen können, unterstützt werden. Für Movie-Dateien, wie Windows Media- und QuickTime-Dateien und auch das zunehmend verbreitete Flash-Format, benötigt der Benutzer ein sog. "Plugin" zur Anzeige. Dieses muß zunächst einmal installiert oder heruntergeladen werden.

PNG
Portable Network Graphics (PNG) ist wie GIF ein Bitmap-Format, das eine verlustfreie Komprimierung verwendet. Gegenüber dem GIF-Format hat das PNG-Format eine Reihe von Vorteilen, wie zum Beispiel der Unterstützung von Vollfarbbildern (24 Bit), so daß es für Fotografien geeignet ist. Obwohl das PNG-Format von den meisten Web-Browsern unterstützt wird, ist es noch nicht annähernd so verbreitet, wie das GIF-Format (obwohl sich dies in Zukunft ändern könnte). Verlustfreie Kompression: PNG komprimiert verlustfrei wie das GIF-Format. Der eingesetzte Kompressionsalgorithmus arbeitet dabei ähnlich wie der des ZIP-Formats. Wiederholungen von Pixelmustern im Bild werden durch Meta-Informationen über diese Muster ersetzt, was vor allem bei Grafiken wie Cliparts, Schriftzügen usw. zu hohe Kompressionsdichten führt. Weniger stark greift dieser Algorithmus dagegen bei Fotos und Grafiken mit vielen feinen Farbübergängen. Das ist ganz ähnlich wie beim Komprimieren von Daten zu ZIP-Dateien, wo sich Binärdateien mit wenigen erkennbaren Byte-Mustern weniger stark komprimieren lassen als z.B. Textdateien. Farbtiefe plus Transparenz: PNG unterstützt wie das JPEG-Format 16,7 Mio. Farben, wahlweise aber auch das Abspeichern mit indizierten Farben, also mit einer begrenzten Farbpalette. So bleibt das Format flexibel und ist für alle Arten von Grafiken nutzbar. Neben den den drei Farbwerten für Rot, Grün und Blau kann das PNG-Format zusätzlich noch einen vierten Wert pro Pixel speichern, nämlich den Alpha-Kanal. Der Alphawert speichert den Transparenzgrad des Pixels. Auf diese Weise werden deutlich feiner abgestufte Transparenz-Effekte möglich, als es mit dem GIF-Format möglich ist. Interlaced-Funktion: Wie das GIF-Format und auch das JPEG-Format in der Variante "progressive" unterstützt PNG das schichtweise Aufbauen der Grafik (Interlaced-Funktion). Bei PNG genügen bereits 1-2% übertragene Daten, um das Bild schemenhaft anzeigen zu können. Informationen zur Gammakorrektur: das PNG-Format erlaubt das Abspeichern einer Reihe von Zusatzinformationen zum Bild, darunter den Gamma-Wert, der z.B. bei der Aufnahme eines Fotos maßgeblich war. Die Unterstützung der Gammakorrektur stellt sicher, daß ein Bild auf unterschiedlichen Monitoren gleich hell oder dunkel angezeigt wird. Informationen zu Bildherkunft und Copyright: das PNG-Format erlaubt das Abspeichern von Textfeldern zu Bildtitel, Bildautor, Bildbeschreibung, Copyright, Erstellungsdatum, Erstellungs-Software, Datenquelle sowie zu rechtlichen und sittlichen Absicherungshinweisen. Animierte Grafiken wie beim GIF-Format sind mit dem PNG-Format allerdings nicht möglich. PNG-Bilddateien verwenden die Dateiendung .png.

Vektor-Bilder
Im Gegensatz zu Bitmap-Bildern, die durch eine Anordnung von Farbwerten definiert sind, bestehen Vektor-Bilder aus Vektoren. Einfach ausgedrückt, ist ein Vektor eine Linie mit einer bestimmten Länge und Richtung. Vektor-Bilder können ebenfalls Kurven enthalten, obwohl technisch gesehen eine Kurve kein Vektor ist. Der wichtige Vorteil von Vektor-Bildern besteht darin, daß sie durch mathematischen Ausdrücke und nicht durch eine Anordnung von Bits beschrieben werden. Hieraus ergeben sich zwei wichtige Eigenschaften: Vektor-Bilder haben eine relativ geringe Dateigröße und lassen sich ohne Verlust der Bildschärfe vergrößern oder verkleinern. Bei der Verwendung von Vektor-Bildern in Ihren Webseiten ergeben sich jedoch zwei Hauptnachteile: Der erste ist, daß Fotos nicht als Vektor-Bilder gespeichert werden können, da es nicht praktisch ist, die eventuell mehrere Millionen Details in einem Foto mit mathematischen Ausdrücken zu beschreiben. Dies ist zwar möglich, die daraus resultierende Bilddatei wäre jedoch wesentlich größer als das Bitmap-Bild des gleichen Fotos. Der zweite Nachteil ist, daß nicht alle Browser Vektor-Bildformate unterstützen. Windows Meta File (WMF) ist das am häufigsten verwendete Vektor-Bildformat. Ein weiteres Format ist Macromedia Flash, das hauptsächlich für Animationen auf Vektor-Basis verwendet wird.

GIF
Graphics Interchange Format (GIF) ist ein komprimiertes Bitmap-Format, das 8 Bits pro Pixel verwendet. Ursprünglich von CompuServe entwickelt, ist GIF eines der zwei am häufigsten im Web verwendeten Bildformate (das andere Format ist JPEG). Da GIF-Bilder nur 8 Bits pro Pixel verwenden, können Sie lediglich bis zu 256 Farben enthalten. Sie sind daher nicht die beste Wahl für Fotografien. Die Komprimierung, die von GIF-Bildern verwendet wird, arbeitet so, daß sie nach sich wiederholenden Bereichen in einem Bild sucht, wie zum Beispiel Bereich der gleichen Farbe. Die Komprimierungsmethode ist verlustfrei, so daß keine Bildinformationen verloren gehen, sie ist jedoch nicht sehr effektiv bei der Komprimierung von Fotos. Von den zwei am häufigsten verwendeten Web-Bildformaten wird das GIF-Format aufgrund seiner verlustfreien Komprimierung bevorzugt für nicht fotografische Bilder, wie Illustrationen und Screenshots verwendet. Bei der Speicherung eines GIF-Bildes können Sie mit der Option "Interlaced" einen schichtweisen Bildaufbau beim Laden der Datei erzwingen (im Gegensatz zu zeilenweisem Laden), siehe Button "Interlaced GIF". Durch die Möglichkeit, eine Farbe beim Abspeichern als Transparent zu definieren können Grafikelemente naht- und randlos in Webseiten integriert werden. Das GIF-Format bietet auch Möglichkeiten der Animation, siehe Button "Animated GIF". GIF-Bilddateien verwenden die Dateiendung .gif.

Bitmap-Bilder
Bitmap-Bilder sind die am häufigsten im Web verwendeten Bildtypen. GIF, JPEG, BMP und PNG sind alle Bitmap-Bildformate. Ein Bitmap ist eine Anordnung von Farbwerten. Jeder Farbwert bestimmt die Farbe eines Pixels (einer der winzigen Punkte, die zusammen das Bild auf Ihrem Bildschirm ergeben) eines Bildes. Für Schwarzweiß-Bilder läßt sich der Farbwert eines jeden Pixels als ein einziges Bit mit Informationen der Form 0 oder 1 ausdrücken. Für Farbbilder werden mehrere Bits pro Pixel benötigt. Je mehr Bits für die Definition der Farbwerte verwendet werden, desto mehr Farben kann ein Bild enthalten und desto größer ist die Dateigröße des Bildes. Heutzutage verwenden die meisten Computer-Grafiken einschließlich der Web-Grafiken 8, 16, 24 oder 32 Bits pro Pixel. 8 Bits und 24 Bits sind hierbei die am häufigsten verwendeten Optionen.
Bitmap-Bilder sind für die meisten Bildtypen gut geeignet (tatsächlich sind sie die einzige Wahl für Fotos), und die am meisten verwendeten Formate werden von allen Web-Browsern mit Ausnahme von reinen Textbrowsern unterstützt. Gegenüber dem anderen wichtigen Bildtyp, den Vektor-Bildern, weisen die Bitmap-Bilder jedoch zwei Nachteile auf: Ihre Dateigröße ist relativ hoch, und bei einer Skalierung erscheinen die Bilder grob oder "pixelig". Die relativ hohe Dateigröße läßt sich durch Komprimierungstechniken, wie bei JPEG, zwar minimieren, aber gegen die pixelige Darstellung bei einer Vergrößerung läßt sich nichts unternehmen. Daher ist es generell nicht empfehlenswert, Bitmap-Bilder in Ihren Webseiten zu vergrößern.

Interlaced GIF und Progressives JPG
Für gewöhnlich werden die Bilder ein Webseite während des Downloads durch den Browser so dargestellt, daß sie zeilenweise von oben nach unten aufgebaut werden. Interlaced GIf- und Progressive JPG-Dateien werden jedoch sofort in ihrer vollen Größe angezeigt, und mit fortschreitendem Download erhöht sich die Detailtiefe des gesamten Bildes. Dieser Schritt ähnelt dem schrittweisen Scharfstellen eines Bildes. Mit diesen Bildformaten kann sich der Besucher einer Webseite eine Vorstellung von dem Aussehen des Bildes machen, während er darauf wartet, daß das Bild komplett geladen wird, anstatt sich wie bei herkömmlichen GIF- und JPG-Variationen mit einem scharf dargestellten kleinen Bildausschnitt zufrieden geben zu müssen. Um ein GIF-Bild als Interlaced oder ein JPEG-Bild als Progressiv zu erstellen, wählen Sie bei der Speicherung des Bildes einfach die gewünschte Option aus.

JPG (or JPEG)
JPEG ist die Abkürzung für Joint Photographic Experts Group - die Organisation, die das Format entwickelt hat. Es handelt sich um ein hochkomprimiertes 24- oder 32-Bit Bildformat. JPEG-Bilder lassen sich mit Hilfe einer verlustreichen Komprimierungstechnik auf einen Bruchteil der unkomprimierten Größe komprimieren. Diese Komprimierungsmethode wird als verlustreich bezeichnet, da sie tatsächlich einige der Bildinformationen verwirft. Dies ist möglich, da das menschliche Auge gegenüber subtilen Farbänderungen nicht sehr empfindlich ist. Der Grad der Komprimierung läßt sich bei der Speicherung des JPEG-Bildes festlegen. Je höher der Komprimierungsgrad ist, desto mehr Informationen werden für die Verringerung der Dateigröße verworfen. Bei höheren Komprimierungsgraden ist der Detailverlust deutlich sichtbar.Dennoch ist JPEG das für die Darstellung von Fotografien im Web verwendete Format, das über hervorragende Komprimierungsgrade verfügt und eine Vollfarbdarstellung (24 Bit) unterstützt. Verluste durch Kompression entstehen bei JPEG-Grafiken vor allem bei scharfen Farbübergängen im Bild, also bei Ecken und Kanten von abgebildeten Gegenständen ("Ränder fransen aus"). Für Bilder mit wenigen Farben, aber klaren Konturen, also z.B. für einfache Zeichnungen, scharfe Schriftzüge usw. ist das JPEG-Format deshalb nicht geeignet. Seine Stärke zeigt das Format dagegen beim Abspeichern von Fotos und anderen Grafiken, in denen sehr feine Farbverläufe vorkommen. Selbst bei geringer Kompression sind die Dateigrößen schon um ein Vielfaches kleiner als etwa bei Bitmap-Grafiken. Sogar den Bildschirm füllende Fotos lassen sich mit JPEG bei brauchbarer Qualität auf Dateigrößen bringen, die im Web als akzeptabel gelten können. Eine Variante von JPEG-Grafiken, so genannte "progressive JPEG-Grafiken", erlauben - ähnlich wie beim GIF-Format in der Variante "interlaced" - zuerst eine vollständige, aber noch undeutliche Fassung der Grafik am Bildschirm beim Bildaufbau, siehe Button "Progressive JPG". Beim JPEG-Format können Sie bei besseren Grafikprogrammen zwei Parameter selbst bestimmen: DPI-Dichte: Das ist die Punktdichte (dpi = dots per inch). Bei JPEG-Dateien, die Sie nur für die Anzeige in Web-Seiten benötigen, genügt ein Wert zwischen 70 und 100 dpi. Falls Sie die Grafik ausdrucken wollen, benötigen Sie allerdings deutlich mehr dpi. Kompressionsfaktor: Je höher der Kompressionsfaktor, desto schlechter die Bildqualität. Je geringer der Kompressionsfaktor, desto größer die Datei. JPEG-Bilddateien verwenden die Dateiendungen .jpg oder .jpeg.