Thema: Bildbearbeitung -Pixelbilder- Datei-Formate Ausgewählte ...

Bauinformatik I: Bildbearbeitung -Pixelbilder- 07 VL – B S.1
Thema: Bildbearbeitung -Pixelbilder-
Datei-Formate
"Die Bilderwelt teilt sich in zwei Lager": Pixel- und Vektorgrafik.
Vektor-Formate
Vektorgrafiken bestehen aus Zeichenbefehlen wie Linen, Rechtecke
und Kreise. Drei bekannte Datei-Formate WMF, SVG und SWF. Vektorbilder
benötigen weniger Speicher als ihre Pixelkollegen. Sie können
beliebig skaliert werden, ohne das die Darstellung leidet.
Pixel-Formate
Die Pixelgrafik ist aus einzelnen rechteckigen Bildpunkten, den Pixeln,
aufgebaut. Ein Pixelbild wird häufig auch als Bitmap bezeichnet. Drei
wichtige Dateiformate: GIF, JPEG und PNG. Nachteil:
Pixelbilder können nur durch hinzufügen/entfernen oder vergrößern/verkleinern
der Bildpunkte skaliert werden. Dafür gibt es verschiedene
Algorithmen, die Qualität ist leider nie optimal.
Ausgewählte Pixelformate
JPEG-Format GIF-Format PNG-Format
JPEG (.jpg oder .jpeg) steht für Joint Photographic
Expert Group (die Korporation
hat das Format entwickelt).
• 16,7 Millionen Farben
• hohe Kompression mit Verlust (je
höher der Kompressionsfaktor, desto
schlechter die Bildqualität)
• durch die Kompression entstehen
scharfen Übergängen (z.B. Kanten)
Fransen.
• Seine Stärke liegt bei sehr feine Farbverläufen
• Gut geeignet für Fotos, schlecht für
Text oder Grafik
• Der JPEG-Algorithmus wird auch auf
Videos angewendet, wie im Format
MPEG (z.B. MPEG2 bei DVD’s).
Pixelbilder und Speicherverbrauch
GIF steht für Graphics Interchange Format
und wurde vor vielen Jahren vom Online-
Anbieter CompuServe eingeführt.
• arbeitet mit einer Farbpalette (maximal
256 Farben)
• verlustfreie Kompression, jedoch mit
eingeschränkten Farben
(der LZW-Kompressions-Algorithmus
ist patentiert und kostet Lizenzgebühren).
• transparent: eine Farbe kann als
"transparent" definiert werden.
• Interlaced: wird beim Laden nicht
zeilenweise aufgebaut, sondern
schichtweise.
(So erscheint die Grundstruktur der
Grafik sehr schnell und wird beim Ladevorgang
immer feiner aufgelöst.)
• Animation: es lassen sich mehrere
Grafiken in einer einzigen Grafikdatei
speichern und zeitgesteuert anzeigen
• Gut geeignet für Grafik und Text
PNG bedeutet Portable Network Graphic.
Es wurde für das WWW vom W3-
Konsortium konzipiert. Es vereint die Vorteile
von JPEG und GIF.
• Farbtiefe + Transparenz: 16,7 Mio.
Farben, wahlweise auch indizierten
Farben (Rot, Grün und Blau + 4. Farbe
für die Transparenz).
• verlustfreie Kompression (Kompressionsalgorithmus
ähnlich wie ZIP-
Format)
• Interlaced-Funktion: Wie beim GIF-
Format schichtweise Aufbauen der
Grafik
• Gut geeignet für Grafik und Text
Der richtige Kompromiss zwischen Darstellung und Größe der Bilddatei muss gefunden werden. Als Richtschnur
fürs Internet gilt: max. 30 KB Speicherbedarf pro Grafik (besser deutlich darunter). Der Speicherverbrauch
wird von folgenden Faktoren beeinflusst:
1. Bildgröße (Höhe und Breite),
2. Farbtiefe (Anzahl der Farben) und
3. vom Grafikformat (unterschiedlichen Komprimierungsverfahren).
Grafiken
Vektor Pixel
GIF PNG
Die Einflussgrößen werden im folgenden erläutert. Hinweis: Die Vektorgrafik folgt anderen Gesetzen und
hängt wesentlich vom Dateiformat und der Fülle der Grafikbefehle in der Datei ab.
WMF
JPG
SVG SWF
…
…

Bauinformatik I: Bildbearbeitung -Pixelbilder- 07 VL – B S.2
Pixelmaß Anzahl der Bildpunkte
Ist die Anzahl der Pixel je Breite und Höhe.
Sie wird in Pixel x Pixel gemessen.
Links: 2 x 2 Pixel
Rechts: 3 x 4 Pixel
Auflösung Größe der Bildpunkte
Ist die Zahl der Pixel, die auf eine Länge X passen.
Sie wird in Punkt pro Zoll (dpi - Dot per Inch) gemessen.
Ein Inch ist ein Zoll. Ein Zoll sind rund 2,54cm.
Links: geringere Auflösung
Rechts: höhere Auflösung
Farbtiefe Anzahl der möglichen Farben
Wie viele Farbinformationen sind für die Pixel verfügbar.
Links: 1 Farbe
Rechts: 2 Farben
Wechselwirkung Pixelmaß - Auflösung
• Pixelmaße und Auflösung sind voneinander abhängig.
• Ein 1 x 1 Zoll großes Bild mit einer Auflösung von 72 DPI enthält
insgesamt 5184 Pixel (72 Pixel x 72 Pixel = 5184). Bei einer Auflösung
von 150 DPI enthält das Bild dann 22.500 Pixel.
⇒ Bilder mit hoher Auflösung enthalten i. d. R. mehr Details und
feinere Farbübergänge als Bilder mit niedriger Auflösung.
• nur Auflösung ändern, bei gleicher Pixel-Anzahl
⇒ Es wird nur die Darstellungsgröße des Bildes verändert.
Bild: von 72 auf 150 DPI erhöht, OHNE Pixel-Anzahl zu verändern
• Auflösung ändern und dadurch Pixel-Anzahl anpassen
⇒ Wenn die Ausgabegröße unverändert bleiben soll, muss beim
Ändern der Bildauflösung die Zahl der Pixel geändert werden.
⇒ Ein Bild mit größerer Auflösung hat kleinere Pixel.
⇒ Wenn die Auflösung erhöht wird, müssen Pixel hinzugerechnet
werden!
⇒ ABER: Die Bildqualität wird kaum verbessert. Je nach Güte
das Algorithmus!.
oben: von 72 auf 150 DPI mit Algorithmus Pixelwiederholung Pixel hinzugefügt
unten: von 72 auf 150 DPI mit Algorithmus Bikubisch Pixel hinzugefügt
Zur Farbtiefe
Eine größere Farbtiefe (mehr Bitinformation pro Pixel) bedeutet mehr Farben und eine präzisere Farbdarstellung.
• Ein Pixel mit einer Farbtiefe von 1 Bit hat zwei mögliche Werte: Schwarz und Weiß.
• Ein Pixel mit einer Farbtiefe von 8 Bit hat 28 bzw. 256 mögliche Werte.
• Ein Pixel mit einer Farbtiefe von 24 Bit hat 224 bzw. ca. 16 Millionen mögliche Werte.

Bauinformatik I: Bildbearbeitung -Pixelbilder- 07 VL – B S.3
Bildschirm - Was kann er ?
Durch das Internet, Videos usw. werden Bilder primär für den Bildschirm konzipiert. Deshalb wird der Bildschirm
"unter die Lupe genommen".
Pixelmaße
• Ein 15-Zoll-TFT-Monitor (4/3) stellt i. d. R.
1024 Pixel horizontal und 768 Pixel vertikal
dar.
⇒ Ein Bild mit den Maßen 1024 x 768 Pixel
füllt diesen Bildschirm aus.
• Bei einem größeren Monitor, der auch auf
1024x768 Pixel eingestellt ist, füllt das Bild
den Bildschirm immer noch ganz aus. Die
Pixel erscheinen größer.
• Wenn Sie die Einstellung des größeren Monitors
auf 1600 x 1200 Pixel erhöhen, wird
das Bild kleiner angezeigt und füllt den Bildschirm
nur noch teilweise aus.
Auflösung
• Die meisten Bildschirme arbeiten mit ca. 96
dpi Auflösung.
• Die Bildschirmauflösung ist die Ursache dafür,
dass die Anzeigegröße eines Bildes auf
dem Bildschirm von der Druckgröße abweicht.
• Die Auflösung von Druckern ist > 300 dpi
⇒ Ein Bild erscheint auf dem Drucker kleiner!
Schlussfolgerungen für unsere Bilder?
Wenn Bild und Monitor die gleiche Auflösung haben!
Bild mit einer Auflösung von 72 DPI und 300 DPI
• PNG oder GIF für Text mit Grafik (dabei die Farbtiefe möglichst gering halten)
• JPG für Fotos (die Kompression nach Bedarf einstellen)
• Für den Monitor:
o Pixelmaß:

Bauinformatik I: Bildbearbeitung -Pixelbilder- 07 VL – B S.4
Speicherverbrauch der Dateiformate
Verglichen wird ein Screenschot und ein Foto, in 3 Varianten gespeichert: als JPG, als GIF und als PNG. (Die
Abmessungen und die Auflösung (dpi) sind gleich, bei ähnlicher Darstellungs-Qualität). Gesucht wird das Dateiformat
mit dem geringsten Speicherverbrauch.
Grafik mit Text ⇒⇒⇒⇒ Vorteil für PNG
275Pixel x 300Pixel (9,7cm x 13,6cm) bei 72 DPI
Word.jpg, Qualität 30, 20 KB
Foto ⇒⇒⇒⇒ Vorteil für JPG
275Pixel x 300Pixel (9,7cm x 13,6cm) bei 72 dpi
Berge.jpg, Qualität 30, 5 KB
Word.gif, 16 Farben, 8 KB
Berge.gif, 64 Farben, 31 KB
Word.png, 16 Farben, 7 KB
Berge.png, 64 Farben, 34 KB

Bauinformatik I: Bildbearbeitung -Pixelbilder- 07 VL – B S.5
Photoshop Elements: Bildausschnitte freistellen
mit dem Werkzeug Rechteckige Auswahl
(Modus Normal) den Bildbereich auswählen
im Menü Bild die Auswahl freistellen
das beschnittene Bild

Bauinformatik I: Bildbearbeitung -Pixelbilder- 07 VL – B S.6
Photoshop Elements: Auflösung und Pixelanzahl einstellen
im Menü Bild den Dialog Bildgröße aufrufen
entweder nur Auflösung oder Auflösung +
Pixelanzahl verändern
hier gewählt:
• Algorithmus Bikubisch schärfer
• nur die Auflösung verringern
⇒ Pixelzahl wird automatisch verringert,
⇒ da die CM-Abmessungen beibehalten
werden sollen

Bauinformatik I: Bildbearbeitung -Pixelbilder- 07 VL – B S.7
Photoshop Elements: Auflösung / Pixelanzahl automatisiert einstellen
Bei allen Fotos im Ordner soll die Auflösung
und die Pixelanzahl reduziert werden!
im Menü Datei den Dialog Mehrere Dateien
verarbeiten… aufrufen
hier gewählt:
• Bilder 50% groß
• Auflösung 72 DPI
• mittlere Qualität
⇒ Bilder für die Bildschirm-Darstellung
optimiert
das Resultat