Grafiken
 

7 Grafiken einbinden


Grafiken haben immer eine rechteckige oder quadratische Form, auch wenn das Bild eine Kugel darstellt.
Sie ist eingebettet in einem Quadrat.
Für den Webmaster sind folgende technische Kriterien interessant:
- die Dateigröße
- das Dateiformat und
- der Speicherort der Grafik


7.1 Grafikformate und Dateigröße

Nehmen wir uns mal die Computerbilder (oder auch Grafiken) unter die Lupe. Das meine ich wörtlich. Mit einem Bildbearbeitungsprogramm vergrößern wir uns einfach mal eine Grafik. An einer beliebigen Stelle und so weit bis es nicht mehr geht.
Vom Bild können wir nichts mehr erkennen. Wir sehen aber viele quadrate und jedes Quadrat ist gleichmäßig mit einer Farbe gefüllt.
Das sind die einzelnen Bildpunkte. Nehmen wir mal an, in einer Zeile sind 800 Bildpunkte nebeneinander gereiht.
Und wir nehmen weiter an, dass 600 Zeilen vorhanden sind. Dann haben wir es schon mit 480000 Bildpunkten zu tun.
Wie sich so eine Farbe zusammen setzt haben wir schon im Kapitel 4.1 kennen gelernt.
Zur Darstellung für jeden der 3 Farbwerte (Rot, Grün und Blau) benötigt der Computer 1 Byte.
Somit werden für jeden Bildpunkt, mit 16 Millionen Farben, im Arbeitsspeicher 3 Byte ( 8Bit = 1Byte) benötigt.
Eine 800 x 600 Pixel große Datei beansprucht also 800 x 600 x 3 = 1440000 Byte = 1,4 Mb.
Um Modembenutzern nicht vor den Kopf zu stoßen, müssen wir die Dateigröße drastisch verringern. Dadurch verkürzen sich die Ladezeiten, unsere Seite baut sich zügig auf.
Hierbei gibt es keine festen Werte. Es sind Erfahrungen, dass ein Bild nicht größer als 40 Kb sein sollte. Dies erreichen wir durch:
- die Wahl eines bestimmten Dateiformates mit Komprimierungsmöglichkeit
- die Verringerung der Bildabmaße
- die Verringerung der Bildauflösung.

ACHTUNG, dies ist immer ein Kompromiss, denn die Bildqualität verschlechtert sich auch.


7.1.1 GIF


CompuServe Graphics Interchange (*.gif), ist im Internet häufig vertreten. Es speichert maximal 256 unterschiedliche Farben und hat verlustfreie Komprimierungseigenschaften. Deshalb wird es vorwiegend für plakative Grafiken wie Schriftzüge, Logos oder Zeichnungen verwendet.
Es beinhaltet noch 3 andere, bemerkenswerte Eigenschaften.
- Die Option Interlaced bewirkt, ein sofortiges Anzeigen des Gesamtbildes. Es wird erst nach und nach klarer.
- Bereiche eines Bildes lassen sich transparent abspeichern.
- Es lassen sich Animationen erstellen, diese kleinen bewegten Bildchen.


7.1.2 JPEG


Joint Photografic Expert Group (*.jpg), ist neben GIF das meistgebrauchte Dateiformat im WWW. Es speichert Dateien im Modus 16 Millionen Farben und hat, je nach verwendetem Bildbearbeitungsprogramm, stufenlose Komprimierungseigenschaften.
ACHTUNG, beim komprimieren werden dauerhaft Bildinformationen vernichtet.

JPEG bietet die Speicherung mit "Schrittweiser Darstellung" an. Das ist vergleichbar der Option Interlaced bei GIF.

JPEG wird hauptsächlich zur Speicherung von Bildern (Fotos) verwendet.

Schau dir das mal an...


7.1.3 PNG


Portable Network Graphic Format (sprich: ping), ist ein neues Kind im Internet.
Das vom World Wide Web Consortium (W3C) entwickelte und als Standard verabschiedete Format ist lizenzfrei und soll GIF- und JPEG-Bilder ablösen - komprimierend und ohne gravierende Qualitätseinbußen.
Es sollte alle Eigenschaften des GIF-Formates aufweisen. Darüber hinaus bietet PNG folgende zusätzliche Eigenschaften:
- größere Farbtreue durch TrueColor mit bis zu 48 Bit pro Pixel
- Unterstützung indizierter Farb- und Graustufen-Bilder
- Alpha-Kanal zur Realisierung abgestufter Transparenzeffekte oder für Auswahlbereiche, die später als Masken verwendet werden
- Integritäts-Check, der erkennt, ob ein Übertragungsfehler vorliegt
- Möglichkeit von automatischen Gamma-Korrekturen, um Helligkeitsschwankungen auf unterschiedlichen Plattformen auszugleichen

PNG bietet eine sehr gute Darstellungsqualität, und nicht zuletzt besticht PNG durch eine verhältnismäßig starke, verlustfreie Komprimierung.
Mal sehen, was uns da die Zukunft bringen wird.


Weiter zum Punkt 7.2