Grafiken und Co.

Im Web spielen im wesentlichen drei Grafikformate eine Rolle: GIF, JPG/JPEG und PNG. Diese unterscheiden sich vorallem in folgenden relevanten Punkten: Anzahl der darstellbaren Farben, Kompression, Qualität und Speicherbedarf sowie der Transparenzfähigkeit.

GIF (Graphics Interchange Format) ist das älteste Format. Es unterstützt nur 256 Farben und ermöglicht die Speicherung von mehreren Bildern in einer Datei. Daraus folgt die Verwendung vorallem für animierte Grafiken, transparente Grafiken, Logos und Bilder mit scharfen Kanten. Die Transparenz bezieht sich immer nur auf eine Farbe. Aufgrund der geringen Anzahl von Farben (8Bit) ist der Speicherbedarf sehr klein. Die Kompression ist verlustfrei.

JPG / JPEG (Joint Photographic Experts Group) ist das am meisten verwendete Format und vorallem für Fotos und Verläufe geeignet.

Es kann bis zu 16,7 Millionen Farben darstellen.

JPGs können in unterschiedlicher Qualität gepeichert werden, woraus sich dann der endgültige Speicherbedarf und auch der Qualitätsverlust ergibt. Es gibt noch sogenannte progressive JPGs die beim Ladevorgang im Gegensatz zum normalen JPG nicht zeilenweise aufgebaut werden, sondern gleich als ganzes, aber  unscharfes Bild erscheinen, welches dann nach und nach schärfer wird.

PNG-24 / PNG-8 (Portable Network Graphics, 24 Bit/8 Bit) kann bis zu 16,7 Millionen Farben darstellen und unterstützt Transparenz einzelner Farben und Alphakanäle. Daher eignet es sich vorallem für transparente Grafiken und Verläufe. PNG-8 entspricht dem GIF-Format   unterstützt auch nur 256 Farben und eine 1bit-Transparenz.  PNG-24 stellt dagegen auch Halbtransparenzen dar. Zur Darstellung von Halbtransparenzen benötigt man aktuelle Browser. (ab IE7). Die Kompression bei PNG ist verlustfrei. Durch die Option "Interlaced" beim Speichern kann man wie beim progressiven JPEG eine schnellere Gesamtdarstellung des Bildes bewirken. Ein Beispiel für die Wirkung von Halbtransparenzen kann man auf folgender Website sehen: Test und Erfahrungen Provider WIX

Das PNG-Format benötigt den meisten Speicherplatz. Beim Speichern kann man jedoch die Farbanzahl einstellen und dadurch den Speicherbedarf verringern.

Als Software für den Einsteiger empfiehlt sichzum Beispiel die Freeware GIMP. (aktuelle Version ab XP SP3) oder IRFANVIEW. Am einfachsten bei einer der PC-Zeitschriften im Downloadbereich suchen.

WebP ist ein von Google entwickeltes Format, das wohl in der Zukunft eine Rolle spielen wird. Es weist eine noch höhere Kompressionsrate als JPG auf (10-30% kleiner als das JPG) und dazu noch eine höhere Qualität. Animationen lassen sich mit aktuellen Features auch darstellen. Derzeit ist das Format jedoch noch nicht so gebräuchlich, da nicht alle Browser das Format unterstützen. Durch die kleineren Dateien würde das Web entlastet, Ladezeiten verkürzen sich (SEO relevant)

Für die Bearbeitung von Bildern sollte man ein verlustfreies Format wie PNG oder TIFF wählen, da bei jedem Speichervorgang die Qualität durch die Kompression etwas verringert wird, was irgendwann zu sichtbarem Qualitätsverlust führt. Erst das fertige Bild kann man dann als komprimierte Variante speichern. Zudem ermöglichen die verlustfreien Formate das Arbeiten mit Ebenen und Spezialeffekten. Daher die Bilder der DIGI-Cam am besten erst von JPEG (Standardspeicherformat der Digitalkameras) in PNG/TIFF umwandeln. (Originale sichern, falls alles schief geht).

Eigene Bilder der Kamera haben fürs Web eine zu hohe Auflösung die sowieso nicht dargestellt werden kann und nur Speicherplatz verschwendet und zu  einer zu hohen Ladezeit deiner Webseite führt. Die fürs Web notwendige maximale Auflösung liegt in der Regel bei 800x600 Pixel. Bei einer "normalen" BIldschirmauflösung von 1280x1024 würde das Bild also rund 2 Drittel der Bildschirmbreite einnehmen. Das entspricht meist der gesamten Breite einer Webseite. Wird das Bild also kleiner dargestellt, kann man durch Verringerung der Auflösung und Größe das Bildes also problemlos Speicherplatz sparen und die Webseite schneller machen. Mit HTML kann man Bilder auch skalieren, also vergrößert darstellen. Bis 10% Vergrößerung ist kaum Qualitätsverlust wahrnehmbar, danach wird das Bild mit steigender Vergrößerung zunehmend und sichtbar unschärfer. Man kann das Bild also sogar noch etwas kleiner als notwendig machen.