Original 400 fache Vergrößerung 1600 fache Vergrößerung

OriginalOriginal

400 fache Vergrößerung400 fache Vergrößerung

1600 fache Vergrößerung1600 fache Vergrößerung

Bitmap-Grafik: Bild mit Hilfe eines Rasters von Punkten beschreiben

Die einzelnen Pixel sind im Normalfall nicht sichtbar.

Vergrössert man das Bild aber stark genug, so kann man die Aufteilung des Bildes in Pixel deutlich erkennen.

Pixelgrafiken

Dieser Begriff setzt sich zusammen aus:

Bilder, die sich aus vielen kleinen Bildpunkten zusammensetzen, nennt man:

In Pixelgrafiken enthält jeder Punkt die Bild-information.

Picture und Elements = Pixel

auch hier setzen sich die Bilder aus kleinen Bildpunkten ( Pixeln ) zusammen.

auch hier setzen sich die Bilder aus kleinen Bildpunkten ( Pixeln ) zusammen.

PixelgrafikPixelgrafik

Monitor

Foto

Scanner

Drucker

Monitor

Foto

Scanner

Drucker

Dateigröße:Ø 1359 KB

Dateigröße:Ø 32 KB

Skalierbarohne

Qualitäts-verlust

Skalierbarmit großem

Qualitäts-verlust

Nicht jede Grafik ist eine Pixelgrafik:Nicht jede Grafik ist eine Pixelgrafik:

Frosch.cdr Frosch.bmp

Pixelgrafik

Woran liegt das ?

Es gibt jedoch noch eine andere Methode, Grafikinformationen abzuspeichern:

Bei dieser Grafik sieht man deutlich den punktweisen Aufbau und den damit verbundenen Treppchen-effekt.

Beispiel: Kreis und LinieBeispiel: Kreis und Linie

GrafikformateGrafikformate - Vergleich - Vergleich

Linie als Bitmap Line als Vektorgrafik

7,5 cm

5 cm 4 cm

Kreis:

• Mittelpunkt: (7,5 : 5)• Radius: 4• Farbe: Dunkelrot• Stärke: 0,2• Füllung: Gold

Vektorgrafik: Bild in geometrische Objekte unterteilen

VektorgrafikenBitmaps

Anwendungs-bereiche

Photos

Grafiken mit weichen Farbübergängen

Internetbilder

technische Zeichnungen

Schriftzüge

Druckvorlagen

Einfach editierbar

werden von fast allen Grafikprogrammen unterstützt

Keine Qualitätseinbussen bei Änderung der

Bildgrösse Vorteile

Nachteile nur mit spezifischen

Programmen editierbar;

Die VektorgrafikDie Vektorgrafik

E

A

200 300 400 5001000

100

200

300

400

Einheiten

EinheitenBei Vektorgrafiken wird der Bildschirm mit einem unsichtbaren Koordinatensystem überzogen.

Die Linie

Das System merkt sich nur,dass es sich um eine Strecke handelt, dass diese grün ist und den Anfangs- und den Endpunkt der Strecke.

(100/50)

(350/100)

[Strecke, grün, A=(100/50), E=(350/100)]

wird lediglich durch den Anfangspunkt A und den Endpunkt E im Koordinatensystem festgelegt.


r(80)M

200 300 400 5001000

100

200

300

400

Einheiten

Einheiten

Hier merkt sich das System lediglich,dass es sich um einen Kreis handelt, dass dieser blau ist, wo sein Mittelpunkt liegt und welchen Radius er hat.

Der Kreis:

(250/200)

[Kreis, blau, M=(250/200), r=80 ]


r(80)

(250/200)M

200 300 400 5001000

100

200

300

400

Einheiten

Einheiten

Geordnete Auflistungen von Informationen nennt man Vektoren

E

A

(350/100)(100/50)

[Kreis, blau, M=(250/200), r=80 ][Strecke, grün, A=(100/50), E=(350/100)]

SpeicherplatzbedarfSpeicherplatzbedarf

VektorgrafikVektorgrafik PixelgrafikPixelgrafik

gering:gering:

die gesamte Grafikinformationist als Vektor ge-speichert

die gesamte Grafikinformationist als Vektor ge-speichert

hoch:hoch:

jeder einzelne Pixel enthält die Grafikinformation

jeder einzelne Pixel enthält die Grafikinformation

Skalierung (Vergrößerung):Skalierung (Vergrößerung):


frei skalierbar:ohne Qualitätsverlust

frei skalierbar:ohne Qualitätsverlust

Skalierung:nur mit Qualitätsverlust

Skalierung:nur mit Qualitätsverlust

unscharfe Bilder, Treppchenbildung

unscharfe Bilder, Treppchenbildung

glatte, scharfe Kantenglatte, scharfe Kanten

NachbearbeitungNachbearbeitung


begrenzt:begrenzt:

nur ganze Unterobjekte lassen sich bearbeiten

nur ganze Unterobjekte lassen sich bearbeiten

unbegrenzt:unbegrenzt:

jeder einzelne Pixel lässt sich bearbeiten

jeder einzelne Pixel lässt sich bearbeiten

EignungEignung


Konstruktions-zeichnungenKonstruktions-zeichnungen

Schriften (True Types)Schriften (True Types)

FotosFotos

NachbearbeitungNachbearbeitung

Clip - ArtsClip - Arts

StadtpläneStadtpläne

MalenMalen

für:für: für:für:

ZusammenfassungZusammenfassung

Zeichen- u. Konstruktions-programme

Zeichen- u. Konstruktions-programme

Mal- u. Foto-programme

Mal- u. Foto-programme

Vektorprogramme Vektorprogramme

Pixelprogramme Pixelprogramme

VektorgrafikprogrammeVektorgrafikprogrammePixelgrafikprogrammePixelgrafikprogramme

Von Bits und Bytes :Speicherung von Informationen

Von Bits und Bytes :Speicherung von Informationen

Speicherung von Informationen Speicherung von Informationen

Für jede Information wird im Speicher des Computers Speicherplatz reserviert.Es gibt nur zwei Möglichkeiten. Entweder der Stromkreis wird geschlossen oder nicht:

an oder aus ja odernein 0 oder 1

Folglich ist das binäre Zahlensystem zum Speichern von Informationen am besten geeignet: Es gibt also nur 2 Ziffern: 0 und 1 (Vergleich: Beim dezimalen Zahlensystem sind es 10 Ziffern: 0, 1, 2, ...9.)Alle Zahlen des Dezimalsystems lassen sich auch im binären Zahlensystem darstellen.

Die kleinste Speichereinheit nennt man 1 Bit:

1 Bit = 21

01

2 Zustände (einstellig)bzw. 2 MöglichkeitenInformationen zuspeichern

2 Bit = 22

00011011

4 Zustände(zweistellig)


16 Zustände


0000 00001 10010 20011 30100 40101 50110 60111 71000 81001 91010 101011 111100 121101 131110 141111 15

binär dez.

4 Bit = 24

8 Bit = 28

256 Zustände


0000 0000 00000 0001 10000 0010 20000 0011 30000 1000 4 ............ .... 1111 1010 2501111 1011 2511111 1100 2521111 1101 2531111 1110 2541111 1111 255

binär dez.

8 Bit = 1 Byte

Das Wort „Byte“ setzt sich zusammen aus den Wörtern „Bit“ und „eight“ (engl.: 8).

1 Bit = 21

2 Zustände:schwarz u.

weiß

2 Bit = 22

4 Zustände; also 4 Farben

4 Bit = 24

16 Farben

Speicherplatz pro Pixel in einem Bild: Speicherplatz pro Pixel in einem Bild:

1 Bit 2 Bit

4 Bit

Beispiele:

16 Farben=4 Bit

256 Farben=8 Bit 16 Mio. Farben= 24 Bit

16 Mio. Farben= 24 Bit

jpg

Eine hohe Bildqualität beinhaltet:

1. möglichst viele Farben pro Pixel und

2. möglichst kleine Pixel, also viele Pixel pro Bild

das bedeutet: das bedeutet:

Mit 8 Bit = 256 Farben lassen sich keine fotorealistischen Bilder aufbauen (Gif als Format ist demnach für Fotos ungeeignet.)

man benötigt mindestens: 16 Bit = 65 Tausend Farben besser:24 Bit = 16 Millionen Farben oder:32 Bit = 4,3 Milliarden Farben

GrafikformateGrafikformate - Farbtiefe - Farbtiefe

Farbübergänge

2 Farben

16 Farben

256 Farben

16.7 Millionen Farben

(4 Bit)

(1 Bit)

(8 Bit)

(24 Bit)

Farbtiefe Farbtiefe

Die Anzahl der Bits pro Bildpunkt (Pixel) bezeichnet man als

Farbtiefe

Die Farbtiefe von 24 Bit wird auch True Color (24-Bit) genannt. In der Systemsteuerung lässt sie sich für den Monitor einstellen.

Die Anzahl der Bildpunkte pro Zoll nennt man Auflösung

Sie wird unterschiedlich angegeben:

dpi = dots per inch (Drucker) ppi = pixel per inch (Bildschirm)manchmal auch als:lpi = line per inch

Auflösung Auflösung

1. Beispiel:

Ein 17 Zoll Monitor mit einer Einstellung von 1024 x 768 Pixel

hat in der Breite also 1024 und in der Höhe 768 Pixel

Mein Monitor hat eine tatsächliche Bildbreite von 32 cm

2,54 cm = 1 inch 32 cm = 12,6 inch

Rechenbeispiel Rechenbeispiel

Die Auflösung von meinem Bildschirm beträgt dann:

1024 / 12,6 = 81 dpi

2. Beispiel:Ein Bild hat eine Größe 32 x 24 cm und eine Auflösung 600 dpi

Bei einer Farbtiefe von 24 Bit (= 16 Mio. Farben pro Pixel )sind in dem Bild insgesamt:

43 Mio. x 16 Mio. = 6,88 · 1014 Farbinformationen gespeichert.

Größe der Dateien: 20 MB und mehr

Breite: 32 cm = 12,6 inch12,6 inch x 600 pixel/inch 7560 Pixel

1 inch 600 Pixel

Höhe: 24 cm = 9,4 inch9,4 inch x 600 pixel/inch 5640 Pixel

Das sind insgesamt:7560 x 5640 = 42,64 Mio. Pixel

Rechenbeispiel Rechenbeispiel

Um ein qualitativ gutes Bild darzustellen, benötigt man eine hohe Farbtiefe und eine hohe Auflösung

ZusammenfassungZusammenfassung

...und das kostet Speicherplatz...und das kostet Speicherplatz

folglich:riesige Mengen an Grafikinformationen

.gif

.tif

.jpg.png.bmp

Hohe Farbtiefe und hohe Auflösung

Ø hoher Speicherplatzbedarf

Ø hohe Qualität

Methode: DatenkomprimierungØ ohne wesentlichen Informationsverlust

die Art der Komprimierung ist abhängig vom Grafikformat

GrafikformateGrafikformate

Ø allerdings mit QualitätseinbußenØ dieser Vorgang ist irreversibel

Windows-BitmapWindows-Bitmap

Beim Abspeichern von Bilddateien lassen sich die verschiedenen Grafikformate auswählen:

Ø Grafikformate erkennt man an der Erweiterung des Dateinamens

Krokus.bmp Windows Bitmap - Datei

Beim Abspeichern von Bilddateien lassen sich die verschiedenen Grafikformate auswählen

jedoch bei *.bmp - Dateien:

Ø keine Datenkompression

Ø jeder Bildpunkt wird abgespeichert

Ø beste Bildqualität

Windows Bitmap - Datei

Windows-BitmapWindows-Bitmap

Ø jedoch hoher Speicherplatzbedarf

Krokus.bmp

Ø Grafikformate erkennt man an der Erweiterung des Dateinamens

Beispiel:Beispiel:Krokus.bmpKrokus.bmp

3.601 KB3.601 KB

Die wichtigsten Grafikformate:*.bmp = Windows Bitmap

*.jpg (jpeg) = Joint Photographics Experts Group

*.tif (tiff)= Tagged Image File Format


*.gif = Graphics Interchange Format*.png = Portable Network Graphics

Krokus.bmpKrokus.bmp

3.601 KB3.601 KBKrokus.jpgKrokus.jpg

16 KB16 KB

Krokus.jpg16 KB

Krokus.jpg16 KB

Krokus.jpg50 KB

Krokus.jpg50 KB

Krokus.jpg106 KB

Krokus.jpg106 KB

Krokus.bmp3601 KB

Krokus.bmp3601 KBstark vergrößert

Krokus.jpg106 KB

Krokus.jpg106 KBstark vergrößert

KomprimierungKomprimierung

BMPBMP GIFGIF JPGJPGTIFTIF

nicht möglich

nicht möglich

ja oder nein

ja oder nein

jaGrad nicht

wählbar

jaGrad nicht

wählbar

frei wählbar

frei wählbar


---------- relativ hoch

relativ hoch

vom Bild abhängig

(bzw. Anzahl

der Farben)

vom Bild abhängig

(bzw. Anzahl

der Farben)

niedrig bis hochniedrig

bis hoch

KomprimierungsgradKomprimierungsgrad


keinerkeiner keiner keiner Ja, je nach

Kom-primierun

g

Ja, je nach Kom-

primierung

InformationsverlustInformationsverlust

----------

FarbtiefeFarbtiefe


32 Bit32 Bit 8 Bit 8 Bit 24 Bit 24 Bit

VerwendungVerwendung


Für Linien und Motive mit klaren Konturen und wenig Farben

1 Trans-parenzfarbe(Alphakanal)

Für Linien und Motive mit klaren Konturen und wenig Farben

1 Trans-parenzfarbe(Alphakanal)

Fotos u. Illustrationen in Echtfarbennicht: für Zeichnungen u. Schriftzüge mit starken Kontrasten

Fotos u. Illustrationen in Echtfarbennicht: für Zeichnungen u. Schriftzüge mit starken Kontrasten

Desktop(Hinter-grundbilder)Fotos u. Illustrationen

Desktop(Hinter-grundbilder)Fotos u. Illustrationen

Fotos u. Illustrationen in Echtfarben

Fotos u. Illustrationen in Echtfarben

WEB - SeitenWEB - Seiten


nicht geeigne

t

nicht geeigne

t

nicht geeigne

t

nicht geeigne

t

geeignet:

geringe Datei-größe

geeignet:


geeignet:


geeignet:



alle Bilderhoch, verlustfreiMaximal 16 MioPNG

Fotos und Bilder mit weichen Farbverläufen,

WWW

hoch, mehr oder weniger verlustbehaftet

Maximal 16 MioJPEG

Text als Grafik, Strich-zeichnungen, WWW

gering, verlustfreiMaximal 256GIF

gescannte BildergeringMaximal 16 MioTIFF

Windows Bilderkeine2,6,256,16 MioBMP

AnwendungKompressionAnzahl FarbenFormat

Quellen

• http://www.ihreexperten.de/uploads/media/Bildbearbeitung.pdf

• Bildbearbeitung.ppt von Gisela König• http://www.swisseduc.ch/informatik/vortraege/gra

fikformate/ (Markus Braendle: folien.ppt)

• http://www.swisseduc.ch/informatik/material/grafikformate/docs/vortrag_bildformate.ppt (Beat Döbeli Honegger)

http://www.ihreexperten.de/uploads/media/Bildbearbeitung.pdf

http://www.ihreexperten.de/uploads/media/Bildbearbeitung.pdf

http://www.swisseduc.ch/informatik/vortraege/grafikformate/

http://www.swisseduc.ch/informatik/vortraege/grafikformate/

http://www.swisseduc.ch/informatik/material/grafikformate/docs/vortrag_bildformate.ppt

http://www.swisseduc.ch/informatik/material/grafikformate/docs/vortrag_bildformate.ppt

Documents

Original 400 fache Vergrößerung 1600 fache Vergrößerung