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. Christoph
    24. August 2009 um 10:30 Uhr

    Hallo Mario,

    ich muss mal ein wenig klug scheissen. Soweit ich das weiss, ist die Auflösung relativ egal. Worum es geht ist stets die absolute Zahl der Pixel und so lange die stimmt ist alles in Ordnung.

    Die Zahl der 72 dpi ist noch aus den alten VGA Zeiten und hat soviel Bedeutung wie die Zielgruppe von 14 – 49 in der Werbewirtschaft.

    • Mario
      24. August 2009 um 11:55 Uhr

      Stimmt, da hast du recht. Allerdings verlangen einige Programme nach einer DPI Zahl. Und da dieser Beitrag sich, aufgrund des Themas, eher an die interesierten Anfänger richtet, hielt ich das noch für erwähnenswert.

  2. wario von digital-workshop.at
    24. August 2009 um 11:27 Uhr

    Die Bilder sollte man auch fürs Web Optimieren.
    Auf Smashing Magazin gibts einige wirklich gute Tricks. Die benutze ich jetzt auch immer.
    Obwohl man immer nur kleine Mengen spart lohnt es sich auf jedenfall bei vielen Bildern. Auch Kleinvieh macht Mist..
    http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/

  3. Ralf
    24. August 2009 um 13:10 Uhr

    Bei den Dateiformaten sollte meiner Meinung nach PNG-8 nicht fehlen. Kann zwar auch nur 256 Farben, unterstützt aber nicht nur normale Transparenz, die auch von den alten Browsern (nennen wir sie mal IE6) verstanden wird, sondern auch Alphatransparenz. Das tolle dabei ist, dass die IE6s diese Alphatransparenz nicht darstellen können und anstatt dessen die haltransparenten Bereiche komplett transparent darstellen. So können z. B. leichte Schatten verwirklicht werden, die in den IE6s eben fehlen. Keine Sonderbehandlung mittels irgendwelcher Fixes mit allen ihren Nebenwirkungen sind notwendig und es sieht immer noch schön aus. Mehr dazu unter http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

    Weiterer Vorteil ist die teilweise niedrigere Dateigröße bei gleicher, wenn nicht sogar besserer Qualität im Gegensatz zu GIF. Zur Zeit für Hintergrundgrafiken und gestalterischer Elemente mein bevorzugtes Format.

    • Sandra
      19. Oktober 2009 um 00:03 Uhr

      Das hat mir auch schon etliche Probleme bereitet, dass der IE6 nicht in der Lage ist, mit der Alpha Transparenz von png’s umzugehen. Leider ist mir immer noch unklar, wie hoch der Verbreitungsgrad dieses „alten“ Browsers IE6 derzeit noch ist.

  4. marten
    24. August 2009 um 14:16 Uhr

    Ein Beitrag über Bilder auf Websites sollte doch ein paar Beispiele zu Bilder auf Websites mit Bildern in diesem Beitrag beinhalten. Find ich.

  5. Klugscheißer
    24. August 2009 um 19:20 Uhr

    *hehe*, habe sehr gegrinst bei diesem Beitrag. Der Autor wird wie folgt beschrieben: „…mag den IE6 ebenso wenig, wie Webdesignanfänger, die sich als Profis ausgeben…“, trotzdem fällt er ohne nachzudenken auf den 72dpi Mythos rein.. wer hier wohl der Anfänger ist? 😉
    zum nachlesen: http://praegnanz.de/essays/72dpi
    Sorry, aber ich bin mehr Qualität von diesem Blog gewohnt..

  6. torsten
    24. August 2009 um 23:39 Uhr

    Der Titel des Beitrages und der Inhalt passen irgendwie nicht so richtig zusammen. Ich habe einen Beitrag erwartet, der verschiedene Situationen mit entsprechenden Bildern darstellt und die hervorgerufenen Stimmungen oder zu erwartenden Reaktionen beschreibt. Dieser Artikel war eher der Kategorie: Grafikdateiformate für Anfänger zuzuordnen. Und auch da sollte auf alte Stolpersteine (72dpi … ) verzichtet werden.

    „Bilder können natürlich auch an Stellen eingesetzt werden, wo sie einfach gut aussehen … “ sorry, aber das hier entspricht nicht dem hier gewohnten hohen Niveau.

  7. Marv
    25. August 2009 um 08:27 Uhr

    Interessanter Artikel, allerding fehlen auf jeden Fall auch gelungene Beispiele find ich.

  8. Chris
    4. September 2009 um 12:04 Uhr

    Es ist alles nur eine Frage der Zeit, bis die technik auch hier in der Lage ist das problemlos umzusetzen. Meine ich bei den Handys. Jetzt ist sogar schon UMTS veraltet. Und die Geräte werden auch immer ausgefallener, nur kosten sie alle noch viel zu viel um dies sich als normaler Nutzer leisten zu können. Die Display werden auch immer größer und bald hat man einen voll ersatzfähigen Computer in der hand. Aber bis dahin tächteln und mächteln die entwickler und designer an den besten lösungen für die momenaten lage

  9. medienprojekt-hamburg
    5. September 2009 um 11:05 Uhr

    Super Erklärung, für Einsteiger ideal!

  10. Philipp E
    8. September 2009 um 23:36 Uhr

    Ich muss ehrlich sagen, dass ich von Anfang an mehr von diesem Gastbeitrag erwartet habe. Denn dieser kam bei weitem nicht an die gewohnte Qualität heran. Und diese ist mit der ausschlaggebende Grund, warum ich dieses Blog lese und abonniert habe. Besonders die von einigen angesprochenen Beispielbilder fehlen. Zu dem Thema gibt es viele bessere Beiträge im Netz.

  11. Hannes
    17. September 2009 um 19:46 Uhr

    Hallo!
    Ich muss zugeben, dass ich täglich schon die ein oder andere Stunde auf Blogs verbringe, die sich mit Webdesign befassen und es kommt häufig zu Wiederholungen von Thematiken. Deshalb bin ich sehr froh, auf deinen Artikel gestoßen zu sein, denn die Wichtigkeit von der Verwendung der Fotos ist so groß, dass sie dennoch häufig vergessen wird und/oder keine richtige Anwendung findet.
    Selbst einfache Themen, wie die tatsächliche Größe der Bilder kann eine unheimlich große Rolle spielen und deshalb bin ich umso glücklicher, wenn ich deine gelungene Unterteilung lege.

    Viele Grüße
    Hannes