So erstellen Sie hochwertige Websiteinhalte – Teil 2: Wie bereite ich das Bildmaterial vor?

Von Daniela Kerschbaumer, 9. März 2018

Wenn Sie die Texte für Ihre Website fertig haben, geht es flott mit der Bebilderung weiter. Seien es Fotos, Grafiken oder Illustrationen. Das verwendete Bildmaterial ist ein wichtiger Bestandteil Ihrer Corporate Identity. Denn wie heißt es so schön: Bilder sprechen mehr als tausend Worte. Folgende Tipps sollen Ihnen dabei helfen, das passenden Bildmaterial für Ihren Webauftritt zusammenzustellen.

Erfolgreiche Websiteinhalte: Bilder. Illustration: Daniela Kerschbaumer

 

Wie bereite ich das Bildmaterial vor?

1. Leisten Sie sich professionelle Fotos

Professionell angefertigte Fotos verbessern die Qualität Ihrer Website signifikant. Profis wissen, wie Sie und Ihr Unternehmen perfekt in Szene gesetzt werden. Das Licht und die Farbgebung werden optimal aufeinander abgestimmt. Alle auf den Fotos zu sehenden Hintergründe haben einen einheitlichen Aufbau und Schatten sind nur dort vorhanden, wo sie hingehören. Diese Qualität werden Sie als Laie trotz guter Kamera nur schwer hinbekommen.

2. Verwenden Sie Stockfotos mit Bedacht

Manchmal kommt man nicht umhin, Stockfotografien als Bildmaterial für die Website zu nutzen. Stockplattformen bieten umfangreiches Bildmaterial zu den unterschiedlichsten Themen. Die Fotos sind in der Regel günstig und sofort einsetzbar.

Hierbei sollten Sie jedoch folgendes beachten:

  • Prüfen Sie vor dem Kauf von Nutzungsrechten, ob die Fotos lizenzfrei sind und kommerziell genutzt werden dürfen.
  • Vergessen Sie nicht, die Quellenangaben der Fotos auf der Website anzugeben. Beachten Sie die Regelungen im Lizenzvertrag der jeweiligen Stockplattform.
  • Verwenden Sie Bilder, die zur Thematik und dem Design der Seite passen.
  • Achten Sie auf eine einheitliche Bildsprache, damit Ihr Webauftritt konsistent bleibt.
  • Verwenden Sie natürlich wirkende Fotos. Stockfotos zeigen oftmals überinszenierte Situationen.
  • Vermeiden Sie typische Stockfotografie Klischeebilder, wie z. B. den handschüttelnden Anzugsträger, die eingefärbte Taste einer Computertastatur oder das wundersame technische Gerät, um das sich das gesamte Team schart.

3. Versehen Sie Bildmaterial mit Bildtiteln, Alternativ- und Beschreibungstexten

Achten Sie beim Speichern von Fotos auf sprechende Dateinamen. Verwenden Sie Bindestriche statt Leerzeichen. Beispiel: statt IMG_1253.jpg besser ballspielender-hund.jpg verwenden. Vermeiden Sie Umlaute. Diese führen beim Speichern in der Datenbank oftmals zu Fehlern. Bildmaterial mit einem beschreibenden Alternativtext („Alt-Tag“) versehen, verbessert das Suchmaschinenranking und ist für barrierefreie Websites erforderlich. Verwenden Sie Quellangaben im Beschreibungstext.

4. Korrekte Bildgrößen sorgen für eine gute Website Performance

Bei der Verwendung von Bildmaterial muss folgendes beachtet werden:

  • Performance: Zu große Bilddateien sorgen für lange Ladezeiten. Eine schlechte Website Performance ist nicht nur ein Ärgernis für Seitenbesucher, sondern wird auch von Suchmaschinen mit einem schlechteren Ranking abgestraft. Verwenden Sie daher immer Bildkomprimierungsprogramme, wie z. B. Compress PNG oder speichern Sie Bildmaterial mit verringerter Qualität (z. B. 60%) ab. Dies verkleinert die Bilddatei enorm, wirkt sich aber im Normalfall nicht negativ auf die Darstellung aus.
  • Korrekte Bildauflösung: Bilder benötigen für eine korrekte Darstellung eine Auflösung von mindestens 72 dpi. Kleinere Auflösungen oder Bilder, die größer als im Original eingesetzt werden, sorgen für Unschärfe und wirken unprofessionell.
  • Retina Displays: Damit Bilder auch auf modernen Retina Displays scharf angezeigt werden, empfiehlt es sich, sie doppelt so groß einzupflegen, wie sie auf der Website verwendet werden.
  • Dynamisches Layout: Das Layout der Website passt sich bei modernen Websites automatisch der Ausgabegröße des jeweiligen Gerätes an. Beachten Sie daher, dass Bilder auf Tablets oder Smartphones mitunter ein anderes Format haben als auf Desktop Monitoren. Dies bedeutet, dass Sie Fotos möglicherweise in einem größeren Format einpflegen müssen.

5. Achten Sie beim Speichern von PDFs auf Barrierefreiheit

Inhalte, die als PDF zum Download bereitgestellt werden, sollten barrierefrei gespeichert sein. Dies bedeutet, dass PDF Dokumente korrekt formatiert werden und somit auch für Screenreadernutzer lesbar sind. Gängige Programme, wie Adobe Acrobat, unterstützen diesen Vorgang mit eigenen Features.

Wenn Sie nun auch wissen möchten, wie Sie mit dem Schreiben der Texte starten sollen und worauf Sie beim Texten achten müssen, können Sie hier weiterlesen: So erstellen Sie hochwertige Websiteinhalte Teil 1: Was muss ich beim Schreiben beachten?