Grafikformate.

Präsentation zum Thema: "Grafikformate."—  Präsentation transkript:

1 Grafikformate

2 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)

3  BMP (reine Rastergrafik)

4  JPG (Verlauf von bis...)

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

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

7 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

8 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

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

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

11 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: bis ; hexadezimal: 00 bis FF) also 24 Bit pro Farbe, d.h. 224 (>16.7 Mio) Farben Beispiele: = FF0000 = = reines Rot = = = Grau

12 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

13 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 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

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

15 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

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

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

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

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

20 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?

21 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

22 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

23 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

24 26 Kb

25 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)

26 Was zeigt Rätsel.svg? <svg version="1.1" xmlns=" xmlns:xlink=" xmlns:a=" " x="0px" y="0px" width="600px" height="600px" viewBox=" " enable-background="new " 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, , ,150"/> <polygon fill="#FFFFFF" stroke="#FFFFFF" points="250, , ,50 250,50"/> </svg>

27 Rätsel.svg

28 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.

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

30 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 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?

31 Bild-/Bildschirm-/Drucker-
Auflösung

32 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

33 Bildschirmauflösung (wie viele Pixel eingebaut sind)
ca 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

34 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.

35 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)

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

37 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

38 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

39 26 Kb