Yale C/AIM Web Style Guide

Überblick

Web-Grafik

Einführung

Farbbildschirme

Dateiformate für Grafiken

Interlaced GIF

Transparentes GIF

JPEG Grafiken

Zusammenfassung Formate

Illustrationen

Optimierung von Grafiken I

Optimierung von Grafiken II

Height & width Tags

Farbige Hintergründe

Imagemaps

Es gibt noch ein anderes Format für Grafikdateien, das im Web häufig verwendet wird, ein Komprimierungssystem namens Joint Photographic Experts Group (JPEG). Es wird dazu verwendet, die Größe von Grafikdateien auf ein Minimum zu beschränken. JPEG-Bilder sind Vollfarbbilder (24-Bit oder True Color). Damit unterscheiden sie sich von GIFs, die sich auf höchstens 256 Farben in einem Bild beschränken. Fotografen, Künstler, Grafiker, Mediziner, Kunsthistoriker und andere Berufsgruppen, für die die Bildqualität von großem Interesse ist und die bei der Farbtreue keine Abstriche machen können, sind sehr an Bildern im JPEG-Format interessiert..
Es verwendet eine sehr komplexe mathematische Technik namens Discrete Cosine Transformation. Mit ihrer Hilfe wird eine Gleitskala der Grafikkomprimierung produziert. So kann man wählen, wie weit man ein Bild im JPEG-Format komprimieren will. Dabei entscheidet man allerdings auch die über Qualität des Bildes. Je stärker man ein Bild mit Hilfe von JPEG komprimiert, desto schlechter wird seine Qualität. Man kann unglaublich niedrige Komprimierungsraten erzielen. Es kann Grafiken um bis zu 100 mal kleiner machen als die Originaldatei. Das wird dadurch möglich, daß der JPEG-Algorithmus beim Komprimieren des Bildes unnötige Daten eliminiert. Das ist allerdings auch der Grund dafür, daß diese Technik als sehr verlustreich gilt. Wie die Ergebnisse aussehen können, läßt sich leichter zeigen als erklären. Beachten Sie die zunehmende Verschlechterung der Bildqualität bei immer niedriger werdender JPEG-Komprimierung:

Example of JPEG compression artifacts in images.

Die obenstehende Abbildung zeigt ein Originalfoto (a) und drei Detailansichten bei verschiedenen Stärken von JPEG-Komprimierung: exzellente Qualität (b), gute Qualität (c) und schlechte Qualität (d). Beachten Sie das kästchenartige Aussehen des Bildes in (d). Das karierte Erscheinungsbild und die dunklen Störpixel im grünen Hintergrund sind klassische Phänomene der JPEG-Komprimierung.
Darunter ein weiterer Blick auf JPEG-Komprimierungen. Beim obersten Bild handelt es sich um ein Interlaced GIF. Die mittlere Abbildung ist dasselbe Bild als JPEG-Datei in Photoshop auf eine mittlere Qualität komprimiert. Der Delphin ganz unten ist ebenfalls ein JPEG-Bild, auf eine schlechte Qualität komprimiert. Beachten Sie die starke Komprimierungsstörung und die Verzerrung beim unteren Delphin.Die Einsparungen, die sich durch das Komprimieren bei der Ladezeit erreichen lassen, sind es nicht wert, daß Ihre Bilder entstellt werden.

Example GIF image.

Example JPEG image compressed at medium quality.

Example JPEG image compressed at poor quality.

Speichern Sie unbedingt Ihre unkomprimierten Originalbilder!
Wenn Sie ein Bild mit Hilfe von JPEG komprimieren, gehen unwiederbringlich Daten verloren. Da Sie diese Daten auf keinen Fall zurückholen können, sollten Sie immer eine unkomprimierte Originaldatei Ihrer Grafik speichern.
Eine neue Form der JPEG-Datei namens Progressive JPEG ermöglicht es, daß die Grafiken so wie bei Interlaced GIFs schrittweise auf dem Bildschirm aufgebaut werden. Die meisten Bildbearbeitungsprogramme unterstützen jedoch noch keine solchen Progressive JPEG-Dateien. Debabilizer 1.6 für den Macintosh ist eines der wenigen. Wie bei Interlaced GIFs dauert das Laden auf die Seite auch bei Progressive JPEG-Bildern meist länger als bei Standard-JPEGs. Der Vorteil ist, daß dem Leser eine schnellere Seitenansicht geboten wird.

JPEG-Bildtypen
Der JPEG-Algorithmus wurde für das Komprimieren konventioneller Fotos optimiert und eignet sich auch ausgezeichnet für komplexe, realistische Illustrationen, die wie Fotos aussehen. Fotos und Grafiken mit glatten Übergängen zwischen den einzelnen Farben und Farbtönen, die nur wenige Stellen mit scharfen Kontrasten oder Rändern aufweisen, eignen sich am besten für die JPEG-Komprimierung. Die meisten Elemente der Seitengestaltung wie Diagramme, Schrift innerhalb von Bildern und viele Illustrationen setzen sich aus scharf abgegrenzten Grafiken und intensiven Farben zusammen, wie man sie auf Fotos kaum findet (Teil a; b ist eine Vergrößerung des Diagramms). Die JPEG-Komprimierung ist für viele computergenerierte Grafiken, Buttons, Bildinschriften oder andere scharf abgegrenzte künstlich kolorierte Objekte, wie sie in Illustrationen oder in Diagrammen vorkommen, nicht unbedingt geeignet. Wenn diagrammartige Bilder mit JPEG komprimiert werden, weisen sie ein Störmuster von Komprimierungsmüll rund um die Übergangsbereiche auf (siehe c unten). Der JPEG-Algorithmus möchte fließende Farbtonübergänge sehen und kann die scharfen Übergänge an den Rändern diagrammartiger Grafiken nicht richtig reproduzieren:
Example of JPEG noise in a diagrammatic image.

Referenzen

Siegel, D. 1996. Creating killer web sites. Indianapolis: Hayden Books.

www.killersites.com

Weinman, L. 1996. Designing Web graphics. Indianapolis: New Riders.

www.lynda.com
Copyright 1997 P. Lynch and S. Horton,
   all rights reserved. Yale University   Revised January 1997.