Digitale BilderIT-Zertifikat der Phil.-Fak.:

Advanced IT Basics

Ein Referat von Martin Riesenweber, Carina Sperber und Julia Schulte

Digitale Bilder 2

Inhaltsverzeichnis1. Grundbegriffe: Pixel und Dots2. Auflösung3. dpi/ppi4. Bitmaps/Vektorgrafiken5. Bildformate6. Bitmap-Formate: TIFF, GIF, PNG, JPEG, BMP, RAW7. Farbtiefe8. Farbräume9. Quellen

06.05.2015

Digitale Bilder 3

Pixel• Englisch: Picture Element• Deutsch: Bild-Element / Bildpunkt• Kleinstes Element einer digitalen

Rastergrafik• Lichtpunkt kleinste Bildeinheit auf dem

Bildschirm• Rasterförmige Anordnung macht

Zuordnung von Daten möglich (Position/Farbwert) enthält die Bildinformation

06.05.2015

Digitale Bilder 4

Dots• Deutsch: Punkt• Äquivalent zu pixel• Kleinste Einheit einer Druckausgabe• Ein dot = ein gedruckter Punkt• Verwendung bei Drucken und Scans

06.05.2015

Digitale Bilder 5

Auflösung• Bildauflösung = Anzahl der Pixel / Dots pro Bild• Zwei Varianten: 1) Anzahl der Bildpunkte (Digitalfotografie: Megapixel)2) Bildpunkte pro Zeile (Horizontale) mal Spalte (Vertikale) Information über das Seitenverhältnis Bsp. Bildschirm: 1024 x 768

06.05.2015

Digitale Bilder 6

ppi / dpi• ppi: pixel per inch bezieht sich

auf die Lichtpunkte (Bildschirm)• dpi: dots per inch bezieht sich

auf die Bildpunkte (Drucker)• Wie viele Punkte kann ein

Drucker auf einem Inch (=2,54 cm) drucken?• Gängige Druckauflösung: 300dpi

06.05.2015

Digitale Bilder 7

ppi/dpi• Mit ppi/dpi und der

gewünschten Größe eines Fotos kann die Zahl der Pixel ausgerechnet werden

Bsp.: 10x15cm, 72 dpi

Breite:

Höhe:

Pixelanzahl: 283 x 425 =120.275

06.05.2015

= 283

= 425

Digitale Bilder 8

Bitmaps• Verwenden Farbraster (Pixel) für die Darstellung von Bildern• Jeder Pixel hat eine bestimmte Position und einen Farbwert• Gängigste Form für Fotos, digitale Zeichnungen etc. • Schattierungen & Farben in feinen Abstufungen wiedergeben• Sind auflösungsabhängig feste Anzahl von Pixeln, Schärfe und

Qualität kann beim Drucken oder Skalieren sinken

06.05.2015

Digitale Bilder 906.05.2015

Bitmaps

Digitale Bilder 10

Bitmaps• Bitmap-Formate:• TIFF, GIF, PNG, JPEG, BMP, RAW• Bitmap-Anwendungen: Adope Photoshop, GIMP, Corel Photopaint,

MS PhotoDraw, Paintshop Pro

06.05.2015

Digitale Bilder 11

Vektorgrafiken• Bestehend aus Linien und Kurven, die durch Vektoren definiert

werden• Verschiebungen, Größen- und Farbänderung eines Bilds mindert nicht

die Bildqualität• Auflösungsunabhängig Detailtreue & Bildschärfe bleiben erhalten• praktisch für Grafiken, Logos, Illustrationen etc.

06.05.2015

Digitale Bilder 1206.05.2015

Vektorgrafiken

Digitale Bilder 13

Vektorgrafiken• Gängigste Vektorgrafik-Anwendungen und -Formate:• Adobe Illustrator; EPS• Corel Draw; CDR• AutoCAD

06.05.2015

Digitale Bilder 14

Bildformate• Für die Projektion von Bildern sind:• Daten der einzelnen Pixel notwendig• sowie weitere Daten wie: Breite, Höhe und Farbtiefe• Zusätzlich Angaben zur Quelle, Copyright, etc.• Informationen werden durch verschiedene Regelwerke errechnet• diese Regeln werden „Bildformate“ genannt

06.05.2015

Digitale Bilder 15

TIFF (Tagged Image File Format)• Das derzeit vollständigste und flexibelste Format zur

Langzeitspeicherung von Bildern• universell einsetzbar und leicht erweiterbar• unkomprimiert oder mit diversen Kompressionsarten• Format von Adobe• Nachteil: nicht standardmäßig im WWW nutzbar

06.05.2015

Digitale Bilder 16

GIF (Graphic Interchange Format)• Weniger flexibel, dafür im WWW verarbeitbar• Unterstützt Interlacing (heute vermehrt irrelevant)• Animation von Grafiken durch zeitversetzte Aneinanderreihung der

Einzelbilder• Nachteil: verwendet das LZW-Kompressionsverfahren (Copyright

Compuserve)

06.05.2015

Digitale Bilder 17

PNG (Portable Network Graphics)• „Nachfolgeformat“ von GIF• Unterstütz auch Interlacing, jedoch keine Animation von Grafiken• Standardmäßig nach Deflate-Algorithmus• Verschiedene Kompressionstypen implementiert• Offene Spezifikation

06.05.2015

Digitale Bilder 18

JPEG (Joint Photographic Expert Group)• Eher Kompressionsformat als Bildformat• Aber: Regeln zur Kompression ebenso vorhanden• Im WWW problemlos verarbeitbar• Vorzugsweise für Bildern mit feinen Unterschieden (z.B. Fotos)• Nachteil: verlustbehaftete Kompression

06.05.2015

Digitale Bilder 19

BMP (Windows Bitmap Format)• Microsoftformat, das selbst nicht mehr zwischen den einzelnen

Betriebssystemen kompatibel ist• Wird durch RLE (bilddirektionale Steuerzeichen) beeinflusst• Schneller und effizienter Zugriff auf Bilddaten aufgrund rasterartiger

Anordnung• Nachteil: nicht für Langzeitspeicherung zu empfehlen –

Kompatibilitätskonflikte und enorme Datengröße

06.05.2015

Digitale Bilder 20

RAW Image Format• Rohdatenformat als Format von Digitalkameras u.ä.• Vergleichbar mit alten Negativfilmen: keine Zwischenbearbeitung

durch eine Bearbeitungssoftware• Weiterverarbeitung mit RAW-Converter in TIFF oder JPEG• Verlustfreie und unveränderte Aufbewahrung• Nachteil: Dateigröße und spezifizierte RAW-Formate

06.05.2015

Digitale Bilder 21

Farbtiefe• Farbauflösung, Bit-Tiefe• Maßeinheit für die Anzahl der Bits pro Pixel• Festlegung, wie viele Farbinformationen in einer Datei zur Verfügung

stehen• je größer die Farbtiefe, desto mehr Farben können dargestellt

werden

06.05.2015

Digitale Bilder 22

Farbtiefe

06.05.2015

• Schwarz-Weiß-Bild: 1 bit= 1/0, entspricht schwarz o. weiß• Graustufen Bild: 8 bit hat 256 möglicher Werte, Grauabstufung• True Color Image: 24 bit mit 10 Mio. Farben

Digitale Bilder 23

Farbräume• Anhand von Farbkanälen werden die Farbinformationen von Pixeln

gespeichert . Es ist jeweils ein eigener Farbkanal für jede Grundfarbe eines Farbformates nötig.

• Die geläufigsten Farbformate sind RGB, CMYK, HSB und Lab; sie bestehen jeweils aus gemischten Farben

• Ein Farbraum ist die Variante eines Farbmodells mit einem bestimmten Umfang von Farben

06.05.2015

Digitale Bilder 2406.05.2015

Digitale Bilder 25

FarbräumeDas additive RGB-Farbmodell• additives Farbsystem, bei dem sich die Primärfarben aus

den Grundfarben Rot (R), Grün (G) und Blau (B) zusammensetzen

• Die RGB-Farben ergeben in ihrer Überlagerung die Farbe Weiß (das gesamte Licht wird an das Auge zurückreflektiert)

• Die Farbe Schwarz wird durch das Fehlen aller Primärfarben erzeugt

• Das RGB-System findet insbesondere im Fernsehen, auf Monitoren und bei Digitalkameras Verwendung

06.05.2015

Digitale Bilder 26

FarbräumeDas HSB- oder HSV-Farbmodell

• In diesem Farbmodell wird die Farbe anhand dreier Faktoren definiert:

1. Der Farbton (Hue)(Farbwinkel ° auf dem Farbkreis)

2. Die Sättigung (Saturation)( 0% = keine Farbe / 50% = ungesättigte Farbe / 100% = reine Farbe)

3. Die Helligkeit (Brightness / Value)( 0% = keine Helligkeit / 100% = volle Helligkeit)

06.05.2015

Digitale Bilder 27

Farbräume

06.05.2015

Ein Pullover in „hellem Neon-Blau“

blau = Farbe (H)neon = Sättigung (S)hell = Helligkeit (V)

Beschrieben nach dem RGB-System: 0;206;209

(oder RGB in Prozent: 0%; 81%,82%)

Beschrieben nach dem HSB-System:240°; 80%, 90%

Digitale Bilder 28

FarbräumeDas subtraktive CMYK-Farbmodell

• Diese Farbsystem setzt sich aus den vier Primärfarben Cyan (C), Magenta (M), Gelb (Yellow/Y) und Schwarz (Key/K) zusammen

• Durch subtraktive Farbmischung wird die Darstellung sämtlicher Farben ermöglicht

• Da die Kombination der Komponenten CMY kein reines Schwarz ergibt, muss Schwarz als vierte Druckfarbe verwendet werden

• Das CMYK-System wird insbesondere bei Druckern verwendet

06.05.2015

Digitale Bilder 29

FarbräumeDas Lab-Farbmodell

• Dreiachsiges (xyz) Farbsystem, bei dem die Helligkeit getrennt von den Farbtönen auf einer eigenen Achse aufgetragen wird

• a- und b-Achse beschreiben die Farben und bilden eine Ebene

• Die Helligkeitsachse verläuft vertikal zur Farbachse (L = Luminance)

• Schwarz und Weiß werden über die L-Achse erzeugt (0= Schwarz / 100 = Weiß)

06.05.2015

Von oben nach unten: 25%Luminanz, 50%Luminanz,75%Luminanz

Digitale Bilder 30

Quellen• http://www.fmedda.com/de/article/dpi_ppi• https://

www.mathematik.de/spudema/spudema_beitraege/beitraege/rooch/kap02.html• http://www.filmscanner.info/Farbmodelle.html• http://www.farb-tabelle.de/de/rgb2hex.htm?q=0%2C206%2C209• http://www.hki.uni-koeln.de/display_course/317

06.05.2015

Digitale Bilder 31

Danke für eure Aufmerksamkeit!

06.05.2015