Jetzt lerne ich Dreamweaver MX 2004: Einfach programmieren mit HTML, CSS, JavaScript, PHP und ASP

KAPITEL 4
Grafiken erstellen und einsetzen (S. 79-80)

Kaum eine Website kommt ohne Bilder aus. Nicht immer jedoch verschönern diese wirklich die Seite. Stümperhaft eingefügte und bearbeitete Grafiken ruinieren eher den vielleicht sonst guten Gesamteindruck einer Webseite. In diesem Kapitel erfahren Sie, wie Sie:

Grafiken professionell erstellen,
in eine Webseite einfügen und
als Hintergrundbild verwenden.

4.1 Die verfügbaren Grafikformate

Im Internet gibt es grundsätzlich zwei Gruppen von Grafikformaten, Bitmapbzw. Rastergrafikformate und Vektorgrafikformate. Zu letzteren zählen Flash und SVG, die jedoch für Fotos und Schaltflächen nicht optimal sind. Beide werden hier außer Acht gelassen, da ihre Erstellung und Bearbeitung ein eigenes Buch füllen würde.

Nachfolgend geht es ausschließlich um Rastergrafikformate. Davon gibt es eine ganze Reihe, im Internet werden jedoch nur JPEG-Grafiken, GIF-Grafiken und PNG-Grafiken genutzt. Allen ist gemeinsam, dass zu jedem Pixel Informationen über den Pixel, das heißt seine Farbe, gespeichert werden. Wie viel Speicherplatz dafür pro Pixel notwendig ist, hängt von der Anzahl Farben, also der Farbtiefe, ab, die in dem jeweiligen Format gespeichert werden kann. Damit die Dateien nicht zu groß werden, verfügen alle drei Formate über Möglichkeiten die Datenmengen zu komprimieren. Das GIF-Format verwendet zur Größenreduktion eine Farbpalette und kann maximal 256 Farben speichern, wovon eine transparent dargestellt werden kann. Speichern Sie ein Bild, das aus maximal 256 Farben besteht mit optimierter Farbpalette ab, gehen bei Verwendung des GIF-Formats keine Bildinformationen verloren.

Zur Komprimierung kommt beim GIF-Format zusätzlich die LZW-Komprimierung zum Einsatz, die gleichfarbige, nebeneinander liegende Pixel zu einer Information zusammenfasst. Das bedeutet, dass Bilder mit großen Flächen aus einer Farbe eine geringere Größe haben als Bilder, in denen sehr viele kleinteilige Details gespeichert sind.

Beim JPEG-Format mit minimaler Komprimierung gehen kaum Bildinformationen verloren. Die Komprimierung erfolgt auch hier dadurch, dass Informationen über gleichfarbige, nebeneinander liegende Pixel zusammengefasst gespeichert werden. Dennoch geht das JPEG-Format nicht so exakt vor wie das GIF-Format, so dass kleinere Informationsverluste auftreten. Verwenden Sie eine stärkere Komprimierung, entstehen an den Kontrastgrenzen im Bild häufig so genannte JPEG-Artefakte, die sehr unschön aussehen. Beim JPEGFormat, sollten Sie also darauf achten, dass die Komprimierung nicht zu sehr die Bildqualität beeinträchtigt. Im Gegensatz zu GIF-Bildern können Sie in JPEG-Bildern jedoch bis zu 16,78 Mio. Farben speichern.

Das PNG-Format ist verhältnismäßig neu und liegt in zwei Versionen vor. PNG-8 (8-Bit Farbtiefe) und PNG-24 (24-Bit-Farbtiefe). PNG-8 entspricht dem GIF-Format, was die Komprimierung und die maximale Anzahl der Farben betrifft. Es wird zwar ein anderer Logarithmus für die Komprimierung verwendet, das Ergebnis und die damit verbundenen Dateieigenschaften bleiben jedoch gleich. Das PNG-24-Format verwendet, wie das GIF-Format, eine Farbpalette, kann aber 16,78 Mio. Farben speichern. Beide PNG-Formate unterstützen Transparenzen also durchsichtige Bereich in der Grafik, die jedoch von vielen Browsern nicht dargestellt und von den meisten Grafikprogrammen nicht gespeichert werden. Für die Praxis bedeutet das:

1. Verwenden Sie das GIF-Format, wenn Sie transparente Bereiche benötigen, bspw. für Schaltflächen mit abgerundeten Ecken in Navigationsleisten.

2. Nutzen Sie das JPEG-Format oder PNG-24 für Fotos und Farbverläufe, die mehr als 256 Farben benötigen, aber keine Transparenzen enthalten.

3. Vermeiden Sie beim JPEG-Format eine zu starke Komprimierung, um die Qualitätsverluste zu minimieren.