«Web und Multimedia» <Grundlagen und Technologien> Grafikformate 1
Grafikformate Es lassen sich grundsätzlich zwei Arten von «Computerbildern» unterscheiden: 1. Rasterbilder (Bitmaps) d.h. «Pixelgrafiken» 2. Vektorbilder bzw. Vektorgrafiken 2
Grafikformate: Vektorgrafiken Vektorgrafikformate bestehen aus den mathematischen Beschreibungen eines Bildes (z.b. die Formel für den Kreis). Deshalb sind sie unabhängig von der Auflösung; sie können jeder Grösse angepasst werden (Skalierung), um auf dem Bildschirm, im Druck etc. dargestellt zu werden. Quelle: Siegel: WEB SITE DESIGN 3
Grafikformate: Vektorgrafiken In der Datei einer Vektorgrafik stehen nur die Beschreibungen der Objekte. Die anzuzeigende Grafik wird zur Laufzeit aus den beschreibenden Daten erzeugt. Ihr Speicherplatz ist in der Regel viel niedriger, als der vergleichbarer Rasterbilder. 4
Grafikformate: Vektorgrafiken Software für Vektorgrafikformate: Zeichenprogrammformate wie z.b. Corel Draw, Canvas, FreeHand oder Illustrator Vektorgrafikaustauschformate wie z.b. Computer Graphics Metafile (CGM) CAD-Grafikformate 5
Grafikformate: Vektorgrafiken VRML: Virtual Reality Modeling Language Sprache zur Beschreibung von 3D-Grafiken (virtuellen 3D- Welten) kann mit einem Plugin (VRML-Player) im Web-Browser dargestellt werden. Statt riesiger Animationsdateien werden nur Anweisungen geschickt, wie eine dreidimensionale Animation aussehen soll, die dann im Browser mit Plugin berechnet wird. Vektorgrafiken haben bis jetzt nur relativ geringe Verbreitung im Web gefunden. Wahrscheinlich wird sich das v.a. durch Flash und SVG ändern. Voraussetzung dafür ist aber, dass das dazu benötigte Plugins auf den meisten Browsern installiert sind. Quelle: Siegel: WEB SITE DESIGN 6
Grafikformate: Rastergrafiken Der überwiegende Anteil der Bilder im Web sind Rastergrafiken. Rasterbilder auch Bitmaps genannt bauen sich aus Pixeln auf, die in einem Raster nach folgendem System angeordnet werden: x Pixel in der Breite y Pixel in der Höhe z Pixel in der Tiefe = die Anzahl der möglichen Farben für ein Pixel. Quelle: Siegel: WEB SITE DESIGN 7
Grafikformate: Rastergrafiken Bit Farbtiefe Exponenten Farbanzahl 1 2 1 2 2 2 2 4 3 2 3 8 4 2 4 16 5 2 5 32 6 2 6 64 7 2 7 128 8 2 8 256 24 2 24 16.777.216 TRUE COLOR (RGB) 32 2 32 4.294.967.296 TRUE.COLOR Quelle: Siegel: WEB SITE DESIGN 8
Grafikformate: Rastergrafiken Die Anzahl der Farben, die ein Monitor gleichzeitig darstellen kann, ist abhängig von der Graphikkarte. Mit einer 8-Bit Grafikkarte können 256 Farben gleichzeitig dargestellt werden. Viele Anwender haben immer noch 8-Bit Grafikkarten. Auch wenn bei PC`s die Grafikkarten immer leistungsstärker werden, sollten Entwickler damit Rechnen, das viele Endanwender auf 256 Farben beschränkt bleiben. Insbesondere neue Entwicklungen, wie Internetzugang von anderen Geräten, als dem PC (z.b. vom Auto oder von der Küche aus) sorgen dafür, das dieser Zustand noch eine Weile anhalten wird... Quelle: Siegel: WEB SITE DESIGN 9
Grafikformate: Rastergrafiken Wer sicher sein will, dass seine Farbangaben «Internet-Safe» auch auf 8-Bit Graphiksystemen so dargestellt werden, wie sie entwickelt worden sind, sollte den Netscape-Farbwürfel verwenden. Grafikprogramme wie Photoshop können direkt auf die Palette des Farbwürfels eingestellt werden (Web-Safe Colours). Quelle: Siegel: WEB SITE DESIGN
Grafikformate: Rastergrafiken Rastergrafikformate sind die Hauptgrafikformate im Internet. Fast alle Bilder sind Rastergrafiken oder Bitmaps. Es gibt zwei Hauptformate: GIF und JPEG. Zusätzlich ist jetzt schon seit geraumer Zeit das Grafikformat PNG im kommen. Es konnte sich aber, obwohl es viele Nachteile von JPEG und GIF vermeidet, bisher nicht durchsetzen. Quelle: Siegel: WEB SITE DESIGN 11
Grafikformate: Rastergrafiken - GIF GIF = Graphics Interchange Format Das Format wurde von der Firma Unisys entwickelt. Es gibt dabei zwei Versionen von GIFs: GIF87a und GIF89a. Die Zahlen in den Formatnamen geben das Herstellungsjahr an. Das Hauptunterscheidungsmerkmal zwischen beiden Formaten ist, das GIF89a transparente Hintergründe erlaubt. 12
Grafikformate: Rastergrafiken - GIF GIF-Bilder haben fünf Hauptmerkmale: Eine Indizierung auf 256 Farben ist erforderlich LZW-Komprimierung Nur GIF89a: Transparente Hintergründe Interlaced Format Animation 13
Grafikformate: Rastergrafiken - GIF 1. Indizierung GIF Grafiken beinhalten nur maximal 256 Farben. Allerdings können diese 256 Farben aus dem gesamten Farbspektrum mit 16,7 Millionen Farben ausgewählt und die Farbpalette entsprechend angepasst werden. Die Anpassung der Farbpalette an Bilder, denen das GIF- Format zugewiesen werden soll, wird Indizierung genannt. Um die Dateigrösse so klein wie möglich zu machen, wird bei der Indizierung versucht, in die Farbpalette so wenig Farben wie möglich aufzunehmen. 14
Grafikformate: Rastergrafiken - GIF 1. GIF- Indizierung -> Dithering Die Reduktion der Palette bedeutet bei flächig angelegten Grafiken immer einen Qualitätsverlust, weil Farben, die nicht mehr vorhanden sind, durch ähnliche ersetzt werden müssen. Die Qualität kann in vielen Fällen durch Dithering wieder angehoben werden. Dabei werden fehlende Farben durch das Aneinanderlagern verschiedener indizierter Farbpixel simuliert. Häufig kann dabei ein ähnlicher Eindruck wie bei der Ursprungsfarbe erzielt werden. Quelle: Fröbisch, Lindner, Steffen: Multi Media Design 15
Grafikformate: Rastergrafiken - GIF GIF- Dithering 24 Bit 16,7 Millionen Farben (kein GIF) 4 Bit 16 Farben Diffusion Dithering (GIF) Quelle: Fröbisch, Lindner, Steffen: Multi Media Design 16
Grafikformate: Rastergrafiken - GIF GIF- Dithering Pattern Dithering Die fehlenden Farbtöne werden mit einer Rastertechnik aus mindestens zwei vorhandenen Farben gepixelt. So lassen sich auch Verläufe in einer akzeptablen Qualität herstellen. Störend wirkt allerdings das gleichmässige Rastermuster im Bild. Diffusion Dithering Im Gegensatz zum gleichmässigen Raster des Pattern-Dither wird hier eine Streutechnik angewendet. Verläufe werden daher unregelmässig dargestellt, das Bild wirkt aufgrund der Streuung jedoch natürlicher. Quelle: Fröbisch, Lindner, Steffen: Multi Media Design
Grafikformate: Rastergrafiken - GIF GIF- Indizierung und Dithering mit Corel Draw Menü: Bild -> Farbformat ändern
Grafikformate: Rastergrafiken - GIF 2. LZW Komprimierung Die LZW-Komprimierung wird nach ihren Erfindern bei der Firma Unisys mit den Namen Lempel Ziv und Welch benannt. Das LZW-Schema verwendet Mustererkennungstechniken, um das sogenannte Run-Length-Encoding zu erhalten. 19
Grafikformate: Rastergrafiken - GIF 2. LZW Komprimierung Die Essenz des Algorithmus ist, horizontale Sequenzen gleichfarbiger Pixel durch eine Zahl zu ersetzen, die angibt, wie lang die Sequenz ist. Identische Horizontalbilder werden zusätzlich Zeilenweise komprimiert, um noch mehr zu sparen. Quelle: Siegel: WEB SITE DESIGN 20
Grafikformate: Rastergrafiken - GIF 2. LZW Komprimierung Je unregelmässiger das Muster, desto schlechter die Komprimierbarkeit. Eine sehr feine Streuung von Pixeln führt zu grossen Dateien. Dies gilt erst recht, wenn es keine horizontal gleichbleibenden Bereiche gibt. Quelle: Siegel: WEB SITE DESIGN 21
Grafikformate: Rastergrafiken - GIF 2. LZW Komprimierung Je geringer die Farbanzahl ist, desto grösser ist die Wahrscheinlichkeit, dass sich Muster wiederholen und damit zur LZW-Komprimierung anbieten. Die Farbtiefenverkleinerung führt ebenfalls zu einer Speicherplatzreduktion: Die Grösse einer Grafik berechnet sich im Prinzip aus Höhe x Breite x Anzahl der Farbenmöglichkeiten pro Pixel. Das bedeutet, je weniger Farben desto kleiner die Datei. 22
Grafikformate: Rastergrafiken - GIF 3. Transparente Hintergründe (GIF89a) Bei GIF 89a kann eine beliebige Farbe ausgewählt werden, die auf transparent gesetzt wird. Der Effekt ist, das Bildmotive ohne einen begrenzenden Rahmen in die Web-Site integriert werden können. Wenn der Hintergrund eines Bildes aus mehreren Farben besteht, (was meistens der Fall ist) muss er zuvor mit einem Grafikprogramm auf eine Farbe reduziert werden. Es kann aber auch jede andere Farbe auf transparent gesetzt werden. An ihrer Stelle erscheint dann ein «Loch» in der Grafik. 23
Grafikformate: Rastergrafiken - GIF 3. Transparente Hintergründe (GIF89a) Beispiel: Farbe auf transparent setzen mit Corel Photo Paint: (Speicher unter-> GIF-Format wählen->...) Ergebnis
Grafikformate: Rastergrafiken - GIF 4. Interlace-Effekt: Eine Grafik wird beim Laden nicht zeilenweise eingelesen/aufgebaut, sondern schichtweise. Grundstruktur der Grafik erscheint sehr schnell am Bildschirm Grafik wird dann immer deutlicher und feiner aufgelöst am Bildschirm angezeigt. Spielerische Variation bzw. «Trosteffekt» beim Warten Wählbare Option beim Abspeichern von GIF-Dateien 25
Grafikformate: Rastergrafiken - GIF 5. Animation: GIF-Format bietet die Möglichkeit zur einfachen Animation: Speicherung mehrerer GIF-Grafiken in einer einzigen Grafikdatei Möglichkeit der zeitlichen Steuerung der Einzelgrafiken Wahl der Wiederholungsrate Werkzeuge Spezialsoftware: GIF-Builder (Mac), AnimationShop (Win), MovieGear (Win) Online: http://www.gifworks.com/ Professionelle Grafiksoftwareprodukte 26
Grafikformate: Rastergrafiken - GIF 5. Animation: Einfachste Art der grafischen Animation - keine Programmier-/Scriptsprache notwendig Dateien mit animierte GIF-Grafiken werden sehr schnell sehr groß! Bewegung = Aufmerksamkeitsfokus! Daher sehr dosierter Einsatz Ein- bis zweimalige Wiederholung der Animation ist vorzuziehen (loops)! Keine Endlosschlaufen. Einsatz sehr beliebt als Bannerwerbung einfachstes Mittel zur Visualisierung dynamischer Prozesse in Wissenschaft, Technik und Medizin 27
Grafikformate: Rastergrafiken - JPEG JPEG = >Joint Photographic Expert Group Das JPEG Format wurde in den frühern 90ern von der Joint Photographic Expert Group entwickelt, mit dem Ziel, ein Grafikformat zu entwerfen, mit dem photorealistische Bilder mit geringen Dateigrössen gespeichert werden können. Nach wie vor ist JPEG für Photos aber auch für Bilder mit sanften Farbübergängen besonders gut geeignet. Gerade Bilder, die sich durch ihre Unregelmässigkeit nicht gut für das GIF-Format eignen, sind häufig prädestiniert für JPEG. 28
Grafikformate: Rastergrafiken - JPEG Der grosse Nachteil des JPEG-Formats liegt in der ungenauen Darstellung von starken Kontrasten. Es bilden sich Fehlinformationen an den Kanten, die sogenannten Artefakte. (Corel Photo Paint: Kompressionsrate 95%, Dateigrösse 5 KB) Je höher die Kompressionsrate, desto mehr Artefakte bilden sich. 29
Grafikformate: Rastergrafiken - JPEG Beim JPEG-Format werden Helligkeits- und Farbinformationen voneinander getrennt. Subtile Farbunterschiede, die unser Auge ohnehin nicht wahrnehmen kann, werden verworfen. Das Bild wird nicht wie bei GIF in Zeilen, sondern in Bereiche zerlegt. JPEG ist auch bei höchster Qualitätsstufe ein Verlustverfahren, weil die Kompression durch Reduktion von Bildinformationen erreicht wird. Der Kompressionsgrad lässt sich bei JPEG prozentgenau einstellen. Häufig haben JPEG Bilder auch bei starker Reduktion noch eine ausreichende Qualität. Ausprobieren! 30
Grafikformate: Rastergrafiken - JPEG Bei JPEG gibt es keine formatbedingten Einschränkungen bei der Farbtiefe. Alle 16,7 Millionen Farben stehen zur Verfügung. Bei JPEG-Bildern gibt es immer einen durch das Kompressionsverfahren bedingten Overhead an Speicherplatzbedarf. Daher lohnt sich das Format erst bei etwas grösseren Bildern. 31
Grafikformate: Rastergrafiken - Anti-Aliasing Eines der Hauptprobleme von Rastergrafiken ist, das Kurven und Schrägen durch die geringe Auflösung des Bildschirms im Vergleich zu gedruckten Bildern gezackt (pixelig, ausgefranst) aussehen können: Dieser Effekt wird Aliasing genannt. Quelle: Fröbisch, Lindner, Steffen: Multi Media Design 32
Grafikformate: Rastergrafiken - Anti-Aliasing Durch Glättung oder auch Anti-Aliasing kann dieses Problem abgemildert werden: Beim Anti-Aliasing werden an den gezackten Rändern Pixel in einer Mischfarbe zwischen Vorder- und Hintergrund eingefügt. Quelle: Fröbisch, Lindner, Steffen: Multi Media Design 33
Grafikformate: Rastergrafiken - Anti-Aliasing Probleme beim Einsatz von Anti-Aliasing: Durch die Mischfarbtöne an den Rändern erhält die Gesamtgrafik mehr Farben. Dies führt zu grösseren Dateien. Es können sich Artefakte bilden. Artefakte sind Pixel an den Rändern, durch die die Originalgrafik fehlerhaft verändert wird. 34
Grafikformate: PNG PNG: Portable Network Graphic Grafikformat speziell für das Web entwickelt Normierung durch das W3C (1996!) http://www.w3.org/graphics/png/ Einbindung in HTML via imgage embed object MIME Type: image/png 35
Grafikformate: PNG Hintergrund PNG Alternatives patentfreies Grafikformat zu GIF LZW-Algorhitmus Patent von UniSys Urheberrechtsprobleme beim Einsatz des GIF- Formats Grafikformat speziell für das Web entwickelt Ideale fortschrittliche Alternative zu GIF 36
Grafikformate: PNG Vorteile PNG Verlustfreie Kompression (analog LZW) Kompressionsalgorithmus funktioniert ähnlich der ZIP-Kompression Gut für (einfache) Grafiken Mässig bei Fotos und Grafiken mit vielen Farben und Farbübergängen Farbtiefe: 16,7 Mio. Farben analog zu JPEG-Format oder indizierten Farben, d.h. Eine begrenzten Farbpalette (analog GIF) 37
Grafikformate: PNG Vorteile PNG Transparenter Hintergrund möglich Interlaced-Effekt: Schichtweise Aufbau der Grafik Meta-Informationen zum PNG-Bild, z.b. Bildherkunft Copyright: das PNG-Format erlaubt das Abspeichern von Textfeldern zu Bildtitel, Bildautor, rechtliche und sittliche Absicherungshinweise 38
Grafikformate: PNG Nachteile PNG Keine animierten Grafiken Nicht geeignet für Photos oder Grafiken mit vielen Farbübergängen Kompressionsqualität Dateigröße 39
Grafikformate: PNG Nachteile PNG Browser-Unterstützung: Netscape ab Version 4.04 Explorer ab Version 4.0 Aber neuere Browserversionen die png nicht mehr unterstützen Unvollständige Unterstützung des Formats in den verschiedenen Browsern Geringerer Bekanntheitsgrad als GIF oder JPEG Macht der Gewohnheit Unterstützung durch Grafiksoftware nicht ganz so umfassend wie bei JPG und GIF. 40
Grafikformate: SVG SVG: Scalable Vector Graphics Vektorgrafikformat speziell für das Web entwickelt Entwicklung und Normierung durch das W3C http://www.w3.org/graphics/svg/ Einbindung in HTML via embed object MIME Type: image/svg+xml 41
Grafikformate: SVG Hintergrund SVG Alternatives, patentfreies vektororientiertes Grafikformat Offener Standard: W3C Ideale platzsparende Alternative zu GIF in einigen Bereichen: Symbole, Logos oder Cliparts Ideale platzsparende Alternative zu GIF oder Flash in einigen Bereichen: technischer Grafik, Illustrations- und Konstruktionsgrafik Architektur 42
Grafikformate: SVG Erzeugung von SVG Vektorgrafikprogramme neuerer Generation CorelDraw Canvas Shareware WebDraw Beliebiger Texteditor 43
Grafikformate: SVG Vorteile SVG XML-basiert SVG ist eine XML-basierte Sprache, d.h. ein Klartextformat gegen eine DTD validierbar, Klartextformat, d.h. SVG ist z.b. für Suchmaschinen nach Textinhalten durchsuchbar. Interaktivität: Dynamische Erzeugung von SVG- Grafiken, Statistiken (Balken-,Tortendiagramme) Serverseitig, z.b. CGI-Scripts, Clientseitig, z.b. JavaScript Clientseitig, z.b. via HTML-Formular Parameter eingeben 44
Grafikformate: SVG Vorteile SVG XLink-Unterstützung: XLink ist ein Schema zum Beschreiben von Verweisen (Hyperlinks) in XML Auch auf SVG anwendbar Image Maps werden dadurch ermöglicht Zoom- und Schwenkfähigkeit: Skalierbarkeit durch EndbenutzerIn möglich Drehen im Raum durch EndbenutzerIn möglich 45
Grafikformate: SVG Nachteile SVG Bisher keine native Unterstützung in Browser Browser-Plugins und SVG-Viewer erhältlich http://www.adobe.com/svg/ Möglicher Konkurrenzkampf: Macromedias Flash (Vektorgrafikformat größtenteils offen gelegt) Adobe unterstützt SVG als vollkommen offener W3C-konformer «Gegenstandard» zu Flash 46
Quelle: Harms, Koch, Kürten: HTML &XML Grafikformate: Übersicht Rastergrafiken Eigenschaft GIF87a GIF89a JPEG P-JPEG PNG Farbtiefe 1-8 Bit 1-8 Bit 24 Bit 24 Bit 8, 16, 24, 48 Bit Farbcodierung Farbpalette Farbpalette RGB RGB Farbpalette oder RGB maximale 256 256 16,7 Mio. 16,7 Mio. 16,7 Mio. Farbdarstellung Farbspektrum 16,7 Mio. 16,7 Mio. 16,7 Mio. 16,7 Mio. 16,7 Mio. Kompressionsart LZW LZW DCT/ DCT/ Verschiedene Huffman Huffman Kompressionsrate 3:1-5:1 3:1-5:1 10:1-50:1 10:1-50:1 4:1-7:1 Verlustfreie Ja Ja Nein Nein Ja Kompression Interlacing Ja Ja Nein Ja Ja Transparenz Nein Ja Nein Nein Ja Animation Ja Ja Nein Nein Nein
Diese Folien basieren auf der Multimedia-Vorlesung 2002/03 des Studiengangs Wirtschaftsinformatik an der Fachhochschule Solothurn Nordwestschweiz. Die Modulverantwortung lag bei Prof. Maike Franzen (FHSO). Die Folien wurden zuletzt vom externen Lehrbeauftragten Dr. Thomas Piendl überarbeitet und 2002/03 gezeigt: Prof. Maike Franzen Fachhochschule Solothurn Nordwestschweiz Riggenbachstr. 16 CH-4600 Olten Dr. Thomas Piendl NET - Network for Educational Technology ETH Zentrum SOW G 15 Sonneggstrasse 63 CH-8092 Zuerich 48