Rasterbilder können man sich als eine Reihe von Pixel-für-Pixel-Anweisungen zum Rendern eines zweidimensionalen Rasters vorstellen. Gängige Rasterbildformate sind GIF (.gif), JPEG (.jpg), PNG (.png) und WebP (.webp). Die Art und Weise, wie jedes Bildformat diese Anweisungen komprimiert und codiert, ist unterschiedlich, was zu großen Unterschieden zwischen den Dateigrößen führt: Ein als JPEG codiertes Foto kann nur ein paar Hundert Kilobyte groß sein, während dasselbe als PNG codiertes Bild mehrere Megabyte groß sein kann, ohne dass der Endnutzer einen erkennbaren Qualitätsunterschied hat.
Eine Rasterbildquelle, die über die inhärenten Abmessungen hinaus skaliert wird, wird verzerrt, blockig oder unkenntlich gemacht:
Für Kunstwerke mit realem Detailgrad sind Rasterbilder die richtige Wahl.
Genau wie bei Raster- und Vektorbildern hängt die Auswahl der passenden Art von Rasterbild letztendlich vom jeweiligen Anwendungsfall ab. Wenn wir Rasterbilder in ihre Codierungen herunterbrechen, geht es um die Methoden zur Beschreibung der Inhalte und die (oder fehlende) Komprimierungsmethoden. Denken Sie daran, dass ein Server kein Bild über die Verbindung an einen Browser sendet, sondern einen Stream von Byte, die das Pixelraster, aus dem dieses Bild besteht, für den Client beschreibt.
Um den Prozess der Codierung eines Pixelrasters als Bytestream-Daten besser zu visualisieren, sollten Sie sich vorstellen, dass Sie als Webbrowser agieren. Sie haben ein Blatt Millimeter-Millimeterpapier und eine bestimmte Packung Buntstifte für Marken. Ich als Webserver habe genau die gleichen Dinge, aber ich habe meine Buntstifte bereits verwendet, um das Millimeterpapier mit einem Quellbild zu füllen. Wenn ich Ihnen eine einfache Textnachricht schicken würde, könnte ich Ihnen das Bild selbst nicht senden, aber ich könnte Informationen über eine Bildquelle in einer Sprache vermitteln, die wir beide verstehen, und zwar mit unserem gemeinsamen Standard für unser Pixelraster und die Farben:
Beginnen Sie oben links. Zeile 1 und Spalte 1 sind blau. Zeile 1, Spalte 2 ist blau. Zeile 1 und Spalte 3 sind blau. Zeile eins, Spalte vier ist rot.
Mit diesen Textinformationen könnten Sie das Bild auf meinem Millimeterpapier perfekt nachbilden.
Unterschiede zwischen den Bildformaten und der Art und Weise, wie sie als Daten codiert werden, kann man sich als die Formatierung dieser Informationen vorstellen. Zum Beispiel könnten die Informationen, die ich Ihnen gesendet habe, genauso einfach formuliert sein wie:
Beginnen Sie oben links. Zeilen 1, Spalten 1 bis 3 sind blau. Zeile eins, Spalte vier ist rot.
Jede dieser Beschreibungen führt zum selben Bild, aber die zweite schafft es, dasselbe Bild mit weniger Zeichen zu beschreiben. Dies ist eine verlustfreie Komprimierung von Bilddaten: Sie erhalten dieselben Informationen – und damit auch keine Reduzierung der visuellen Genauigkeit –, aber weniger Byte, die über die Verbindung von mir an Sie übertragen werden, vom Server zum Rendering-Modul. Dies ist das reine Sprachäquivalent der „run-length-Codierung“ für Bilddaten, bei der die Daten als zu wiederholender Wert und als Anzahl codiert werden, anstatt den vollständigen Wert mehrmals zu wiederholen.
Die umgekehrte verlustbehaftete Komprimierung klingt im Hinblick auf den Nenn gar nicht erst. Warum sollten Ihre Bilder jemals schlechter aussehen? Das ist jedoch nicht ganz der Fall und wir sollten bedenken, dass unsere Augen auch keine perfekte Bildtreue haben. Die Auswahl des richtigen Formats und der Einstellungen für die Bildkomprimierung ist eine Übung, um das Gleichgewicht zwischen dem Grad der visuellen Details, den wir wahrnehmen können, und der Datenmenge, die an den Browser gesendet wird, zu finden. Beide Faktoren werden durch den Inhalt unseres Quellbilds bestimmt.
Die Rasterbildformate sind die Formate, mit denen Sie als Entwickler wahrscheinlich am besten vertraut sind: GIF, JPEG, PNG, WebP und mehr. In den nächsten Modulen erfahren Sie mehr über die einzelnen Funktionen.