REFERAT MultimediaGrafikformate GaabIAV 2 Gliederung Einleitung Vektorbasierte Grafikformate

REFERAT Multimedia-Grafikformate Gaab/IAV 2

Gliederung Einleitung Vektorbasierte Grafikformate SVG: Allgemeines Textcode Grafik Textcode Pixelbasierte Grafikformate GIF: Allgemeines Features Aufbau Quellen JEPG: Allgemeines Feature PNG: Allgemeines Features Aufbau Zusammenfassung Gaab/IAV 2 2

Einleitung: Grafiken spielen in der heutigen Zeit eine sehr wichtige Rolle. Sie können die Aufmerksamkeit des Betrachters wecken, Inhalte ansprechender gestalten und helfen auch oft dem Betrachter einen besseren Überblick zu verschaffen. Dies gilt nicht nur im Bereich von Printmedien und Fernsehen sondern auch im Bereich der neuen Medien, speziell dem Internet. Es ist jedoch nicht ganz einfach Grafiken sinnvoll und optisch ansprechend auf Internet-Seiten anzubringen. Verschiedene Hard- und Softwarevoraussetzungen erschweren das Erstellen von Grafiken im Netz da man erreichen möchte dass die Grafik bei jedem (egal welches Betriebssystem) angezeigt wird. Gaab/IAV 2 3

Pixelbasierte und Vektorbasierte Grafikformate Um die genauen Unterschiede der beiden Grafikformate und ihr Vor- und Nachteile erörtern zu können, werden wir uns nun die Grafikformate an sich betrachten, sowie ihre Eigenschaften und Funktionsweisen. Übersicht: Pixelbasierte Grafikformate: Vektorbasierte Grafikformate: Gaab/IAV 2 4

Pixelbasierte und Vektorbasierte Grafikformate Um die genauen Unterschiede der beiden Grafikformate und ihr Vor- und Nachteile erörtern zu können, werden wir uns nun die Grafikformate an sich betrachten, sowie ihre Eigenschaften und Funktionsweisen. Übersicht: Pixelbasierte Grafikformate: Sie sind die am meisten verwendeten Grafikformate sowohl im Internet als auch in den anderen Medien. Die am meisten genutzten Formate im Internet sind: JPG, GIF und PNG. Der große Unterschied zwischen den Formaten liegt in der Art wie sie komprimiert werden. Vektorbasierte Grafikformate: Gaab/IAV 2 5

Pixelbasierte und Vektorbasierte Grafikformate Um die genauen Unterschiede der beiden Grafikformate und ihr Vor- und Nachteile erörtern zu können, werden wir uns nun die Grafikformate an sich betrachten, sowie ihre Eigenschaften und Funktionsweisen. Übersicht: Pixelbasierte Grafikformate: Sie sind die am meisten verwendeten Grafikformate sowohl im Internet als auch in den anderen Medien. Die am meisten genutzten Formate im Internet sind: JPG, GIF und PNG. Der große Unterschied zwischen den Formaten liegt in der Art wie sie komprimiert werden. Vektorbasierte Grafikformate: Ein Vektorbasiertes Grafikformat ist zum Beispiel SVG. Im Gegensatz zu den Pixelbasierten Grafikformaten werden die einzelnen Farbinformationen nicht in den einzelnen Pixeln gespeichert sondern die Vektorgrafik enthält die Eigenschaftsbeschreibung des Objekts das gezeichnet werden soll. Gaab/IAV 2 6

Nahansicht einer Linie zwischen zwei Punkten: Pixelgrafik- Vektorgrafik Eine Nahansicht der Linie als Pixelgrafik Eine Nahansicht der Linie als Vektorgrafik Wenn man annimmt, dass das auszugebende Bild 200 x 200 Pixel groß ist und in 256 Graustufen gespeichert wird, so wird pro Pixel 1 Byte gespeichert. Bei der angenommenen Bildgröße werden also 200 x 1 Byte ≈ 40 KByte gespeichert. Wenn man nun für die Vektorgrafik veranschlagt, dass die Information der Dicke mit 2 Byte, die Farbe mit 1 Byte und die Position der Punkte mit jeweils 8 Byte abgespeichert wird, so ergibt sich eine Bildgröße von 2+1+8+8 = 19 Byte (≈ 0, 02 KByte). Gaab/IAV 2 7

Pixelbasierte Bildformate GIF ( „Graphic Interchange-Format“ ): Dieses Bildformat wurde 1987 von den Compu. Serve-Betreibern zum schnellen, kostensparenden Austausch von Bildern durch Mailboxnetze entwickelt und ist heute wohl das am weitesten verbreitete Grafikformat auf dem PC. Für den Datenaustausch wichtig ist vor allem, dass das Format plattformunabhängig definiert wurde und nicht wie andere Formate an bestimmte Grafikmodi gebunden ist, da es die Dateien in einem für alle Grafiksysteme verwendbaren Format hält. GIF erlaubt Bilder bis zu einer Auflösung von 16000 x 16000 Punkten bei einer Palette von 256 Farben. Das GIF-Format bietet nützliche Features: Im „Interlace-Modus“ gespeichert wird beim öffnen eines GIF-Bildes erst jede 10 Bildzeile übertragen was eine durch „Klonzeilen“ ergänzte Vorabversion des Bildes ermöglicht. So kann man bevor die gesamte Datei geladen ist schon einen groben Eindruck über das Gesamtbild bekommen. Gerade im Internet kann dies oftmals von nutzen sein. Auch das abspeichern mehrerer Bilder in einer GIF-Dateien ist möglich. Diese können dann sogar als kleiner Film animiert werden. Dies ist jedoch sehr speicheraufwändig, da auch bei geringen Unterschieden der Einzelbilder jedes Bild einzeln Komprimiert abgespeichert wird. Gaab/IAV 2 8

Es besteht auch die Möglichkeit eine Farbe als unsichtbar (transparent) zu definieren. Durch diese Möglichkeit werden z. B. GIFs, die eine transparente Hintergrundfarbe haben, egal auf welcher Hintergrundfarbe sich befinden ohne ihren eigenen Hintergrund dargestellt, der sonst ein hässliches Viereck in einer Farbe, die sich vom Hintergrund abheben würde, wäre. ohne transparenten Hintergrund mit transparenten Hintergrund Gaab/IAV 2 9

Aufbau einer Gif-Datei Im Header steht die Formatkennung „GIF“ Der Logical Screen Discriptor enthält Informationen über Höhe und Breite des Bildes in Pixel. Dadurch wird festgelegt, wie viel Platz vom Browser auf dem Bildschirm reserviert wird, um das Bild anzuzeigen. Im Global Color Table sind Informationen über Hintergrundfarbe und Farbtiefe hinterlegt. Der Bild-Definitionsblock enthält Informationen über die Position der linken oberen Ecke des Bildes auf dem Bildschirm und über die Breite und Höhe des Bildes. Zusätzlich beinhaltet er diverse Flags, welche u. a. angeben, ob interlaced auszugeben ist. Die GIF-Datei wird hexadezimal durch die Zahl 3 B Abgeschlossen. Gaab/IAV 2 10

JEPG (Joint Photographic Expert Group): Bei JPEG, entwickelt von der Joint Photographic Expert Group, handelt es sich um ein Grafikformat, das auf dem Komprimierungsalgorithmus DCT (Diskrete Cosinus Transformation) in Verbindung mit der Huffman-Kodierung basiert. Das Bildformat bietet ähnliche Merkmale wie GIF-Bilder, kann aber bis zu 16, 7 Mio. Farben darstellen. Deshalb eignet sich dieses Format vor allem zum Darstellen von Fotos und anderen Halbtonbildern. Mit JPEG wird die Dateigröße durch selektives Löschen von Daten komprimiert. Da hierbei Daten verloren gehen, wird die JPEG-Komprimierung auch als verlustreich bezeichnet. Das JPEG-Format kann zu Detailverlusten in einem Bild führen Die Funktionsweise von JPEG wird hier nicht sehr detailliert erklärt werden können, da die Kompression und Reduktion auf mathematischen Formeln beruhen, die ziemlich komplex sind. Es folgt nur ein kleiner Auszug aus einem Artikel zu der Funktionsweise von JPEG: [. . . ] Das uncodierte Standbild wird in Blöcke zerlegt, die mit einem speziellen Algorithmus (DCT), transformiert werden. Bei diesem Schritt werden die Daten zum ersten mal reduziert. Um die Eigenschaften des menschlichen Auges auszunutzen, werden nun einige hochfrequente Segmente des Bildes mit weniger Informationen gespeichert, als niederfrequente Teile. Die verschiedenen Farbkomponenten des Bildes werden nun einzeln codiert und mit jeweils einer Quantisierungsmatrix einem weiteren Algorithmus (DPCM) zugeführt. Das auf diese Weise komprimierte Bild wird dann bei Bedarf in umgekehrter Reihenfolge wieder dekomprimiert. [. . . ] Gaab/IAV 2 11

Im allgemeinen kann man bei dem JPEG Format zwei Variablen zur Kompression und Reduktion selbst bestimmen: Die DPI-Dichte: Das ist die Punktdichte (dpi = dots per inch). Bei JPEG-Dateien, die man für die Anzeige in WWW-Seiten benötigt, reicht ein Wert zwischen 70 und 100 dpi, da so eine gute Anzeige auf dem Monitor gewährleistet ist. Für den Druck wiederum sind sie absolut ungeeignet, da sie auf einem Drucker mit 1440 DPI sehr, sehr klein werden würden; oder wenn man sie größer ausdruckt stark " pixelig" aussehen würden. Den Kompressionsfaktor: Je höher der Kompressionsfaktor, desto schlechter die Bildqualität. Ein Komprimierungsfaktor von 5 bis 10 ist ein sinnvoller Wert, sozusagen ein Kompromiss, bei dem die Bildqualität nicht zu sehr unter der Reduktion leidet und das Bild trotzdem vom Datenvolumen um ein vielfaches kleiner wird, als in der unkomprimierten Form. Gaab/IAV 2 12

70 dpi, Komprimierung 10, Dateigröße 34 k 70 dpi, Komprimierung 80, Dateigröße 7 k Das Originalbild hatte bei einer Auflösung von 1200 x 1800 eine Größe von 513 k 50 dpi, Komprimierung 10, Dateigröße 19 k Gaab/IAV 2 13

Feature: Es gibt beim JPEG-Format die Variante "progressive JPEG-Grafik". Hier wird, ähnlich wie beim GIF in der Variante "interlaced", zuerst eine vollständige, aber noch undeutliche Fassung der Grafik am Bildschirm aufgebaut. Das erste, noch nicht ganz deutliche Bild kann bereits am Bildschirm angezeigt werden, nachdem etwa 15% der Grafikdatei an den aufrufenden WWW-Browser übertragen wurden. Das Bild wird dann stufenweise besser, bis es die volle Qualität erreicht hat, nämlich wenn 100% der Grafikdatei an den Browser übertragen wurden. von oben nach unten (standard encoding) ansteigende Qualität (progressive encoding) Gaab/IAV 2 14

PNG ( „Portable Network Graphics“ ): Das PNG-Format wurde vom Word Wide Web Consortium (W 3 C) entwickelt um das durch Patentprobleme behaftete GIF Format abzulösen. Es ist ebenfalls plattformunabhängig, bietet aber im Gegensatz zu diesem eine Farbtiefe bis zu 48 Bit und übertrifft damit selbst das JPEG-Format. Die Komprimierung erfolgt ohne Qualitätsverlust und führt zu 10 -30% besseren Kompressionsergebnissen. Features: Ebenfalls ähnlich zum GIF-Format bietet PNG nützliche Features wie Interlace-Modus und Transparenz. Der durch Adam M. Costello verbesserte Interlaced-Modus, auch als Adam 7 bekannt, baut das Bild statt zeilenweise (GIF) zweidimensional auf. Dies geschieht in 7 Durchgängen. Dabei wird das Bild in 8 x 8 große Quadrate eingeteilt welche entsprechend dem folgenden Schema übertragen werden: Gaab/IAV 2 15

Adam 7 -Schema Der Vorteil des Adam 7 -Schemas gegenüber dem von GIF liegt darin, dass schneller ein (grober) Überblick über das ganze Bild gewonnen werden kann, und vor allem auch Text ist schneller zu erkennen. Gaab/IAV 2 16

Alpha-Kanal Im Gegensatz zu GIF gibt es bei PNG einen "echten" Alpha-Kanal mit verfügbaren 65 000 Graustufen. Dies ermöglicht weiche Schatten und Glow-Effekte. Allgemeiner gesprochen, es gibt eine für Monitorverhältnisse fast stufenlose Transparenz (alpha-Transparenz). Die einfache Farbmaskierung wie bei GIF ist weiterhin möglich. Originalbild Alphakanal Verknüpfung von Originalbild + Alphakanal Gaab/IAV 2 17

Aufbau: Jede PNG-Datei besteht aus einer Signatur und einer Folge beliebig vieler Blöcke, den Chunks. Die Signatur dient lediglich dazu, eine PNG-Datei als solche zu identifizieren, während in den Chunks die eigentlichen Bildinformationen gespeichert werden. Allgemeine Dateistruktur PNG Gaab/IAV 2 18

Sämtliche Information, die zum korrekten Darstellen eines Bildes unbedingt erforderlich ist, steht in den „Critical Chunks“. In jeder PNG-Datei müssen mindestens diese Chunks enthalten sein und jedes Programm, das mit PNG-Dateien arbeitet, muss sie kennen und auswerten können. Die „Critical Chunks“ sind : Der IHDR-Chunk bildet den Kopf einer Datei, er muss als erster Chunk direkt nach der Signatur stehen und enthält die in der folgenden Tabelle aufgelisteten Informationen: Breite und Höhe geben die Dimensionen des Bildes in Pixeln an. Dabei ist die Null ist nicht erlaubt. Die Bittiefe bestimmt die Anzahl der Bits pro Paletteneintrag. Der Farbtyp beschreibt die Interpretation der Bilddaten. Für die Kompressionsmethode ist zurzeit nur der Wert 0 definiert. Die Filtermethode gibt an ob das Bild vor dem Kodieren bearbeitet wurde. Die Interlacemethode definiert die Übertragungsmethode: 0 kein Interlace 1 Adam 7 Interlace Gaab/IAV 2 19

Die PLTE-Chunk Palette enthält 1 bis 256 Paletteneinträge, jeder eine 3 -Bytefolge in der Form RGB (Rot, Grün, Blau). Die Anzahl von Einträgen hängt von der Chunk-Länge ab. Ist diese Länge nicht durch drei teilbar, so liegt ein Fehler vor. Der erste Eintrag definiert die Farbe 0, der Zweite die Farbe 1, usw. bis 255. Es müssen nicht soviele Farben wie die Bittiefe zulässt definiert werden, doch man darf sie dann logischerweise auch nicht benutzen. Der IDAT-Chunk enthält die Bilddaten in komprimierter Form. Um sie zu lesen muss man sie unter Berücksichtigung der Filter- und Komprimierungsinformationen dekodieren. Danach sind die Daten entsprechend der Kombination von Bittiefe und Farbtyp auszulesen. Es können auch mehrere dieser Chunks definiert sein. Der IEND-Chunk ist ein leerer Chunk (Länge=0) und signalisiert das Dateiende. Diese Standart Chunks sollten auch in dieser Reihenfolge erscheinen. IHDR vor PLTE vor IDAT vor IEND. Gaab/IAV 2 20

Zusammenfassung Bei genauerer Betrachtung erkennt man, dass dir einzelnen Bildformate durchaus sehr unterschiedlich sind und verschiedene Stärken und Schwächen aufweisen. Je nach Verwendungsbedarf bietet sich so an ein anderes Bildformat an. Die folgende Tabelle soll dabei als Überblick und Entscheidungshilfe dienen : Gaab/IAV 2 21

Vektorbasierte Grafikformate Original Kreis (Pixelgrafik) Original Kreis (Vektorgrafik) Gaab/IAV 2 Stark vergrössert 22

SVG (Scalable Vector Graphics) Schon im Jahr 1998 gab es den Versuch skalierbare Webgrafiken zu standardisieren. Doch die Firmen Microsoft, Macromedia, IBM, Adobe, Netscape und Sun konnten sich nicht auf ein gemeinsames Format einigen. Das W 3 C (World Wide Web Consortium) hingegen erstellte im Oktober 1998 selbst ein Pflichtenheft für skalierbare Webgrafiken. Dieser Entwurf wurde weiter entwickelt und im September 2001 gab das W 3 C die Scaleable Vector Graphics als offizielle W 3 C Empfehlung frei. SVG ist XML, was soviel bedeutet, als das SVG ebenfalls mit den Programmieranweisungen der Sprache arbeitet. Ein Vorteil ist natürlich, dass sich SVG und XML ohne Probleme kombinieren lassen. Die Grundzüge der Sprache XML lassen sich relativ einfach erlernen, was damit genauso für das Arbeiten mit SVG gilt. Genau wie XML ist SVG auch „open source“ bzw. patentfrei. Jede der im W 3 C beteiligten Firmen kann daher an der Weiterentwicklung von SVG mitarbeiten und Anwendungen oder Werkzeuge für die Arbeit mit SVG erstellen. Ein weiteres Prinzip von SVG ist, dass es kein Binärformat ist. Grafiken, die in SVG erstellt worden sind, liegen weiterhin im XML-Format, also als „Textdatei“, vor. Beim Betrachten einer SVG-Datei besteht auch die Möglichkeit sich den Quelltext anzeigen zu lassen, in dem tatsächlich jede Anweisung nachlesbar ist. Der Vorteil liegt hier hauptsächlich darin, dass es nicht nur von Maschinen, sondern auch von Menschen gelesen werden kann. Gaab/IAV 2 23

Das SVG kein Binärformat ist kann jedoch auch zu unnötig großen Dateien führen. Daher gibt es auch bei SVG die Möglichkeit der Kompression. Das Erstellen einer „gepackten“ Datei, die dann die Endung SVGZ trägt, ermöglicht die maximale Kompression im Bereich von Texten, was ungefähr zwei Dritteln entspricht. SVG bietet auch die Möglichkeit mit Pixelgrafiken umzugehen. Jedoch ist dies nur insofern möglich, dass ähnlich wie in einem HTML-Dokument, eine Pixelgrafik als Bild eingefügt werden kann. Die benötigte Werkzeuge für SVG Zum erstellen einer Grafik genügt einfacher Editor wie beispielsweise Notepad. Weiterhin gibt es auch für SVG einige kostenpflichtige Autorenprogramme. Adobe Illustrator 10 und Corel Draw 11 sind hierbei wahrscheinlich die bekanntesten, da sie neben vielen anderen Formaten auch die Möglichkeit bieten, SVG-Grafiken zu erstellen. Um sich die damit erstellten Dateien aber anschauen zu können, wird ein Browser Plug-In benötigt. Adobe liefert mit dem SVG Viewer ein solches Plug-In, welches man kostenlos downloaden kann. Im Microsoft Internet Explorers (ab Version 5. 5) ist dieses Plug-In sogar schon integriert. Gaab/IAV 2 24

Animation: Um ein wirklich leistungsfähiges Format zu werden, gaben die Entwickler SVG auch die Fähigkeit zur Animation mit auf den Weg. So können Elemente einer SVG-Grafik animiert werden, wenn ein bestimmtes Ereignis eintritt. So ein Ereignis kann das Laden der Grafik, ein Mausklick oder ähnliches sein. Die Animationsfähigkeiten von SVG sind dabei ähnlich wie die von Flash. Man kann Objekteigenschaften verändern (Größe, Farbe, Sichtbarkeit), Bewegung entlang von Pfaden erzeugen oder aber auch Objekte transformieren. Gaab/IAV 2 25

Ganz einfaches Beispiel einer SVG Datei: <? xml version="1. 0"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG July 1999//EN" "http: //www. w 3. org/Graphics/SVG/svg-19990706. dtd"> „Das SVG ist Teil eines XML Dokuments“ <svg> <circle style="fill: red; stroke: black" cx="2. 5 cm" cy="2. 5 cm" r=„ 1. 5 cm"/> </svg> „Die Grafikanweisungen werden In <svg> Tags eingebettet“ Diese Grafik entsteht: Gaab/IAV 2 26

Vektorgrafik mit Hilfe von Corel. DRAW erstellen Gaab/IAV 2 27

Gaab/IAV 2 28

Gaab/IAV 2 29

Quellen: http: //goethe. ira. uka. de/seminare/rftk http: //homepages. fhgiessen. de/~hg 10013/Lehre/MMS/SS 01_WS 0102/Farbmodelle/index. html http: //www. heise. de/ix/artikel/1996/09/116/ http: //www. ece. purdue. edu/~ace/jpeg-tut/jpegtut 1. html http: //goethe. ira. uka. de/seminare/rftk/jpeg/ http: //home. earthlink. net/~ritter/tiff/ http: //www. peliworks. de/design/formatenew/pix_und_vecdruck. html http: //svg. tutorial. aptico. de/ http: //193. 23. 168. 186/pc_pool/lernmodule/multimediadateien/Inhaltsverzeichnis. htm Gaab/IAV 2 30