Kamera mit Fotoabzügen - Kriterien für die Bildauswahl für Webseiten - netzwerk.design
Foto | Nordwood Themes on Unsplash

Kriterien für die Bildauswahl auf einer Webseite

Aktualisiert

6 Min.

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 Webseite – noch bevor der Besucher sich im Detail mit den Texten beschäftigt hat. Gute Bilder, die mit dem Design Ihrer Webseite 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: Mehr als die Hälfte aller Zugriffe auf Websites erfolgt heutzutage über mobile Endgeräte. Das heißt, dass alle Bilder, Icons und Grafiken, die Sie auf Ihrer Webseite 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.
  • 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?

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 knackig 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: mindestens 2000×1333 Pixel
  • Beitragsbilder für Blogbeiträge: 1200×800 Pixel
  • Bilder in Absätzen bei zweispaltigem Textsatz: 600×400 Pixel
  • JPG-Format, Komprimierung 80%.

Entsprechend laden Sie Bilder niemals in voller Kameraauflösung auf Ihre Website hoch. Grund: Performance und Webspace-Verbrauch.

Generell sollte das Bild eine gewisse Spannung in sich tragen, damit es den Betrachter „in den dazugehörigen Text zieht“.

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 Website 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 ein lustiges Sammelsurium von historischen Urlaubsschnappschüssen aus den Familienalben. 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.

Möwe im Flug - wordpress web.design

Fazit

  • Ein Bild sagt mehr als tausend Worte. Daher sind Bilder entscheidend für den emotionalen Kontakt zum Besucher Ihrer Website.
  • Die passenden Bilder auszuwählen, braucht Zeit und Know-how.
  • Alle Bilder, Grafiken und Icons müssen im responsive design funktionieren.
  • Nutzen Sie professionell erstellte Bilder.
  • Bevor Sie Fotografen engagieren, sprechen Sie mit Ihrem Webdesigner.

Mehr Impulse zur Bildsprache und der Wirkung von Fotos erhalten Sie auf den Seiten Fotografie und Lux-Scriptum und natürlich in den Referenzprojekten.

Portrait Fotografie

Zur Online-Ausstellung Lux-Scriptum

Jetzt anrufen