Transcript Digitale Bildformate

Digitale Bildformate
Dipl.Bibl. Sleegers
Digitale Bildformate
1 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Computergrafiken lassen sich grob in zwei
Kategorien einteilen:
Vektorgrafiken und Bitmap-Grafiken, die man
auch Pixelgrafiken nennt.
Vektorgrafiken basieren auf
Linien, Kurven und geometrischen Grundformen.
Pixelgrafiken basieren auf
einer Menge von Bildpunkten,
den so genannten Pixel.
Beide Typen haben ihre Vor- und Nachteile.
Digitale Bildformate
2 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Aus Vektoren lassen sich zwar recht
komplexe Grafiken erstellen, nicht aber
fotorealistische Bilder.
Vektorgrafiken eignen sich gut für
Diagramme, Piktogramme, Logos, ...
Verbreitete Programme:
CorelDraw, FreeHand
Vektorgrafiken I
3 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
Roter Kreis:
Farbe
Radius
Lage Mittelpunkt
X-Koordinate
Y-Koordinate
Lage hinter Weißem
Kreis
Weisser Kreis:
Farbe
Radius
Lage Mittelpunkt
1.
X-Koordinate
2.
Y-Koordinate
Lage hinter Weißem
Kreis
Graues Rechteck:
Farbe
Breite
Höhe
Lage Mittelpunkt
1.
X-Koordinate
2.
Y-Koordinate
Lage hinter Rotem
Kreis
Hintergrundfarbe
Vektorgrafiken II Aufbau
4 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
1,5 fach
Skalieren
1.
Roter Kreis:
2.
Farbe
3.
Radius x1,5
4.
Lage Mittelpunkt
5.
X-Koordinate
6.
Y-Koordinate
7.
Lage hinter Weißem
Kreis
8.
Weisser Kreis:
9.
Farbe
10.
Radius x1,5
11.
Lage Mittelpunkt
1.
X-Koordinate
2.
Y-Koordinate
12.
Lage hinter Weißem
Kreis
13.
Graues Rechteck:
14.
Farbe
15.
Höhe x 1,5
16.
Breite x1,5
17.
LageMittelpunkt
1.
X-Koordinate
2.
Y-Koordinate
18.
Lage hinter Rotem
Kreis
19.
Hintergrundfarbe
Vektorgrafiken III (Skalieren = vergrößern/verkleinern)
5 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Bitmap-Grafiken bestehen aus einzelnen
farbigen Bildpunkten, den Pixeln,
innerhalb eines Koordinatensystems.
Wird eine Vorlage gescannt, wird das Bild in
seine einzelnen Pixel zerlegt. Dabei hat
jedes Pixel eine bestimmte
Farbinformation und Position in einem
Koordinatensystem. Pixelgrafiken setzen
sich also grundsätzlich aus zahlreichen
Rechtecken zusammen. Diese Art der
Bilderstellung ermöglicht eine
fotorealistische Wiedergabe.
Pixelgrafiken I
6 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Von jedem Punkt wird
die x- und y Koordinate
und der Farbwert
gespeichert
Pixelgrafiken IIa
7 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Skalieren:
Problem bei Pixelgrafiken
Bei starkem Vergrößern werden
einzelne Pixel sichtbar - vergleichbar
wenn man ganz dicht an ein
Fernsehbild herantritt. Runde Formen
werden zu „Treppenstufen“.
Bei Verkleinerungen müssen
benachbarte Pixel ggf. verschmelßen
was unmittelbar zu
Farbveränderungen und mittelbar zu
Formveränderungen führt.
Pixelgrafiken IIb (Skalieren)
8 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Je kleiner die Pixel
bzw. je mehr Pixel auf gleicher Fläche sind
=> je höher also die Auflösung ist
=> desto reichhaltiger und realistischer wird
das Bild
=> desto mehr Speicherplatz wird aber auch
benötigt, da Position und Farbe jedes Pixels
einzeln berechnet/gespeichert werden muss.
Ein farbiges Foto mit einer Auflösung von 300
dpi in DIN A-4-Größe belegt z.B. über 36 MB
Speicherplatz!
Pixelgrafiken IIIa
9 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Die Pixel bilden in dem erwähnten Koordinatensystem Muster
von Formen und Farben, so dass sie im allgemeinen nicht als
einzelne Punkte wahrgenommen werden.
Jedes Mal, wenn man eine Pixelgrafik skaliert, müssen die Pixel
neu berechnet werden. Je nach Skalierungsfaktor wird also
die Anzahl der Pixel reduziert oder vermehrt, wodurch
unschöne Effekte entstehen können.
Die einfachsten Bilder enthalten nur die Farben Schwarz und
Weiß. Schattierungen und Grautöne ergeben sich aus der
Verteilung von schwarzen und weißen Pixeln, die für das Auge
zu Mustern verwachsen. Komplexere Bilder können über 16
Millionen Farben aufweisen. Eine solche Farbenvielfalt
erfordert allerdings viel Speicherplatz.
Pixelgrafiken eignen sich gut für Fotografien.
Verbreitetes Programm: PhotoShop
Pixelgrafiken IIIb
10 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Pixelgrafiken – Details
Bei Bitmap-Grafiken sind vier Faktoren für Qualität
und Dateigröße maßgeblich:
A Physikalische Größe des Bildes
B Auflösung
C Farbtiefe
D Komprimierung
Pixelgrafiken Details
11 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Physikalische Größe des Bildes
Auch digitale Bilder haben eine „tatsächliche“ Größe.
Also eine Höhe und Breite (in cm).
Nach dem Scannen entspricht die Physikalische Größe des
Digitalbildes normalerweise der Größe der (Papier-)Vorlage.
z.B.
Postkarte ca.10x15 cm
oder DIN A4 Blatt ca. 20 x 30 cm
Beim Ausdruck des Digitalbildes unter der Option Tatsächliche
Größe erhält man dann auch wieder die Ausgangsgröße.
Die Größe kann in Bildbearbeitungsprogrammen Verändert und
für die vorgesehene Verwendung optimiert werden.
A
12 / 39
Physikalische Größe des Bildes
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Auflösung
In der Regel angegeben in dpi = dots per inch
= Bildpunkte pro inch (inch = 2,54 cm).
Vorstellbar aber sinnvoller als Fläche:
1 inch
2,54 cm
1 dpi
1 dot
4 dpi
16 dot
16 dpi
256 dot
2 dpi
4 dot
8 dpi
64 dot
32 dpi
1.024 dot
B
13 / 39
Auflösung I
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
B
14 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
600 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
600d x 600d= 360.000d
=0,36 Mio dots
B
15 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
300 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
300d x 300d= 90.000d
=0,09 Mio dots
B
16 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
100 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
100d x 100d= 10.000d
=0,01 Mio dots
B
17 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
50 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
50d x 50d= 2.500d
=0,0025 Mio dots
B
18 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
25 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
25d x 25d= 625d
=0,000625 Mio dots
B
19 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
10 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
10d x 10d= 100d
=0,0001 Mio dots
B
20 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
5 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
5d x 5d= 25d
=0,000025 Mio dots
B
21 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
2 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
2d x 2d= 4d
=0,000004 Mio dots
B
22 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
2,54 cm = 1 inch
1200 dpi
1 dpi
1200d x 1200d= 1.440.000d
=1,44Mio dots
1d x 1d= 4d
=0,000004 Mio dots
B
23 / 39
Auflösung I Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Auflösung für den Druck
300dpi bzw 600dpi sind gängige Auflösungen
für den Ausdruck auf Papier.
Auflösung für den Monitor
17“ Monitor
= ca. 30x20 cm Bild = ca. 12x8 inch
Auflösung 800x600 = 800/12 x 600/8
= 67x75
Auflösung 1024x768 = 1024/12 x 768/8 = 85x96
=> im Mittel 72 (in Zukunft 90) dpi ausreichend.
dpi =
lpi =
ppi =
px =
dots per inch (b. Duckern)
lines per inch (b. Scannern)
points/pixel per inch
pixel
B
24 / 39
Auflösung II
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
B
25 / 39
Auflösung II
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
800 d
= 66,6 dpi
600 d
= 75 dpi
Bildschirmauflösung (gemittelt)
bei 800x600 auf 17“Monitor = 72 dpi
B
26 / 39
Auflösung II
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Auflösung für den Druck
300 dpi bzw 600 dpi sind gängige Auflösungen
für den Ausdruck auf Papier.
Auflösung für den Monitor
17“ Monitor = ca. 30x20 cm sichtbares Bild = ca. 12x8 inch
Auflösung 800x600 = 800/12 x 600/8
= 67x75
Auflösung 1024x768 = 1024/12 x 768/8
= 85x96
Faustregel:
im Mittel 72 dpi (in Zukunft 90 dpi) ausreichend
oder Bilder fürs Web brauchen max. 100 dpi
B
27 / 39
Auflösung II
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Die Farbtiefe legt fest, wie viele Farben ein Bild
maximal enthalten kann und wie sie definiert
werden. Technisch ausgedrückt, wie viele Bits
zum Speichern der Farbinformation benutzt
werden.
C
28 / 39
Farbtiefe I
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Exkurs Farben in der Computerwelt:
Es existieren zwei Modelle:
RGB (Rot-Grün-Blau) und
CMYK (Cyan-Magenta-Yellow-Kontrast)
Bei beiden Modellen wir der Farbton über die Mischung
der drei Farbkanäle erzeugt.
Der Wert für die Helligkeit des Farbpunktes wird
• bei RGB auch in der Information der drei Farben transportiert.
• bei CMYK existiert hierfür ein zusätzlicher Kanal,
hier wird der Kontrast- (Schwarz-) Wert jedes Punktes
transportiert.
RGB wird überwiegend für Monitordarstellungen eingesetzt.
CMYK wird überwiegend für den Ausdruck eingesetzt.
C
29 / 39
Farbtiefe Exkurs
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
RGB (Rot-Grün-Blau)
Bei Bildschirmen wird zur Darstellung von
Farben das RGB-Farbsystem verwendet. Die
Farbe eines Pixel setzt sich zusammen aus
den Farben Rot, Grün und Blau. Beim RGBFarbsystem werden die Farben durch eine
additive Farbmischung erzeugt. Hier ergibt
das Zusammenmischen der drei Farben Rot,
Grün und Blau die "Farbe" Weiß.
CMYK (Cyan-Magenta-Yellow-Kontrast)
Beim Druck werden das CMYK-Farbsystem
verwendet, d.h. die Farben Cyan, Magenta,
Yellow (gelb) und Key (schwarz, wird zur
Verstärkung des Kontrastes verwendet).
Beim CMYK-Farbsystem werden die Farben
substraktiv erzeugt.
C
30 / 39
Farbtiefe Exkurs
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Beispiele für Farbtiefen
(mit den meisten Bildbearbeitungsprogrammen definiebar):
(RGB-Model)
Farben
1 Bit = 21 = 2
Schwarz/Weiß
4 Bit = 24 = 16
(Beisp. nächste Folie)
8 Bit = 28 = 256
Standart im Web
16 Bit = 216 = 65.536
High Color
24 Bit = 224 = 16.777.216 True Color
2 Farben
16 Farben
256 Farben
16Mio Farben
C
31 / 39
Farbtiefe II
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Farbe
Numerisch
Prozentual
Hexadezimal Kurzform
aqua
rgb(0,255,255)
rgb(0%,100%,100%)
#00FFFF
#0FF
black
rgb(0,0,0)
rgb(0%,0%,0%)
#000000
#000
blue
rgb(0,0,255)
rgb(0%,0%,100%)
#0000FF
#00F
rgb(100%,0%,100%)
#FF00FF
#F0F
fuchsia rgb(255,0,255)
gray
rgb(128,128,128) rgb(50%,50%,50%)
#808080
green
rgb(0,128,0)
rgb(0%,50%,0%)
#008000
lime
rgb(0,255,0)
rgb(0%,100%,0%)
#00FF00
maroon rgb(128,0,0)
rgb(50%,0%,0%)
#800000
navy
rgb(0,0,128)
rgb(0%,0%,50%)
#000080
olive
rgb(128,128,0)
rgb(50%,50%,0%)
#808000
purple
rgb(128,0,128)
rgb(50%,0%,50%)
#800080
red
rgb(255,0,0)
rgb(100%,0%,0%)
#FF0000
silver
rgb(192,192,192) rgb(75%,75%,75%)
#C0C0C0
teal
rgb(0,128,128)
#008080
white
rgb(255,255,255) rgb(100%,100%,100%) #FFFFFF
#FFF
yellow
rgb(255,255,0)
#FF0
rgb(0%,50%,50%)
rgb(100%,100%,0%)
#FFFF00
C
32 / 39
#0F0
#F00
Farbtiefe III 4 Bit 16 Farben
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
WebTip: ColorCube Darstellung 8 Bit 256 Farben fürs Web
http://www.geocities.com/SoHo/3505/help/colorcube.html
C
33 / 39
Farbtiefe III 8 Bit 256 Farben
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Die Komprimierung wird u.a. über das Dateiformat
bestimmt.
Die Komprimierung läuft über komplizierte
bildanalytische und mathematische Verfahren ab.
Diese Verfahren Nutzen
einerseits „Schwächen“ des menschlichen Auges,
andererseits Analogien in Digitalen Bildern.
Ziel der Komprimierung ist die Reduktion der
Datenmenge für ein Bild mit möglichst keinem oder
geringem Qualitätsverlust.
D
34 / 39
Komprimierung I
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Beispiel:
leuchtturm.jpg
(160 x 240) px
= 38400 px
d.h. 38400 x Position und Farbwert speichern
Das Komprimierungsprogramm analysiert,
dass der Farbwert in den obersten 10 Zeilen gleich ist
Anstatt
(10 x 160) px = 1600px
einzeln zu speichern,
kann gespeichert werden:
von
px 1
zeile 1
bis
px 160
zeile 10
farbwert
= xyz
D
35 / 39
Komprimierung Beispiel
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Formatname
Kurz- Kompriform mierung
Vergleich zur
Org.größe
von 4,74 MB
Anmerkung
Zweck
Anwendung
Bitmap
BMP nein
4,74 MB
als Windows- und
OS/2- Format
WindowsProgramme
TIFF
(Tagged Image
File Format)
TIF
nein
4,74 MB
TIFF,
LZW-komprimiert
TIF
ja
kleiner 2,73 MB
komprimiert ohne
Informations- verluste
TIFF 8 Bit
(256 Farben)
TIF
nein
kleiner 1,58 MB
reduzierte
Farbinformation
TIFF 8 Bit,
LZW-komprimiert
TIF
ja
kleiner 0,71 MB
komprimiert gegenüber
der 8-Bit-Version
verlustfrei
Encapsulated
Postscript
EPS
nein
13,12 MB
ASCII- Codierung
mit 8-Bit Vorschau
DTP
Compuserve
"Graphics
Interchange
Format"
GIF
immer
1,30 MB
maximal 8 Bit (256
Farben) Farbtiefe!
einer der INTERNETStandards für Logos,
Buttons, Grafiken mit
geringer Farbtiefe
JPEG
JPG
immer
1,62 MB
0,23 MB
0,05 MB
Option "sehr gut"
Option "gut"
Option "mäßig"
Speicherplatz sparen
einer der INTERNETStandards für Photos,
Grafiken mit hoher
Farbtiefe
Gängiges
Scanner-Format
Wichtige Bilddateiformate in der Übersicht
36 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
WebTip
Mehr zum Thema Digitale Bildformate
http://www.glossar.de/glossar/z_bildformate.htm
http://selfhtml.teamone.de/grafik/index.htm
http://www.comic.sbg.ac.at/bildanalyse/bildformate.htm
http://www.knowware.de/?book=bildbearbeitung
hier Heft: Bildbearbeitung für Einsteiger
WebTip Programm zur Bildbearbeitung und –betrachtung
Freeware-Programm IrfanView
http://www.irfanview.com
Bildformate WebTips
37 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
JPG und GIF sind die gängigen Bildformate im
Internet
JPG:




Komprimierung in verschiedenen Stufen
je nach Komprimierung wird das Bild verändert, ggf. Verluste
Störungen bei starker Vergrößerung
„transportiert“ hohe Farbtiefen
Einsatz: FOTOS, Grafiken mit hoher Farbtiefe
GIF:
 Feste Komprimierung
 verschied. Besonderheiten: Transparenz, Animation,...
 maximal 8 Bit (256 Farben) Farbtiefe!
Einsatz: LOGOS, Buttons, Diagramme,
Grafiken mit geringer Farbtiefe
Wichtige Bilddateiformate JPG und GIF
38 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“
Ende
39 / 39
FH Köln F0301 Institut für Informationswissenschaft: Sleegers „Digitale Bildformate“