Bilder auf Webseiten richtig einsetzen

  • von Lennart Prange

Der Autor des Gastbeitrages

Mario Leister blogt im Webszenario über Themen rund um Webdesign und Webtechnik. Er ist Verfechter der Webstandards und mag den IE6 ebenso wenig, wie Webdesignanfänger, die sich als Profis ausgeben.

Bilder finden auf nahezu allen Webseiten ihren Platz, denn ein Bild sagt bekanntlich mehr als 1000 Worte. Leider sprechen die Bilder manchmal eine andere Sprache als es der Textinhalt tut.
Auch bei der Frage, wie man ein Bild sinnvoll und komfortabel einsetzt, kommt man leicht ins Straucheln. Welches Dateiformat soll ich nutzen? Wie groß darf das Bild sein?
Durch immer schnellere Internetzugänge sind diese Fragen in den Hintergrund gerückt.
Doch gerade bei iPhone, BlackBerry und Co, treten genau diese Probleme wegen der langsamen mobilen Zugänge und der beschränkten Rechenkapazität wieder in den Vordergrund.

Zum Einstieg gehe ich auf die Technik, sprich Dateiformate, Dateigröße, etc. ein, damit keine Fragen offen sind, wenn ich dann zum richtigen Einsatz und zum Rechtlichen komme.

Dateiformate und Auflösung

Für die Darstellung im Internet bieten sich drei Dateiformate an. Das ist zuerst das weit verbreitete JPG/JPEG Format. Aufgrund der geringen Dateigröße durch die starke Kompression der Bildinformationen, laden die Bilder schnell und verfälschen dabei trotzdem die Farben nicht gravierend.
Ähnlich wie das JPEG Format verhält sich das PNG-24 Format. Die Bilder werden auch sehr gut komprimiert und sind qualitativ hochwertig. Beide Formate sind also für Fotos geeignet. Allerdings hat PNG den Vorteil, dass es, wie GIF Dateien, einen transparenten Hintergrund ermöglicht. Leider haben alte Browser noch Probleme bei der Darstellung.
Das dritte Format im Bunde ist, wie oben erwähnt, das GIF Format.
Es bietet Transparenz, sehr kleine Dateigrößen und außerdem lässt es Animationen zu. Allerdings ist es auf 256 Farben begrenzt und stellt nicht genügend Farbnuancen dar. Für einfache Werbebanner oder ClipArts ist es durchaus die richtige Wahl.
Als Auflösung genügt im Internet bei allen Bildern 72 DPI (72 Pixel pro Inch). Größere Auflösungen sind unnötig und erhöhen nur die Dateigröße.

Dateigröße

Normale Webgrafiken sind 4-300kB (Kilobyte) groß. Bei großen Fotos kann es auch schon in den Megabyte Bereich gehen.
Allgemein gilt hier: So groß wie nötig, aber so klein wie möglich.
Gesetzt den Fall, man braucht eine 300 Pixel breite Grafik und hat diese in einer Breite von 1024 Pixel vorliegen, sollte man diese mit einem Bildbearbeitungsprogramm auf die benötigte Größe herunterrechnen. Dadurch wird die Dateigröße kleiner und die Grafik wird schneller geladen.

Wo setzt man Bilder am besten ein?

Beim Einsatz von Bildern sollte man immer eine Sache im Hinterkopf haben: Ein Bild soll einen Eindruck erwecken oder verstärken. Es ersetzt nicht den Text, der die eigentliche Aussageabsicht beschreibt.
Doch ganz ohne Bilder geht es auch nicht. Bilder dienen als Blickfänger. Interessante Bilder halten den Besucher fest und bewegen ihn im besten Fall dazu, den Text zu lesen. Reiner Text wirkt oft abschreckend.
Blogs setzen, ähnlich wie Zeitungen, oftmals polarisierende Bilder ein. Dadurch werden Emotionen bei dem Leser geweckt. Ein emotionaler Leser wird zu 99% den Artikel lesen, um zu erfahren, ob seine Emotion bestätigt oder widerlegt wird.
Prädestiniert für diese Art der Emotionen sind Bilder mit kräftigen Farben, die sofort ins Auge fallen. Gute Motive sind: schöne Frauen, ansprechende Farbverläufe und Farbkombinationen, niedliche Tiere und märchenhafte Landschaften.
Tipps zur Farbgestaltung und zur psychologischen Wirkung von Farben können im Webszenario gefunden werden.

Bilder können natürlich auch an Stellen eingesetzt werden, wo sie einfach gut aussehen oder die Stimmung auflockern. Allerdings sollte darauf geachtet werden, dass das Bild auch die Interpretation hinsichtlich des Seiteninhalts zulässt.
Anfänger neigen oft dazu, Webseiten mit animierten ClipArts „aufzupeppen“. Das wirkt kitschig und sollte unbedingt vermieden werden.

Urheberrecht

Bilder sind generell urheberrechtlich geschützt. Daher ist es immer erforderlich, den Rechtsinhaber um Erlaubnis für den Einsatz des Bildes zu fragen. Mit der schriftlichen Genehmigung oder eigenen Bildern ist man daher immer auf der sicheren Seite. Bei unerlaubtem Einsatz kann eine Schadensersatzklage die Folge sein.
Ebenso haben abgebildete Personen das Recht auf Einhaltung ihrer Persönlichkeitsrechte. Gerade bei kostenlosen Bildern sollte auf diesen Aspekt geachtet werden.
Ich selbst hole Bilder, wenn ich sie nicht selbst gemacht habe, meistens von der kostenlosen Stockphoto Seite stock.xchng. BlueVertigo stellt eine Liste dieser Anbieter zur Verfügung. Außerdem gibt es sehr viele Bilderdatenbanken, die für kleines Geld wirklich tolle Bilder liefern.
Die Google Bildersuche ist keine zuverlässige Quelle für freie Grafiken und sollte daher nur zur Inspiration genutzt werden.

Hinweis: Das Urheberrecht gilt für alle Grafiken und muss nicht, z.B. durch ©, gesondert ausgewiesen sein.

Dieser Artikel ist sehr sorgfältig recherchiert. Dennoch stellt er bezüglich der rechtlichen Hinweise keinen Anspruch auf Fehlerfreiheit oder Vollständigkeit.

13 Kommentare

  1. WordPress › Fehler

    Es gab einen kritischen Fehler auf deiner Website.

    Erfahre mehr über die Problembehandlung in WordPress.