Kriterien für die Bildauswahl auf Websites

Catch the eyes

Gute Bilder rufen in Bruchteilen von Sekunden beim Betrachter Emotionen hervor. Deshalb bestimmen Sie zusammen mit dem Design die Wirkung und Überzeugungskraft Ihrer Website – noch bevor der Besucher sich im Detail mit den Texten beschäftigt hat. Gute Bilder, die mit dem Design Ihrer Website harmonieren und den Besucher Ihrer Seite emotional ansprechen, lassen ihn „eintreten“. Nur dann werden Ihre Texte gelesen.

Deshalb ist die Auswahl von Fotografien, Icons und Grafiken entscheidend für die Wirkung Ihrer Website. Doch nicht jedes Bild oder jede Bildkomposition, die Sie vielleicht in Print-Medien wie Broschüren oder Flyern nutzen, eignet sich auch für die Website. Warum?

Bilder wirken auf Bildschirmen anders als in Printmedien

Was ist bei der Wirkung von Bildern auf Bildschirmen anders als bei der Wirkung in Printmedien?

• Printmedien sind statisch
  • Ein Flyer oder eine Broschüre haben ein feststehendes Format, das immer gleich bleibt, egal welche Person dieses Medium betrachtet. Somit wählen Sie die Bilder, Icons und Grafiken exakt für dieses Medium in diesem einen Format aus.
• Bildschirme sind dynamisch
  • Je nach Nutzergruppen erfolgt rund die Hälfte aller Zugriffe auf Websites heutzutage über mobile Endgeräte. Das heißt, dass alle Bilder, Icons und Grafiken, die Sie auf Ihrer Website nutzen möchten, sowohl auf einem 27 Zoll Bildschirm als auch auf einem kleinen Mobilbildschirm gut zu sehen sein müssen und ihre Aussagekraft behalten.
• Bildschirme werden hinterleuchtet
  • Anders als bei Drucksachen, werden Bilder auf den Bildschirmen, quasi von hinten angestrahlt. Das lässt Farben generell anders wirken.
• Die Farbwirkung bei Bildschirmen ist unterschiedlich
  • Wie Farben auf Bildschirmen dargestellt werden, hängt von der Qualität des Monitors und der entsprechenden Kalibrierung ab. Daher sieht jeder Betrachter ggf. etwas andere Farben. Bei Printmedien sind die Farben mit dem Druck festgelegt.

Was heißt das nun für Ihre Bildauswahl?

Es ist Stand der Technik, Websites im sogenannten responsive design anzulegen. Das heißt, alle Bildelemente, die Sie auf der Website nutzen, müssen skalierbar sein. Nur dann sind sie auf den verschiedenen Bildschirmen zu erkennen. Was ist noch zu beachten?

• Bilder brauchen einen klaren Aufbau
  • Strukturen, Perspektiven, Dynamiken müssen harmonisch komponiert sein.
• Auf Verwendbarkeit auf allen Bildschirmgrößen prüfen
  • Mehrere kleine Fotos, die zu einer Collage zusammengestellt werden, können ggfs. auf Bildschirmen mit geringer Auflösung, wie z.B. auf Handys, nicht mehr zu erkennen sein.

Kriterien für die Bildauswahl

Ziel der Bilder ist es, Atmosphäre zu transportieren und dem Besucher Ihrer Website so auf einen Blick das zu vermitteln, was Sie, Ihr Unternehmen, Ihre Dienstleistungen und Produkte ausmacht.

Deshalb sollten Sie sich folgende Fragen stellen:

• Kernbotschaft
  • Welchen inhaltlichen Aspekt soll das Bild visuell unterstreichen?
• Wirkung
  • Welche Wirkung soll das Bild beim Betrachter erzielen?
  • Generell sollte das Bild eine gewisse Spannung in sich tragen, damit es den Betrachter „in den dazugehörigen Text zieht“.
• Positionierung
  • Wo soll das Bild eingebunden werden?
• Format
  • Welches Bild-Format brauche ich dafür? Panorama, Quer- oder Hochformat.
• Responsive
  • Wird das Bild sowohl auf einem Desktop- als auch auf einem Mobilbildschirm „funktionieren“?
• Farben
  • Welche Farben harmonieren mit dem Gesamtauftritt meiner Website? Welche nicht?
• Auflösung
  • Das Seitenverhältnis digitaler Kameras ist üblicherweise 3:2. Die Kameraauflösung sollte mindestens 6000×4000 Pixel (Breite x Höhe) sein. Das gewährleistet, dass auch Ausschnitte verwendet werden können. Als Endgrößen können für Bilder, die auch auf modernen 5k-Bildschirmen scharf aussehen sollen, die folgenden Auflösungen angesetzt werden, dabei ist die Breitenangabe relevant, die Höhe richtet sich nach dem Layout der Seite:
  • Fullscreen-Bilder: 2000 x Höhe px
  • Beitragsbilder für Blogbeiträge: 1200 x 800 px
  • Bilder in Absätzen bei zweispaltigem Textsatz: 600 x 400 px
  • Entsprechend laden Sie Bilder niemals in voller Kameraauflösung auf Ihre Website hoch
  • Wandeln Sie Ihre Bilder im .jpg- oder .png-Format für die Verwendung auf Ihrer Website in das dafür deutlich überlegenere .webp Format um.
  • Verwenden Sie für die Komprimierung und Umwandlung ein Online-Tool wie z.B. Squoosh. Sie .jpg oder .png hinein und bekommen .webp heraus. Das Tools arbeitet lokal, ist sehr schnell und einfach zu bedienen.

Spuoosh Online-Bildkomprimierung: https://squoosh.app

Selbsterstellte Fotografien vs. Stockfotos

Generell ist es empfehlenswert, professionell erstellte Bilder – von Ihnen, Ihrem Team, Ihren Räumlichkeiten oder Produkten – für Ihre Website zu nutzen. Handyfotos sind tabu!

Stellen Sie auf Ihrer Webseite zusätzlich zu Ihrer Unternehmenspräsentation auch noch allgemeinere Themen dar oder veröffentlichen Blog-Artikel, können Sie auch Agenturfotos, sogenannten Stockfotos, nutzen.

Empfehlenswerte Plattformen sind z.B. Unsplash, AdobeStock, iStock oder Shutterstock. Unsplash zeichnet sich durch viele künstlerische Fotografien von Fotografen aus der ganzen Welt aus, die Sie auch kostenlos nutzen können, natürlich immer unter Angabe des Urhebers. Die anderen sind klassische Stockfoto-Agenturen mit einem umfassenden Repertoire und guter Verschlagwortung auch in deutscher Sprache.

Beauftragung von Fotografen

Bevor Sie eine Fotografin oder einen Fotografen mit der Bilderstellung für Ihre Website beauftragen, besprechen Sie mit Ihrem Webdesigner, welche Anforderungen er an die Fotografien hat, um ein optimales Gesamtwerk zu erstellen. Design und Bilder müssen eine harmonische Einheit bilden, sonst verliert die Seite an Überzeugungskraft!

Nachdem Sie mit Ihrem Webdesigner gesprochen haben, machen Sie Ihrer Fotografin oder Ihrem Fotografen klare Vorgaben (Briefing), was genau gemacht werden soll und welche Wirkung Sie mit den Fotos erzeugen wollen. Was sollen die Besucher Ihrer Website wahrnehmen? Welche Stimmung soll vermittelt werden? Klarheit? Wärme und Herzlichkeit? Struktur? Innovation? Definieren Sie verschiedene Settings, in denen die Aufnahmen entstehen sollen und achten Sie darauf, dass die Vorgaben, die Ihnen Ihr Webdesigner gemacht hat, vom Fotografen eingehalten werden. Der Fotograf ist Ihr Dienstleister und seine Arbeit Teil eines Gesamtwerkes.

Bestenfalls ist Ihr Webdesigner auch ein guter Fotograf. Er erkennt im Dialog mit Ihnen, welche Bilder die Website benötigt, damit Sie die Wirkung erzielt, die Sie wünschen. Ein Bild sagt mehr als tausend Worte. Ein schlechtes auch!

Portraits – unbedingt, und aktuell bitte

Sie kennen das, die Mitarbeiterfotos auf manchen Websites sind eine Sammlung von historischen Schnappschüssen. Das wirkt unprofessionell. Und natürlich machen Sie das nicht. Gerade die Portraits der Menschen, die das Unternehmen tragen, sind ein wichtiger und emotionaler Aspekt Ihrer Unternehmenspräsentation. Schlechte Portraits können Show-Stopper sein, wenn es darum geht, ob der Besucher Kontakt mit Ihnen aufnimmt oder die Seite verlässt und nie wieder kommt.

Verwenden Sie professionelle Portraitfotos. Haben Sie mehrere Mitarbeiter, dann sollte auf einheitliche Lichtverhältnisse und Hintergründe geachtet werden. Ggfs. schicken Sie Ihre Mitarbeiter zu dem Fotografen Ihrer Wahl und lassen Sie aktuelle Fotos im Studio machen. Noch besser ist es natürlich, Sie können professionelle Fotos in der Produktion, auf der Baustelle, eben „bei der Arbeit“ machen und verwenden. Damit schaffen Sie eine authentische und emotionale Atmosphäre, die ein erstes Vertrauen in Sie und Ihre Leistungen schafft und Ihre Unternehmenspräsentation einmalig macht. Die Wirkung sollten Sie nicht unterschätzen. Wenn Sie z.B. als Handwerksbetrieb, als Hersteller oder Künstler die Möglichkeit haben, Ihre Werkräume in das Shooting einzubeziehen, machen Sie das.