Was zeichnet ein gutes Bild, dass in Online-Medien, bzw. auf einer Webseite verwendet wird, aus?

Nun, es sollte sicherlich erstmal inhaltlich passen zu dem was da so geschrieben steht. Bei Bildern, die ohne eine Erklärung auf einer Webseite stehen, ergibt sich daraus eine andere Darstellungsweise: das Vollbild.

Bilder, die zusammen mit ein paar Zeilen erklärendem Text auf einer Seite stehen, sollten entsprechend kleiner (ca. 1/3, bzw. 1/2 vom zur Verfügung stehenden horizontalen Platz) sein - je nach Motiv (und verwendeter Schriftgröße).

Also, ähnlich wie hier oben befindet sich das Bild links neben dem Text und macht 1/3 der Seitenbreite aus. Die Herausforderung entsteht dann, wenn eine Seite auch von mobilen Geräten betrachtet werden soll. In so einem Fall wird auf Grund des wenigen Platzes auf einem mobilen Endgerät immer Bild und Text abwechselnd dargestellt. Eine Ansicht bei z.B. 414px (entspr. der horizontalen Auflösung eines Apple iPhone 8) oder weniger, eine nochmalige Unterteilung vorzunehmen, erzeugt Bilder, die kleiner als eine Briefmarke sind. Außer einem kleinen Logo empfielt es sich hier kein Bild mit entsprechend hohen Details zu verwenden.

Übrigens die Einheit px bedeutet "Pixel". Das ist der kleinste darstellbare Punkt in einem Bild, bzw. das kleinstes Element bei der gerasterten, digitalisierten Darstellung eines Bildes.
Bei 414px bedeutet dies, das 414 dieser Bildpunkte horizontal in einer Reihe dargestellt werden können.

Macht euch Gedanken über die Zielgruppe. Wenn eine Webseite im Responsive Webdesign programmiert wurde, entscheidet die Software selbstständig wann ein Text umgebrochen wird, bzw. ob das Bild entsprechend der genutzten Bildschirmauflösung neben dem Text oder beide untereinander dargestellt werden. Tipps zum Responsive Webdesign findet ihr auf dieser Webseite unter Design -› Webdesign.

Nehmen wir Facebook - als ein typisches Online-Medium - in dem unzählige Bilder dargestellt werden. Diese sind sehr unterschiedlich. Teils sind es Strichgrafiken, teils einfach nur Fotos aus dem alltäglichen Leben und teils beides - also Bilder die kurze Texte im Bild selbst enthalten. Dabei regelt Facebook die Größe und Art der Darstellung selbst. Facebook nutzt in eigenen Apps sogar voreingestellte horizontale Auflösungen, die ich als User nicht beeinflussen kann.

2. Die Dateigröße

Wie groß darf ein Bild auf einer Webseite denn sein?
Mit dieser Frage ist nicht unbedingt die Darstellungsgröße eines Bildes gemeint, sondern seine Dateigröße. Die Darstellungsgröße wurde im vorherigen Kapitel angesprochen.

Kleiner Exkurs: Übertragungsraten eines Modems, bzw. Routers.
Früher gab es, bedingt durch langsamere Modems, die Maßgabe bei der Startseite einer Webseite inkl. Text, Bild und Steuerzeichen (HTML) möglichst unter 100-150kb zu bleiben. Eine Startseite sollte, damit sie schnell geladen wird, möglichst klein sein. Wenn ein Besucher erstmal auf einer Webseite ist, so hieß es, nimmt er Wartezeiten von nachfolgenden Seiten eher in Kauf, als wenn er länger warten muss bevor er den Inhalt einer Webseite überhaupt das erste mal sieht.
Mittlerweile reden wir aber nicht mehr von langsamen Modems mit 9600Baud, sondern von Hochgeschwindigkeitszugängen, jenseits der 10-100Mbits (Megabits).

Zum Vergleich: es gab (und gibt) immer noch ISDN. Hier liegt die Übertragungsrate bei 64 kbit. In Amerika liegt die Übertragungsrate von ISDN sogar nur bei 56kBit.

Vor dem Hintergrund, dass 1024kbit = 1Mbit entspricht, liegen wir mit dem heutigen LTE-Übertragungsstandard im angestrebten 5GHz-Bereich ziemlich weit vorn, bzw. um es auf unser Thema zu übertragen: wir brauchen uns um kleine Größen der entsprechenden Startdatei (i.d.R. index.html) nicht mehr so viel Sorgen zu machen.
Das nutzen die Anbieter der Webseiten schon seit längerem aus und integrieren sogar Hintergrundvideos auf ihren Startseiten. Trotzdem bleibt die Regel eine Startseite entsprechend zu begrenzen, damit die Erreichbarkeit hoch bleibt immer noch bestehen.

Innerhalb Deutschlands mit schnellem LTE-Netz wird deswegen eine Webseite schnell angezeigt. Will man aber auch dem "entfernten" Ausland entsprechende Inhalte anbieten, sieht's da schon wieder anders aus. Auch hier weicht der amerikanische 5G-Standard wieder vom europäischen Standard ab - mal ganz zu schweigen vom asiatischen oder russischem Kontinent.

Wie bekommt man Bilder also scharf ins Web, ohne dass sie übertriebene Dateigrößen haben?
Ich nutze bei Bildern im Web immer eine Auflösung von 72dpi. Auf fast allen Systemen, wie Desktop PC's, Laptops, Tablet, PCS, iPad, etc. sind so keinerlei Qualitätseinbußen feststellbar. Allerdings - und jetzt kommt wieder das was sich hier in Kapitel 1. befindet - ist das abhängig von der anzuzeigenden Bildgröße. Kann ich also ein Bild, welches als Vorschaubild gedacht ist anklicken, um anschließend das Bild bildschirmfüllend zu sehen muss, ich dabei die Bildgröße entsprechend anpassen.

Zusammen mit der Einstellung der Auflösung des Bildes wird mir das mit einem Handy nicht unbedingt gut gelingen.
In einem Punkt habe ich es leicht, da die 72dpi i.d.R. auch von den Smartphones genutzt werden. Bleibt jetzt nur die Bildgröße. Die neuen Pixelprotzenden Smartphones haben gigantische Bildgrößen. Deswegen empfielt es sich hier auch, Modelle mit entprechendem Speicher zu kaufen. Der Grund für Speicherknappheit auf Smartphones sind Videos und Bilder - also erste Empfehlung:
räumt euer Smartphone auf :-)  !

Ich empfehle für das Einstellen der Bildgröße ein Bildverarbeitungsprogramm für euren PC oder Mac. Mittlerweile gibt es auch viele günstigere Alternativen als den Adobe Photoshop, wenn es nur darum geht, die Bildgröße anzupassen. Dazu gehört für den Mac sicherlich "Gimp", für den PC "ACD-See", o.ä.

Was ist denn die richtige Bildgröße?
Ein Laptop verwendet beispielsweise eine horizontale Bildschirmauflösung von 1024px bis 1920px. Dabei hat er i.d.R. eine Bildschirmdiagonale von 15-17 Zoll. Desktop PC's können da mit ihren 17-27 Zoll-Monitoren durchaus auf über 2500px kommen. Wie gesagt ein iPhone liegt bei ca. 414px (iPhone 8). Man könnte nun je nach verwendeter Bildschirmgröße auch die Auflösung des angezeigten Bildes anpassen. Davon würde ich aber auf Grund des erhöhten Programmieraufwandes absehen, da man eine technische Unterscheidung, eine sog. Browserweiche einbauen muss, die erkennt welches Endgerät verwendet wird und dann entscheidet welche HTML-Seite, bzw. welches Bild mit der entsprechenden Auflösung geladen werden soll.

Was kann ich denn gegen diesen Qualitätsverlust unternehmen?
Nun, zuerst nutze ich ein Format, dass bei Speichervorgängen keine weiteren Komprimierungen vornimmt - auch nicht nach x Speichervorgängen. In dem Fall ist es das "PSD-Format". Das ist das Speicherformat von Photoshop, dass keinerlei Komprimierungen an den Bildern vornimmt und es mir zugleich ermöglicht mit mehreren sog. Ebenen zu arbeiten. Das hat natürlich Dateigrößentechnisch betrachtet seinen Preis. Bei einem Bild im Photoshop-Format nach dem Speichern unter 1MB zu bleiben ist - je nach Bildgröße und Anzahl der verwendeten Ebenen - eher schwierig.

Ein Photoshop-Format kann auch weit über 100MB haben. Damit ist es nicht geeignet zur Darstellung im Internet. Ein Webbrowser kann dieses Format auch nicht interpretieren und zeigt nur einen leeren Platzhalter in der von HTML vordefinierten Größe des Bildes.
Alternativ gehört auch das TIFF-Format (tagged image format file) seit geraumer Zeit zu den unkomprimierten Dateiformaten. Es findet aber hauptsächlich im Printbereich Anwendung und es hat keine Ebenen und auch keine Transparenz.
Wäre da noch das GIF-Bildformat. Dies ist auch ein relativ altes Bilddateiformat. Es kann sogar Bilder animiert darstellen.

Scherzhaft wird dieses Format bei den Profis auch schon mal als "Zappelgrafik" bezeichnet, da es nur kurze Bildfolgen zulässt und die entsprechenden Animationen nicht wirklich flüssig sind und immer ein bisschen ruckeln. Bildwiederholraten von 50-60Hz, damit unser Auge eine fließende Bewegung wahrnimmt sind damit also nicht ohne Weiteres möglich. Wenn man diese Dateien so anlegen würde, dass eine sehr hohe Bildwiederholrate genutzt würde, wären sie auch ganz schnell sehr groß.

Ein Haken hat das GIF-Format leider auch und das ist, dass es maximal nur 256 Farben darstellen kann.

Damit ist die realistische Darstellung von Bildern mit üblicherweise 16,7 Millionen Farben (sog. True Color-Bereich) ein bisschen getrübt - auch wenn man die Farbtabelle jedes einzelnen Bildes entsprechend anpassen und in der selben Datei mit abspeichern kann. Ein älteres aber immer noch funktionables Programm dazu ist das GIF-Construction Set . Es ist ein kleines Shareware-Programm und läuft auf dem PC unter Windows - auch aktuell unter
Windows 10.

Hier mal ein Beispiel zu einer dieser GIF-Bilder.

Früher war dieses Format sehr beliebt, da es die einzige Möglichkeit war, animierte Bilder schnell zu laden und im Internet sichtbar zu machen. Farbabstimmungen sind aber auch heute noch gezielt damit möglich, wenn die realistische Farbtreue nicht so eine große Rolle spielt. Ich verwende es auch ab und an noch.

Je nachdem, von wo man Bildmaterial erhält kann ein differenziertes Farbmodell im Bild selbst hinterlegt sein. Als Benutzer, der sich i.d.R. mit einem PC unter MS Windows im Internet aufhält und lediglich Bildmaterial von dort nutzt, bekommt man von diesen Farbmodellen nicht viel mit. Auch wenn man die Seiten anschließen auf dem heimischen Drucker ausdruckt, erkennt man i.d.R. keine sichtbare Verfehlung der Farben (es sei denn eine der Druckpatronen neigt sich dem Ende zu...).

Im Printbereich gibt es das sog. CMYK-Farbmodell. Es steht für Cyan (blau), Magenta (Magenta-Rotton), Yello (gelb) und Black (schwarz). Verwendet man Bilder mit einem solchen Farbmodell auf den Webseiten, werden sie höchstwahrscheinlich vom Webbrowser falsch interpretiert und mit einer verschobenen Farbtabelle dargestellt.

Ich vergleiche sie in den Bildern gerne mit einer Bonbon-farbenen Darstellung. Es wirkt alles zuckersüß und farblich überdreht.

Der Webbrowser geht vom sog. RGB-Farbmodell aus. Dieses kann zwar nicht so viele Farben darstellen, ist aber auf die Bildschirme und auch auf die heimischen Drucker gut abgestimmt. Deswegen verwendet bitte immer das RGB-Farbmodell. Im Photoshop stellt man dieses Farbmodell im Menü unter Bild -› Modus -› RGB-Farbe ein.
Falls ihr also ein Bild in CMYK habt überschreibt mit dieser Einstellung einfach den CMYK-Modus. Speichert anschl. das Bild erneut und es sieht daraufhin farbtreuer aus als zuvor. Evtl. sind geringfügige Anpassungen der Farben notwendig. Eine Anpassung ist je nach verwendeter "Farbtemperatur" manchmal notwendig.