Informatikdienste
Services | Internet und Netzwerk | Arbeitsplätze | Schulung | Software | Publikationen | Search

216 Web Farben

  1. Bilder und Illustrationen im WWW publizieren
  2. JPEG-Bilder

1. Bilder und Illustrationen im WWW publizieren

Kritiker behaupten, dass im World Wide Web weitaus die meisten Bilder nur als Schmuckwerk dienen. Mag sein -- aber trotzdem gibt es Grafiken und Bilder, die den Text wirkungsvoll unterstützen können und einen echten Informationsgehalt besitzen, seien es Inline-Bilder oder Verweise auf externe Bilder.

Der bekannteste WWW-Browser zeigt Bilder im GIF- und JPEG-Format direkt an, ohne einen sogenannten External Viewer bemühen zu müssen. Ein WWW-Autor hat sich daher nicht nur mit dem Hypertext-Format (HTML) zu beschäftigen, sondern auch mit den zwei wichtigen Grafikformaten GIF und JPEG. Dies ist das Thema des vorliegenden Dokuments. Während sich GIF vor allem für Strichzeichnungen, Illustrationen und Logos eignet, ist JPEG eher für fotografische Bilder gedacht, da JPEG mit einem kontrollierten Informationsverlust verbunden ist. Auf jeden Fall angezeigt ist JPEG bei Farbverläufen und "continuous tone".

In der Praxis führt die PostScript-to-GIF-Konversion zu zwei typischen Problemen: schlecht lesbare Schriftzeichen (font rendering) und ungenaue Farbreproduktion (z.B. Violett statt Blauton).

GIF-Grafiken

GIF, das für "Graphic Interchange Format" von Compuserve steht, ist ein einfaches Format für Farbbilder, da die Farbpalette max. 256 Farben unterscheidet. GIF-Files sind LZW-komprimiert (Lempel-Ziv), d.h. die Methode erkennt und ersetzt wiederkehrende Binärfolgen (Unisys-Patent). Ein GIF-Beispiel:

EUROSPIDER

Weil fast jede Text-, Grafik- und Publishing-Software den PostScript-Code erzeugen kann und praktisch alle Plattformen über einen PostScript-Treiber verfügen, gehen wir von PostScript-Code aus, um im World Wide Web Bilder und Illustrationen zu publizieren. Die erste Frage lautet deshalb, wie man diese PostScript-Files am besten in brauchbare GIF-Dateien umwandelt.

Der Konversionsablauf kann wie folgt schematisiert werden: 

			         |
				 v
			     PostScript
				 |
				 v
			    (ghostscript)	 
			         |
				 v
                                PPM
				 |
				 v
		             (ppmtogif)		          
		                 |
				 v
				GIF
Die Konversion basiert somit auf dem PostScript-Interpreter Ghostscript. Das Programm gs wird übrigens auch vom PostScript-Viewer Ghostview aufgerufen.

GIF-Bilder können einen transparenten Hintergrund besitzen, d.h. die gleiche Farbe wie die Umgebung annehmen. Und das "interlaced" Format baut die Bilder nicht sequentiell auf, sondern in mehreren Durchgängen (nicht von allen WWW-Klienten unterstützt). Ein "animated GIF" besteht aus einer Bilder-Sequenz.

Sensitive Karten

Bei einer sensitiven Karte können Verweise als Positionen angeklickt werden. Für jede sensitive Karte ist ein Bild im GIF-Format erforderlich. Ein einfaches Map-File (NCSA-Server-Beispiel veraltet) präsentiert sich wie folgt: 
	default /rzu/ps/none.html
	rect /rzu/ps/areatext.html 1,1     620,80
	rect /rzu/ps/areafill.html 40,200  600,270
Das Beispiel enthält zwei rechteckige Bereiche. Der Ursprung des Koordinatensystems befindet sich oben links auf einer GIF-Grafik. Empfohlen ist allerdings die client-side image map. Ein Beispiel: 
   <MAP NAME="Info-4"> 
   <AREA SHAPE="RECT" COORDS="21,18,101,218" HREF="#Link1">
   <AREA SHAPE="RECT" COORDS="101,18,182,218" HREF="#Link2">
   </MAP>
   <IMG SRC="Info-4.gif" USEMAP="#Info-4">
Die Koordinaten werden wiederum in Bildschirm-Pixel spezifiziert.

PostScript-to-GIF

Eine Grafik kann entweder ein externes EPS-File oder Bild sein, oder eine Abbildung, eine Formel oder Tabelle in einem Dokument einer beliebigen Anwendung, z.B. FrameMaker. WebMaker generiert für jede Grafik ein MIF-File: WM USER GUIDE
FrameMaker-MIF für Text und Grafik (aus dem WebMaker User Manual)

WMGRAPH: Zuerst konvertiert der FrameMaker-Treiber fmbatch die MIF-Files in das PostScript-Format. Darauf kommt der PostScript-Interpreter gs zum Zug, der ein ppm-File erzeugt. Dieser Datenhaufen wird schliesslich vom Kommando ppmtogif ins GIF-Format umgewandelt. PostScript-to-GIF verwendet ppm somit als Zwischenformat.

Die Auflösung beträgt bei der Bildschirmdarstellung z.B. 72 dpi. PostScript-to-GIF setzt das Paket PBMplus voraus. Verwendete Kommandi:

Die zwei Varianten

Die oben erwähnte Variante arbeitet mit dem Ghostscript-Interpreter.

Alternativ können mit einem Adobe-Interpreter oder mit ScreenShots TIFF-Files erzeugt werden, die anschliessend ins GIF-Format umgewandelt werden (z.B. mit Adobe Photoshop oder xv). Dies ist jedoch mit Handarbeit verbunden. Der Vorteil dieser WYSIWYG-Methode (What You See Is What You Get) liegt aber darin, dass man ein Bild gleichzeitig verkleinern/vergrössern, zuschneiden oder farblich verbessern kann. Zwar läuft diese Variante nicht automatisch ab, aber die Erfahrung zeigt, dass häufig ästhetische Gründe den WWW-Autor zur Handarbeit zwingen. Weil die Bildschirmdarstellung eine viel kleinere Auflösung besitzt als eine gedruckte Grafik (PostScript-Format), müssen manchmal andere Schriftgrössen verwendet werden. Eine mögliche Strategie besteht darin, die PostScript-Grafiken vor der Umwandlung auf 120% oder 140% zu vergrössern.

PostScript-to-GIF: Grundsätzlich können 2 Varianten unterschieden werden. Die Alternativmethode verwendet als Zwischenformat meist tiff statt ppm. Auch TIFF kann Millionen von Farben unterscheiden (24 Bits pro Pixel).

Verankerung im HTML-File

Schlussendlich werden die erzeugten Grafikfiles wieder im HTML-File verankert. Beispiel: 
	<IMG SRC="http://www.unizh.ch/gif/heureka.gif">
Das IMG-Element ist seit HTML Level 1 gültig. 
Image Import

Use the <IMG> tag to import graphics. <IMG> takes these attributes: 

ALIGN 
   Top, middle or bottom 

ALT 
   Alternative text (for display-text-only environments) 

SRC ISMAP 
   URL of the object to import.
Das ALT-Attribut spielt dann eine Rolle, wenn ein Browser keine Bilder anzeigen kann. Beispiel: 
        <IMG SRC="formel.gif" ALT="Fourier:"> blah bla
Demgegenüber gibt das Attribut ISMAP eine sensitive Karte an. NCSA-Server-Beispiel, veraltet: 
	<IMG SRC="SBB.gif" ISMAP>

Das im X-Window-System verwendete Farbmodell

RGB
Das Farbmodell Red-Green-Blue (RGB, "Helligkeit addieren") wird nicht nur im X-Window-System, sondern generell bei der Bildschirm-Darstellung verwendet: 
 R + G = Gelb
 R + B = Magenta
 G + B = Zyan
 R + G + B = Weiss
PseudoColor: die X11-Ressourcen können nur eine beschränkte Zahl von Farben handhaben (Farbpalette).

Siehe auch Color PostScript. Und was bedeutet Gamma-Korrektur?

Farbkalibrierung: PostScript Level 2 unterstützt mehrere geräteunabhängige Farbräme, die auf CIE 1931 XYZ basieren. Eine Seitenbeschreibung kann dann die Farben so spezifizieren, wie sie auch vom menschlichen Auge empfunden werden -- entsprechend den drei Farb-Rezeptoren im menschlichen Auge. Das Ziel des CIE-Standards ist, auf unterschiedlichen Ausgabegeräten einheitliche Resultate zu erreichen -- unabhängig von Drucktechnologie, Toner und Bildschirmfarben.

Beispiele für mit PostScript-to-GIF umgewandelte Farbgrafiken

Eine Macintosh-Grafik: HEUREKA
Abbildung Heureka

Eine SAS-Grafik: Abstimmungsergebnisse "Neinsager" (gif)

Font Rendering

Font-Technologie: Im Gegensatz zu einem Adobe-Interpreter kann Ghostscript 2.6 die sogenannten Pixelsprünge nicht verhindern, d.h. es können uneinheitliche Strichstärken bei vertikalen Stämmen resultieren.

Ghostscript 3.33: Typ-1-Fonts liefern bessere Resultate (Font-Kennung .pfa). Beispiel eines Typ-1-Fonts bei GhostScript -- Utopia-BoldItalic: UTOPIA

Eine derartige Typ-1-Fontdatei besteht im Wesentlichen aus zwei Teilen:

  1. Font-Dictionary mit elf Einträgen: FontInfo, FontName, Encoding, FontType, usw.
  2. Der verschlüsselte Teil mit den beiden Dictionaries Private und CharStrings. Diese beschreiben die Umrisse der einzelnen Buchstaben und Symbole und liefern die Hint-Informationen. Der Operator eexec: "The eexec operator causes the contents of currentfile to be decrypted and then executed in a manner similar to the exec operator."
Ghostscript-Fonts mit der Kennung ".gsf" liefern in vielen Fällen hässliche Resultate.

Beispiel mit Helvetica (gif)
Siehe Font-Technologie.

2. JPEG-Bilder

Das JPEG-Format eignet sich vor allem für fotorealistische Bilder mit Tausenden von verschiedenen Farben. Falls ein WWW-Browser (z.B. Mosaic) das JPEG nicht unterstützt, muss ein sog. External Viewer die Kontrolle übernehmen, um das Bild darzustellen.

Die neuen Kompressionsmethoden wie Subsampling oder ADCT (Adaptive Discrete Cosine Transform) können die Uebertragung von Farbbildern wesentlich beschleunigen. Der JPEG-Algorithmus (Joint Photographic Expert Group), der mit einem kontrollierten Informationsverlust verbunden ist, kann Bilddaten bis zum Faktor 50 verdichten. Das JPEG-Verfahren komprimiert Bilddaten, indem es die Frequenzanteile blossstellt, "in denen nichts passiert".

Siehe: Bildkomprimierung, JPEG.

Achtung Raster!

Faustregel: Wandle nie ein GIF-Bild ins JPEG-Format, oder umgekehrt, um, weil dabei ein bereits komprimiertes Bild nochmals komprimiert wird.

Die Kombination von reduzierter Farbpalette und Erzeugen von JPEG ist grundsätzlich heikel, weil hier das Dithering dazwischen kommt. Die meisten GIF-Bilder sind gerastert (Dithering). DIES IST GANZ DEUTLICH zu sehen, wenn Sie ein Bild vergrössern. Wenn nun ein bereits aufgerastertes Bild in JPEG gewandelt wird, gibt es ein Problem. Auch beim Belichten von Bildern gilt: möglichst die Original-Graustufen verwenden -- erst ganz zuletzt aufrastern. Um das Dithering zu korrigieren, könnte man das Bild noch glätten (smooth), bevor man dieses in JPEG umwandelt.

Das Ziel der Rastertechnik ist es, Graustufen oder Farbstufen zu simulieren (engl. Dithering). Die Raster-Technik wandelt die Bilder-Graustufen in Kombinationen von Bildpunkten um, in sogenannte halftone dots. Diese Technik wird etwa dann angewandt, wenn das Endgerät (marking engine) nur schwarze und weisse Bildpunkte kennt.

Bilder scannen mit Photoshop

Zusatz-Module diverser Scanner-Hersteller ermöglichen es, Bilder direkt in Photoshop einlesen zu können. Achten Sie beim Scannen von Bildern darauf, in welchem Farbraum die Bilddaten abgespeichert werden -- meist ist RGB voreingestellt. Applikationen wie Photoshop können ein digitalisiertes Bild von einem Farbraum in einen anderen übertragen (Modus). Aber das Programm Photoshop dient auch als Formatkonverter, z.B. um ein TIFF File- in ein JPEG-, GIF- oder EPS-File umzuwandeln. Daneben bietet Photoshop zahlreiche Funktionen:

Literatur: Jens Kurlanda: Dokumente für Hypertext aufbereiten, Zeitschrift iX 11/1994, Verlag Heinz Heise.

Uni ZH | Informatikdienste | PostScript | 216 Web Farben
HTML 3.2 Last update: Friday, 23-Aug-2002 09:29:30 CEST by vo