Farbmodelle

Was heißt RGB? Was sind Pixel?

Bildformate

Das Format eines Bildes ist grundlegend für die Größe einer Webseite. Je größer ein Bild, desto länger braucht eine Webseite zum Laden. Um ein Bild fürs Web aufzubereiten, müsst ihr folgendes  beachten:

  • das Bild sollte im RGB-Modus abgespeichert sein und
  • die Bildgröße in Pixel angegeben werden.

Was bedeutet das? Das Erstellen einer Internetseite ist eine Gestaltung auf dem Computer für andere Computer oder Geräte, genauer gesagt von Monitor zu Monitor. Deshalb sollte man schon beim Einscannen von Bildern die für den Monitor spezifischen Einstellungen übernehmen.

Quelle: Amelie W.

RGB

Beim RGB-Farbmodell, das für die Darstellung am Computer genutzt wird, werden die Farben additiv miteinander vermischt, d.h. farbiges (aus sich leuchtendes) Licht wird miteinander gemischt und ergibt in seiner Überlagerung Weiß. Die Grundfarben dieses Modells sind Rot-Blau-Grün, aus denen sich auch die Monitor-Pixel zusammensetzen.

Quelle: Amelie W.

CMYK

Im Gegensatz dazu steht das Farbmodell CMYK (Cyan - Magenta - Yellow - Key Color / Schwarz), das für den Druck vorgesehen ist und in seiner Mischung subtraktiv funktioniert. Das heißt: die Farb(-schichten) auf dem Papier absorbieren filterartig Lichtwellen. Für das Auge sind dann nur noch die restlichen - nicht gefilterten - Farblichtwellen zu sehen. Die Grundfarben in diesem Farbsystem ergeben in ihrer Überlagerung schwarz.

Quelle: Amelie W.

Bildgröße in Pixel

Der Bildschirm, wie auch die Darstellung auf dem Monitor, wird nicht in Zentimetern bemessen, sondern in Pixel. Wie viele Pixel oder besser gesagt, wie weit man mit der Bildgröße in der Darstellung gehen kann, hängt von der Auflösung des Monitors ab. Bei der Gestaltung für das Internet kann von einer Bildschirmauflösung von 1366 x 768 Pixel ausgegangen werden- dies gilt derzeit als die bei den PC-NutzerInnen am weitesten verbreitete Monitorauflösung.
Mit dieser Zahl habt ihr eine ungefähre Vorstellung, wie groß ein Bild ungefähr sein sollte, um im Internet wenig Datenvolumen zu beanspruchen und trotzdem mit guter Qualität angezeigt zu werden. Natürlich solltet ihr bedenken, wie viel Platz ein Bild auf eurer Webseite einnehmen soll. Wenn ein Bild sich zum Beispiel über die Hälfte des Bildschirms erstreckt, hat es demnach einen Platz von 638 x 384 Pixeln.

Generell variieren Bildschirmauflösungen allerdings, besonders wenn man auch Handys und Tablets berücksichtigen will. Wenn Ihr mit Blogging-Plattformen wie Tumblr oder WordPress arbeitet, solltet Ihr darauf achten, dass ihr Themes mit einem sogenannten „Responsiven Design“ benutzt. Das bedeutet, dass euer Blog sich dem Format des Displays, mit dem es angezeigt wird, anpasst und dadurch zum Beispiel auch auf Smartphones übersichtlich bleibt.

Bilddateien in  HTML-Quellcode einsetzen

Wenn ihr die Bilddateien in den HTML-Quellcode einsetzt, solltet ihr die Originalwerte der Bildgröße angeben. Verkleinert es nicht über den Quellcode, da sonst eine unnötig große Bilddatei abgelegt wird.

Um eine Webseite zu optimieren, muss die Bilddatei auch komprimiert werden. Das bedeutet, das Bild wird auf ein Optimum verdichtet, so dass es möglichst klein in seinem Datenumfang wird. Hierbei gibt es unterschiedliche Techniken, die von der Speichereinstellung abhängen.

Weiter geht´s mit

Autorin / Autor: Peggy Förster / Rosi Stolz / Amelie W. - Stand: Aktualisiert. August 2016