Referat IT Advanced Basics

Digitale Bilder
IT-Zertifikat der Phil.-Fak.:
Advanced IT Basics
Ein Referat von Martin Riesenweber, Carina Sperber und Julia Schulte
Inhaltsverzeichnis
1. Grundbegriffe: Pixel und Dots
2. Auflösung
3. dpi/ppi
4. Bitmaps/Vektorgrafiken
5. Bildformate
6. Bitmap-Formate: TIFF, GIF, PNG, JPEG, BMP, RAW
7. Farbtiefe
8. Farbräume
9. Quellen
06.05.2015
Digitale Bilder
2
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
3
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
4
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
5
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
6
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:
𝑝𝑥
10𝑐𝑚 𝑥 72𝑖𝑛𝑐ℎ
𝑝𝑥
2,54 𝑖𝑛𝑐ℎ
Höhe:
= 283
𝑝𝑥
15𝑐𝑚 𝑥 72𝑖𝑛𝑐ℎ
𝑝𝑥
2,54 𝑖𝑛𝑐ℎ
= 425
 Pixelanzahl: 283 x 425
=120.275
06.05.2015
Digitale Bilder
7
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
8
Bitmaps
06.05.2015
Digitale Bilder
9
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
10
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
11
Vektorgrafiken
06.05.2015
Digitale Bilder
12
Vektorgrafiken
• Gängigste Vektorgrafik-Anwendungen und -Formate:
• Adobe Illustrator; EPS
• Corel Draw; CDR
• AutoCAD
06.05.2015
Digitale Bilder
13
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
14
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
15
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
16
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
17
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
18
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
19
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
20
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
21
Farbtiefe
• 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
06.05.2015
Digitale Bilder
22
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
23
06.05.2015
Digitale Bilder
24
Farbräume
Das 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
25
Farbräume
Das 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
26
Farbräume
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%
06.05.2015
Digitale Bilder
27
Farbräume
Das 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
28
Farbräume
Das 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ß)
Von oben nach unten:
25%Luminanz,
50%Luminanz,
75%Luminanz
06.05.2015
Digitale Bilder
29
Quellen
• http://www.fmedda.com/de/article/dpi_ppi
• https://www.mathematik.de/spudema/spudema_beitraege/beitraege/rooch/kap
02.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
30
Danke für eure Aufmerksamkeit!
06.05.2015
Digitale Bilder
31