Grafikformate

Aufgabe: Die folgenden Bildschirme sollen mündlich möglichst genau, aber effizient beschrieben werden – so dass der Rest der Klasse den Bildschirminhalt nachzeichnen kann. (schreiben Sie die Farbe dazu, falls sie keinen geeigneten Farbstift zur Hand haben)

 BMP (reine Rastergrafik)

 JPG (Verlauf von bis...)

Es sind 10 x 7 „pixel“  GIF (Zusammenfassen von gleichfarbigen Pixeln)

Flagge der Marshall Islands  svg (freies Vektorgrafikformat, beschreibung mithilfe geometrischer Formen)

Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts unten, wie Lesen) Die Farbe jedes Pixels wird als Zahlenwert angegeben Für Farbbilder gibt es je eine Zahl pro Kanal (z.B. RGB = rot, grün, blau) Die Farbtiefe beschreibt, wie viele verschiedene Farben einem Pixel zugeordnet werden können (=2Farbtiefe) Ein Bild besteht aus geometrischen Objekten (z.B. Linie, Kreis, Quadrat), allgemeiner: Kurven Art des Objekts und benötigte Parameter werden als Text gespeichert Der Computer berechnet das Bild aus diesen Angaben und kann es dann zeichnen/anzeigen

Rastergrafik Breite: 11 Pixel Höhe: 11 Pixel Farbtiefe: 1 Bit Breite: 11 Pixel Höhe: 11 Pixel Farbtiefe: 1 Bit 1 = weiss 0 = schwarz Farbtiefe 1 Zeichen, also 1 Buchstaben

Rastergrafik Was zeigt dieses 6x6 Pixel grosse Bild? 001100001100111111111111001100001100 Breite: 6 Pixel Höhe: 6 Pixel Pro Pixel 1 Bit 1 = weiss 0 = schwarz 1

Rastergrafik mit Farben Was zeigt dieses 4x3 Pixel grosse Bild? 001100001100111111111111001100001100 Breite: 4 Pixel Höhe: 3 Pixel Pro Pixel 3 Bit (RGB) _ _ _ 001 100 111 001 100 111 Selbst ausprobieren?  Arbeitsblatt RastergrafikManuell.pdf

Repetition: Farben im Binärsystem Eine bestimmte Farbe bekommt man durch die Mischung von Grundfarben, meist RotGrünBlau Für jede Farbe gibt es einen Wert, meist benutzt man 8 Bit/1 Byte pro Farbkanal jede Farbe hat einen Wert zwischen 0 und 255 (binär: 0000000 bis 11111111; hexadezimal: 00 bis FF) also 24 Bit pro Farbe, d.h. 224 (>16.7 Mio) Farben Beispiele: 111111110000000000000000 = FF0000 = 25500 = reines Rot 100000001000000010000000 = 808080 = 128128128 = Grau -------- -------- --------

Repetition: Farbraum Eine bestimmte Farbe ergibt sich aus der Mischung von Grundfarben (=Farbkanälen) Oft arbeiten Computer (Bildschirme immer, Dateiformate oft) mit dem RGB-Farbraum (additiv) Drucker benutzen dagegen den CYMK-Farbraum (subtraktiv) Manche Programme und Dateiformate haben noch speziellere Farbräume, z.B. LAB LAB

Repetition: Farbtiefe Als Farbtiefe bezeichnet man die Anzahl Bit, die für die Beschreibung EINER Farbangabe zur Verfügung stehen Typisch ist eine Farbtiefe von 24 Bit, also 1 Byte pro Farbkanal, also ca. 16.7 Mio Farben Für ein Schwarz/Weiss-Bild genügt eine Farbtiefe von 1 Bit ( 2 Farben) Eine Farbtiefe von 8 Bit, bzw. 1 Byte, ermöglicht 256 Farben Manche Grafikformate sparen Speicherplatz, indem sie die Farbtiefe geschickt reduzieren, bspw. mit indizierten Farben

Rastergrafiken .bmp (Windows, unkomprimiert) .jpg (kompr. mit Farbverläufen, Photos) .gif (kompr. mir reduzierten Farben, Web) .png (kompr. mit allen Tricks, neu)

Die üblichsten Grafikformate (.jpg & .gif) Komprimieren die Information reiner Rastergrafiken Nehmen ggf. Informationsverlust in Kauf (meist variabel, je nach Inhalt und Kompressionseinstellungen) Ansätze zum (verlustbehafteten) Komprimieren: Beschreibung mehrerer Pixel zusammenfassen Speicherplatz sparen bei der Angabe von Farben Dabei geht es immer darum, möglichst die Informationen zu verlieren, die (optisch) keinen grossen Unterschied machen

JPG in Bildern Farbverläufe codieren statt einzelner Pixel  LAB Farbraum, dann Genauigkeit der beiden Farbkanäle reduzieren

Blockcodierung für gleichfarbige Pixel GIF in Bildern Blockcodierung für gleichfarbige Pixel Indizierte Farben

Probleme & Spezialitäten Mit jedem Speichern nimmt die Qualität des jpg ein wenig ab

Repetition JPG GIF Pixel zusammenfassen Farben codieren Besonderheiten Anwendungsgebiet Pixel zusammenfassen Farben codieren Besonderheiten Anwendungsgebiet

Zusammenfassung Ein Bild besteht aus Pixeln (Rastergrafik) Auflösung, Farbraum, Farbtiefe, Transparenz? (ggf.) verlustbehaftete Komprimierung: Farben indizieren (.gif) Farbtiefe (in LAB-Farbraum) reduzieren (.jpg) Blöcke gleichfarbiger Pixel zusammenfassen (.gif) Farbverläufe zusammenfassen (.jpg) Ein Bild besteht aus geometrischen Objekten, bzw. (Bezier-)Kurven (Vektorgrafik) Welche Formen mit welchen Parametern gibt es?

Grundideen Rastergrafik Vektorgrafik Ein Bild besteht aus Pixeln (Durchzählen, meist von links oben nach rechts unten, wie Lesen) Die Farbe jedes Pixels wird als Zahlenwert angegeben Für Farbbilder gibt es je eine Zahl pro Kanal (z.B. RGB = rot, grün, blau) Die Farbtiefe beschreibt, wie viele verschiedene Farben einem Pixel zugeordnet werden können (=2Farbtiefe) Ein Bild besteht aus geometrischen Objekten (z.B. Linie, Kreis, Quadrat), allgemeiner: Kurven Art des Objekts und benötigte Parameter werden als Text gespeichert Der Computer berechnet das Bild aus diesen Angaben und kann es dann zeichnen/anzeigen

Wie viel Information ist nötig? Anfangs- und Endpunkt definieren die Linie eindeutig, dazu Linienbreite und -Farbe Mittelpunkt und Radius definieren den Kreis eindeutig, dazu Linienbreite und -Farbe, ggf. Farbe der Füllung Die Eckpunkte definieren das Polygon eindeutig, dazu Linienbreite und -Farbe, ggf. Farbe der Füllung

Vektorgrafik Mit allgemeinen Kurven (z.B. Bezier Kurven) und noch mehr Parametern kann man jede beliebige Form berechen  kann zu extrem kleinen Dateien führen  Vektorgrafiken sind beliebig skalierbar 26 Kb

26 Kb

Reine Vektorgrafikformate nicht weit verbreitet, meist proprietär, in Verbindung mit einem Editor – z.B. Adobe Illustrator (.ai) Ausnahme: SVG (scalable vector graphics) kann jeder Browser darstellen Trotzdem benutzt eigentlich jeder ständig Vektorgrafiken (in Kombination mit anderem), z.B. Vektor-Fonts (die Form der Buchstaben einer Schriftart) einzelne (Text-)Ebenen in Photoshop Zeichnungen in Word oder PowerPoint in Druckformaten (PDF, EPS)

Was zeigt Rätsel.svg? <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/ " x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve"> <defs> </defs> <rect fill="#FF0000" stroke="none" x="0" y="0" width="400" height="400"/> <polygon fill="#FFFFFF" stroke="#FFFFFF" points="350,250 50,250 50,150 350,150"/> <polygon fill="#FFFFFF" stroke="#FFFFFF" points="250,350 150,350 150,50 250,50"/> </svg>

Rätsel.svg

Aufgabe (genaue Anleitung im Arbeitsblatt SVG_bearbeiten.pdf) Öffnen Sie die Datei Rätsel.txt in einem einfachen Texteditor (z.B. Word-Pad) und ändern Sie den Inhalt, so dass die Flagge eines anderen Landes entsteht (ausprobieren!) Lassen Sie den Nebensitzer raten, welche Flagge dargestellt wird.

Vektorgrafikformate .svg (Browser) .ai (Adobe Illustrator) .psd (einzelne Ebenen in Photoshop) .eps/.pdf (Druckerformate, teilweise VG) .wmf/.emf (Microsoft Programme)

Formatentscheidungen Sie wollen mit ihrer Digitalkamera ein Photo aufnehmen, um dann Sie dann im Internet einen Abzug in Postergrösse zu bestellen. Wie gehen Sie optimalerweise vor? Ein Freund von ihnen hat gehört, dass Vektorgraphiken wenig Speicherplatz brauchen und trotzdem skalierbar sind. Er hat ein Logo für seine Webseite gezeichnet (von Hand) und fragt Sie, wie er es in ein Vektorformat umwandelt. Was raten Sie ihm? Sie wollen ihren Freunden ein paar Urlaubsbilder per E-Mail schicken. Wie gehen Sie vor? Für die Maturazeitung verfassen Sie einen Artikel, in dem sie auch ein Kuchendiagramm zeigen wollen. Wie gehen sie vor, damit das Diagramm bestmöglich gedruckt wird?

Bild-/Bildschirm-/Drucker- Auflösung

Bildgrösse (= in welcher Auflösung das Bild gespeichert ist) Megapixel = Millionen Bildpunkte, die der Sensor aufnimmt – vorausgesetzt man hat die höchste Auflösung in der Kamera eingestellt Für Kameras wird diese Bildgrösse oft in Megapixel angegeben

Bildschirmauflösung (wie viele Pixel eingebaut sind) ca. 1200 x 960 Heutige Bildschirme haben selten eine höhere Auflösung als 1400 oder vielleicht 1960 Pixel in der Breite. Für ein Bildschirm-Vollbild liefern die meisten Kameras also viel zu viel Information, ca. 2/3 der Bildpunkte (im gespeicherten Bild) sind überflüssig

Druckerauflösung (wie viele Punkte auf einen Inch verteilt werden) 300 dpi ~= 120 px/cm Hier kommt der Grund für die vielen Megapixel: ein guter Ausdruck braucht eine Auflösung von mind. 300 dpi (dots per inch), also 300 Pixel pro 2,54 cm. Für einen sauberen Ausdruck in DIN A4 Grösse (21.0 x 29,7 cm) braucht man also 2480 x 3508 Pixel. Ausserdem müssen diese Bildinformationen qualitativ hochwertig sein. Billige Kameras haben zwar oft jede Menge Pixel, die aber verrauschte oder verschwommene Bildinformationen beinhalten und daher für grossformatigen Ausdruck nicht geeignet sind.

Die Druckerauflösung hängt davon ab, auf wie viel Fläche die vorhandenen Pixel verteilt werden Beim Drucken in dpi (dots per inch) 1 inch = 1 zoll = 2,54 cm Z.B.: 1000 x 1000 Pixel auf 25,4 x 25,4 cm Auflösung = 100 dpi (300 dpi wäre gute Qualität) Umgekehrt: 1000 Pixel/300 dpi -> das Bild wird also mit guter Druckauflösung nur etwas über 3 Inch (also etwa 9 Zentimeter) gross (Höhe und Breite)

Auflösungsunterschiede Ein Bild wirkt einigermassen scharf bei am Bildschirm: 72 - 150 dpi ausgedruckt: 200 - 600 dpi  zum Drucken ist also eine ca. 4 mal höhere Auflösung (= Bildgrösse) erforderlich!

Rastergrafiken skalieren Wenn man eine Rastergrafik in einer höheren Auflösung anzeigt oder druckt, als Pixel gespeichert sind, dann werden die fehlenden Pixel erfunden (genauer: interpoliert) Das bewirkt, dass das Bild unscharf bzw. verpixelt aussieht

Vektorgrafiken skalieren Bei Vektorgrafiken werden nicht Pixel beschrieben sondern (geometrische) Formen Um aus dieser Beschreibung ein doppelt so grosses Bild zu machen, müssen nur alle Parameter (z.B. Koordinaten) verdoppelt werden Das resultierende Bild ist dann immer noch scharf und benötigt immer noch gleich viel Speicherplatz 26 Kb

26 Kb