Lernziele

Hinweis: Wir behandeln keine Umwandlungen, die grösser als zwei Byte oder 65’535₁₀ sind.

• Sie können die unkomprimierte Datenmenge für ein RGB-Bild mit einer gewissen Auflösung und Farbtiefe berechnen.
• Sie wissen, wie sich die Berechnung verändert, wenn es ein Graustufen-Bild wäre, oder wenn ein Alpha-Kanal hinzugefügt würde.
• Sie können die Prinzipien einer Rastergrafik und einer Vektorgrafik voneinander unterscheiden.
• Sie verstehen die Begriffe Pfadpunkt und Handler bei Bézier-Kurven in Vektorgrafik-Programmen.

Diskutieren Sie

Ich habe Ihnen die gleiche Idee interaktiv programmiert. Als Originalbild (rechts) sehen Sie hier ein RGB-Bild mit 64 x 64 Pixeln und 2 Bit Farbtiefe. Sie können mit den Reglern die Auflösung (damit meint man die Breite und Höhe) sowie die Farbtiefe verändern. Zudem sehen Sie eine 3D-Visualisierung des Datenquaders. Spielen Sie mit den Reglern, um ein Gefühl für die Effekte der Regler zu erhalten.

Überlegen Sie sich folgende Fragen:

1. Welche Regler machen das Bild schärfer?
2. Welcher Regler gibt Ihnen mehr Farben?
3. Was passiert mit der Datenmenge, wenn Sie ein qualitativ hochwertiges Bild wollen?
4. Was verkörpert die Datenmenge, die nötig ist, um das Bild zu speichern?
5. Wie könnten Sie diese Datenmenge berechnen?

Lösung zu den Fragen

1. Die Pixelanzahl für die Breite und Höhe. Das nennt man zusammengefasst die Auflösung des Bildes.
2. Die Farbtiefe.
3. Das Datenquader wird grösser, also erhöht sich die Datenmenge.
4. Das Volumen des Quaders ist die Datenmenge.
5. Grundsätzlich:
   $Breite \times \text{H\"ohe} \times Tiefe$
   In unserem Fall also:
   $Pixelbreite \times \text{Pixelh\"ohe} \times ( \text{Farbtiefe pro Kanal} \times \text{Anzahl Farbkan\"ale} )$
   Oder:
   $Pixelbreite \times \text{Pixelh\"ohe} \times ( \text{Farbtiefe insgesamt} )$
   Dass es keine Verwechslung gibt, präzisiert man die Farbtiefe teils mit “bits per channel” (bpc) oder “bits per pixel” (bpp). 8 bpc sind bei RGB 24 bpp.

Diskutieren Sie

Nun haben Sie das Rüstzeug, um sich folgende Fragen zu überlegen:

1. Sie finden zwei Versionen eines Videos: Einmal in FullHD und 4 Bit Farbtiefe, und einmal in 4K mit 8 Bit Farbtiefe (recherchieren Sie die Begriffe selbst). Wie viel länger wird der Download gehen?
2. Sie kaufen eine professionelle Kamera mit 24 Megapixeln und 12 Bit Farbtiefe pro Farbkanal. Zudem hat die Kamera eine Funktion, um die Bilder “roh” unkomprimiert zu speichern. Wie viel Speicher bräuchte so das grösst mögliche Bild (in Megabyte)?
3. Wie viel mehr Farben kann die Kamera mit 12 Bit Farbtiefe mischen im Vergleich zu den weitverbreiteten Formaten mit 8 Bit Farbtiefe?
4. Wie würde sich die Datenmenge verändern, wenn Sie keine Farben hätten sondern nur Graustufen?

Lösung zu den Fragen

1. FullHD (oder “1080p” genannt) ist 1920x1080 Pixel. 4K

   ist 3840x2160 Pixel.
   
   4K ist also eine viermal grössere Fläche als FullHD. Wenn Sie nun auch noch eine doppelt so grosse Farbtiefe haben, haben Sie also

   achtmal mehr Daten, die Sie herunterladen müssen. (Stellen Sie sich das als Datenquader vor!)
2. Rechnen wir von Beginn an in Byte, das ist einfacher. Pro Farbkanal und Pixel haben wir 12 Bit, also 1,5 Byte pro Farbe und Pixel. Mit drei Farben sind das 4,5 Byte pro Pixel. Zudem haben wir 24 Megapixel - also 24 Millionen Pixel!
   $4,5 \text{ Byte} \times 24 \text{ Megapixel}$
   Das macht 108 Megabyte für ein Bild!
3. Erinnern Sie sich an die Formel für die Anzahl Mischfarben bei 8 Bit Farbtiefe. Wir müssen nun die Anzahl Farben der Kamera und die Farben bei 8 Bit ins Verhältnis setzen:

$$\frac{(2^{12})^3}{(2^8)^3} = \frac{2^{36}}{2^{24}} = 2^{36-24} = 2^{12} = 4096$$

Das bedeutet: Die 12-Bit-Kamera kann 4096-mal mehr Farben mischen als ein normaler Computer! Anstatt “nur” 16,8 Millionen Farben haben Sie 68,7 Milliarden Farben.
6. Ein Bild aus Graustufen hat einfach einen Kanal anstatt drei Kanäle pro Farbe. Das heisst: Die unkomprimierte Datenmenge ist ein Drittel der Datenmenge von RGB.

Editieren Sie eine SVG-Grafik

Gehen Sie zu svgviewer.dev . Dort sehen Sie standardmässig dieses Logo, das vom SVG-Code links kreiert wird.

Versuchen Sie folgende Veränderungen selbst vorzunehmen.

1. Vergrössern Sie den Kreis.
2. Geben Sie dem Kreis ein passendes Gelb oder Hellorange.
3. Verschieben Sie den Kreis weiter rechts.
4. Fügen Sie einen zweiten, grünen Kreis hinzu.
5. Machen Sie das gerundete Quadrat im Hintergrund blau.
6. Können Sie sich einen Sinn darauf reimen, wie die Form des weissen, gerundeten Dreiecks gespeichert ist?

Installieren Sie das Open-Source-Programm Inkscape .
7. Speichern Sie sich Ihr SVG von svgviewer.dev als normale Textdatei.
8. Ändern Sie die Dateiendung auf .svg.
9. Öffnen Sie die svg-Datei in Inkscape. Jetzt können Sie die Vektorgrafik visuell bearbeiten!
10. Nochmal: Wie wird die Form des gerundeten Quadrats gespeichert?

Diskutieren Sie

Was sind wohl die Vor- und Nachteile der beiden Grafiktypen? Hier einige Bilder als Inspiration:

Mögliche Gedanken zur Diskussion

Auflösung

Einer der Hauptunterschiede zwischen Raster- und Vektordateien ist deren Auflösung. Die Auflösung einer Rasterdatei wird in DPI (dots per inch) oder PPI (pixels per inch) angegeben. Wenn man in eine Rastergrafik hineinzoomt oder ihre Grösse vergrössert, beginnt man, die einzelnen Pixel zu erkennen.

Rasterdateien nutzen meist mehr Farben, ermöglichen eine umfangreichere Farbbearbeitung und zeigen feinere Licht- und Schatteneffekte als Vektoren – verlieren jedoch an Bildqualität, wenn sie in der Grösse verändert werden. Ein einfacher Weg, um festzustellen, ob ein Bild eine Raster- oder Vektorgrafik ist, besteht darin, es zu vergrössern. Wenn das Bild unscharf oder pixelig wird, handelt es sich wahrscheinlich um eine Rasterdatei.

Für Vektorbilder ist die Auflösung kein Problem. Man kann Vektoren unendlich skalieren, umformen und anpassen, ohne an Bildqualität zu verlieren. Vektordateien sind beliebt für Bilder, die in einer Vielzahl von Grössen erscheinen müssen, wie z.B. ein Logo, das sowohl auf einer Visitenkarte als auch auf einem Plakat passen muss.

Verwendungszwecke

Digitale Fotos sind Rasterdateien. Viele Digitalkameras schiessen automatisch Fotos und speichern sie als Rasterdateien – und die Bilder, die man online sieht, sind oft auch Rastergrafiken. Rasterdateien werden auch häufig für die Bearbeitung von Bildern, Fotos und Grafiken verwendet.

Vektordateien eignen sich besser für digitale Illustrationen, komplexe Grafiken und Logos. Das liegt daran, dass die Auflösung von Vektoren beim Skalieren gleich bleibt, was sie für eine Vielzahl von Druckformaten geeignet macht. Das Vektorformat SVG ist ein etablierter Web-Standard und wird auf Webseiten oft gebraucht, um kleine Symbole zu animieren (z.B. der Play-Knopf auf Youtube).

Manche Dateitypen können sowohl Raster- als auch Vektorbilder kombinieren - allen voran PDFs und Word-Dateien. Zum Beispiel könnte eine Broschüre Vektorgrafiken für das Firmenlogo und den Text verwenden, aber Rasterdateien für die Fotografie.

Dateigrössen

Rasterdateien sind im Allgemeinen grösser als Vektordateien. Sie können Millionen von Pixeln und unglaublich hohe Detailstufen enthalten. Ihre Grösse kann den Speicherplatz von Geräten beeinträchtigen und das Laden von Seiten im Web verlangsamen. Allerdings kann man Rasterdateien komprimieren, um sie für die Speicherung und Web-Optimierung zu optimieren, oder um das Teilen schneller und einfacher zu machen.

Vektordateien brauchen weniger Speicherplatz als Rasterdateien und enthalten nur die mathematischen Formeln, die das Design bestimmen.

Kompatibilität und Konvertierung

Rasterdateien können in vielen verschiedenen Apps und Webbrowsern geöffnet werden, was sie leicht zu betrachten, bearbeiten und teilen macht. Bis auf SVG sind viele andere Vektordateien nicht so zugänglich. PDF, AI, oder EPS erfordern spezialisierte Software, um die Dateien zu öffnen und zu bearbeiten.

Datei- und Erweiterungstypen

Die verwendete Software bestimmt in der Regel den Dateityp, ob Raster oder Vektor. Es gibt mehrere Typen und Erweiterungen von sowohl Raster- als auch Vektordateien, jede mit ihren eigenen Merkmalen.

Dateityp	Format	Verwendung	Besonderheiten
Raster	JPEG	Fotos, Web	Hohe Kompression, Verlust an Bildqualität
Raster	PNG	Web, Transparenz	Unterstützt Transparenz, verlustfreie Kompression
Raster	GIF	Animationen, Web	Einfache Animationen, begrenzte Farbpalette
Raster	BMP	Unkomprimierte Bilder	Keine Kompression, grosse Dateigrösse
Raster	WebP	Web, fortschrittliche Nutzung	Moderne Bildformat, unterstützt sowohl Verlust- als auch verlustfreie Kompression sowie Animationen
Vektor	SVG	Web, Druck	Skalierbar ohne Qualitätsverlust, Webstandard
Vektor	AI	Grafikdesign	Adobe Illustrator Format, vielseitige Bearbeitungsoptionen
Vektor	EPS	Druck, Design	Weit verbreitet für Druckgrafiken, kompatibel mit vielen Programmen
Vektor	PDF	Universelle Dokumente	Hauptsächlich vektorbasiert, kann aber auch Rastergrafiken enthalten

Zusammenfassung

Theorie: Zwei grundlegende Grafikformate

Rastergrafiken

Die kleinste Einheit einer Rastergrafik ist ein Pixel, also ein einzelner kleiner Punkt, meist quadratisch, mit einer Farbe. Pixel wird oft mit “px” abgekürzt.

Wir haben uns die Datenmenge eines Bildes überlegt. Die gesamte zu speichernde Information ist:
$\text{Anzahl Pixel} \times \text{Farbinformation pro Pixel}$
Wir haben uns die Datenmenge als Quader vorgestellt und für die Farbinformation pro Pixel den Begriff der Farbtiefe benutzt.
$Pixelbreite \times \text{Pixelh\"ohe} \times ( \text{Farbtiefe pro Kanal} \times \text{Anzahl Farbkan\"ale} )$

Aufgepasst: Die Farbtiefe wird teils pro Farbkanal und teils pro Pixel angegeben – das ist ein grosser Unterschied! Gang und gäbe ist z.B. eine Farbtiefe von 8-Bit pro Farbkanal. Ein RGB-Bild hat drei Farben, also ist die entsprechende Farbtiefe pro Pixel 24-Bit.

Gängige Formate für Rastergrafiken sind jpg, png, webp, gif. In der Praxis komprimieren all diese Formate die Datenmenge mit verschiedenen Algorithmen.

Vektorgrafiken

Vektorgrafiken werden mit geometrischen Formen beschrieben: z.B. Kurven, Kreise, Linien, etc. Ihre kleinste Einheit ist also eine Figur – Pixel haben sie nicht.

Vektorgrafiken lassen sich ohne Qualitätsverlust vergrössern. PDFs bestehen hauptsächlich aus Vektorgrafiken. Typische Beispiele sind Schriftarten, Logos und Grafiken mit scharfen Linien.

Das verbreitetste Grafikformat für Vektoren ist SVG, das Teil der modernen Webstandards ist und sich nahtlos in Webseiten integriert. Als solche können SVG-Elemente direkt animiert werden – wie z.B. der Play-Button bei Youtube.

Neben solch einfachen Formen wie Kreisen und Rechtecken, können Sie mit Vektorgrafiken Pfade aus einer Serie von Bézier-Kurven ausdrücken. In Vektorgrafik-Programmen wird jeder Pfadpunkt mit bis zu zwei Handles dargestellt.