- verstehen, was eine Bildsprache ist und warum sie Vertrauen schafft
- authentische Fotos von austauschbaren Stockbildern unterscheiden
- Grundregeln des Bildaufbaus wie die Drittelregel anwenden
- ein Fotoshooting und die technische Aufbereitung planen
Bilder werden schneller verarbeitet als Text. Bevor Besucher die erste Überschrift gelesen haben, hat das Titelbild einer Website bereits einen Eindruck hinterlassen: professionell oder improvisiert, nahbar oder distanziert, echt oder austauschbar. Studien zur Blickverfolgung zeigen, dass Menschen auf Websites vor allem Fotos beachten, die echte, relevante Inhalte zeigen – und dass sie dekorative Stockbilder weitgehend ignorieren. Die Nielsen Norman Group hat das schon früh dokumentiert: Informationstragende Bilder werden angesehen, Füllbilder übersprungen.
Für mittelständische Unternehmen liegt darin eine große Chance. Sie haben etwas, das keine Bilddatenbank bieten kann: echte Menschen, echte Projekte, echte Produkte. Diese Lektion zeigt, wie daraus eine Bildsprache wird, die den Auftritt trägt.
1. Was eine Bildsprache ist
Eine Bildsprache entsteht nicht durch ein einzelnes schönes Foto, sondern durch Wiederholung. Wenn alle Bilder einer Website ähnliches Licht, ähnliche Farben und einen ähnlichen Blick auf die Welt haben, wirken sie wie aus einem Guss. Manche Marken arbeiten mit warmem, natürlichem Licht und Menschen in echten Arbeitssituationen. Andere setzen auf klare, kühle Produktaufnahmen vor ruhigen Hintergründen. Beides kann richtig sein – entscheidend ist, dass es zur Marke passt und konsequent durchgehalten wird.
2. Authentisch statt austauschbar
Stockfotos haben ihren Platz, etwa für abstrakte Themen oder als Übergangslösung. Als Hauptbilder eines Unternehmensauftritts sind sie problematisch. Viele Motive sind so häufig verwendet, dass Besucher sie wiedererkennen – der Handschlag vor weißem Hintergrund, das diverse Team am Glastisch, die Hand mit dem leuchtenden Netzwerk. Solche Bilder signalisieren vor allem, dass das Unternehmen nichts Eigenes zu zeigen hat. Schätzen Sie ein, wie diese Bilder wirken:
Team-Foto aus dem eigenen Betrieb, natürliches Licht, echte Arbeitssituation
Stockfoto: lachende Menschen im Anzug schütteln sich vor weißem Hintergrund die Hände
Produktfoto mit dem Smartphone, schräger Horizont, Kabel im Hintergrund
Referenzfotos von fünf Projekten, alle im gleichen Stil und mit gleicher Bearbeitung
Stockfoto einer Baustelle, die erkennbar in den USA liegt, für einen Bauunternehmer aus Bayern
Authentische Fotos müssen nicht perfekt sein, aber sorgfältig. Ein gerader Horizont, ein aufgeräumter Hintergrund, gutes Licht und ein bewusster Bildausschnitt machen aus einem Schnappschuss ein brauchbares Bild. Für die wichtigsten Motive – Team, Geschäftsführung, Standort, Kernprodukte, Referenzen – lohnt sich dennoch ein professionelles Shooting. Ein halber oder ganzer Tag mit einem Fotografen liefert Bilder für Jahre.
3. Bildaufbau: die Drittelregel
Die bekannteste Regel für einen spannenden Bildaufbau ist die Drittelregel. Das Bild wird gedanklich durch zwei waagerechte und zwei senkrechte Linien in neun gleiche Felder geteilt. Wichtige Elemente werden auf die Linien oder ihre Schnittpunkte gesetzt statt in die Mitte. Das erzeugt Spannung und lässt Raum – auf einer Website oft genau den Raum, den eine Überschrift oder ein Knopf braucht.
Weitere Grundregeln ergänzen die Drittelregel. Menschen sollten in das Bild hineinblicken, nicht hinaus, denn der Blick des Betrachters folgt dem Blick der abgebildeten Person. Linien im Bild wie Straßen, Geländer oder Tischkanten führen das Auge und können auf den Text zeigen. Und ein ruhiger Hintergrund lässt das Motiv wirken, während ein unruhiger ablenkt. Für Webseiten gilt zudem: Bilder werden auf verschiedenen Bildschirmen unterschiedlich zugeschnitten. Wer beim Fotografieren etwas mehr Rand lässt, hat später Spielraum für Hoch- und Querformat.
4. Technische Aufbereitung
| Aspekt | Empfehlung | Warum |
|---|---|---|
| Format | WebP oder AVIF, JPEG als Rückfall | deutlich kleinere Dateien bei gleicher Qualität |
| Größe | nicht breiter als nötig, z. B. 2000 px für Vollbild | große Originale verlangsamen die Seite |
| Dateigröße | Titelbild möglichst unter 300 KB | Ladezeit ist ein Rankingfaktor |
| Responsive | mehrere Größen ausliefern | das Handy lädt kein Desktopbild |
| Dateiname | beschreibend, z. B. cafe-terrasse-sommer.webp | hilft Suchmaschinen |
| Alternativtext | Zweck des Bildes beschreiben | Barrierefreiheit, siehe Kurs Barrierefreiheit |
| Rechte | Lizenz und Einwilligungen dokumentieren | siehe Kurs Website-Recht |
Moderne Content-Management-Systeme und Frameworks übernehmen viele dieser Schritte automatisch: Sie wandeln Bilder in moderne Formate um, erzeugen verschiedene Größen und laden Bilder erst, wenn sie in den sichtbaren Bereich scrollen. Trotzdem lohnt es sich, schon beim Hochladen auf vernünftige Ausgangsgrößen zu achten. Ein 12-Megapixel-Foto direkt aus der Kamera ist selten nötig.
5. Ein Shooting planen
Ein Fotoshooting gelingt mit guter Vorbereitung. Am Anfang steht eine Bildliste: Welche Motive werden für welche Seiten gebraucht, in welchem Format, mit welcher Botschaft? Dazu kommen einige Referenzbilder, die die gewünschte Stimmung zeigen. Am Tag selbst helfen ein aufgeräumter Arbeitsplatz, Arbeitskleidung mit Logo, echte Tätigkeiten statt gestellter Posen und ein Zeitplan, der Pausen für die Beschäftigten einplant. Vorab müssen die Einwilligungen der abgebildeten Personen eingeholt werden, wie im Kurs zur DSGVO beschrieben. Nach dem Shooting wählt man gemeinsam aus, lässt die Bilder einheitlich bearbeiten und legt sie gut sortiert ab, damit sie auch in zwei Jahren noch gefunden werden.
Wer kein Budget für ein Shooting hat, kann mit einem aktuellen Smartphone viel erreichen. Die wichtigsten Regeln: bei Tageslicht fotografieren, nicht gegen das Licht, das Motiv füllt das Bild, der Horizont ist gerade, und es gibt mehrere Aufnahmen zur Auswahl. Eine einheitliche Bearbeitung, etwa mit einer festen Voreinstellung für Helligkeit und Farbe, sorgt dafür, dass auch selbst gemachte Fotos zusammenpassen.
Schließlich lohnt ein Blick auf den gesamten Bildbestand. Viele Websites sammeln über die Jahre Bilder aus verschiedenen Quellen: ein paar Stockfotos vom Start, einige Handybilder vom Tag der offenen Tür, Produktbilder vom Hersteller. Einmal im Jahr alle Bilder nebeneinander anzusehen und zu fragen, ob sie noch zur Bildsprache passen, ist eine einfache und sehr wirksame Pflegemaßnahme. Was nicht passt, wird ersetzt oder entfernt.
6. Bilder und Text zusammenbringen
Auf einer Website stehen Bilder selten allein. Sie tragen Überschriften, begleiten Absätze oder bilden den Hintergrund für einen Einstiegsbereich. Damit Bild und Text zusammenwirken, gelten einige Regeln. Text auf Fotos braucht eine ruhige Bildstelle oder eine halbtransparente Fläche dahinter, sonst leidet die Lesbarkeit und oft auch der Kontrast nach den Vorgaben der Barrierefreiheit. Die Blickrichtung von Menschen im Bild sollte zum Text zeigen, nicht von ihm weg, denn der Betrachter folgt diesem Blick unwillkürlich. Und das Bild sollte zeigen, was der Text sagt: Eine Seite über Fahrradreparatur braucht ein Bild einer Reparatur, nicht ein allgemeines Symbolbild von Zusammenarbeit.
Hilfreich ist auch ein Blick auf die Reihenfolge der Bilder auf einer Seite. Ein großes Einstiegsbild setzt die Stimmung, weitere Bilder im Verlauf der Seite belegen einzelne Aussagen, etwa mit einem Blick in die Werkstatt oder einem fertigen Projekt. Zu viele Bilder hintereinander ermüden, zu wenige lassen eine Seite trocken wirken. Eine gute Faustregel ist ein Bild pro Abschnitt, jeweils mit einer klaren Aufgabe. Galerien mit dutzenden Bildern gehören auf eigene Referenzseiten, wo Besucher sie gezielt ansehen wollen.
Schließlich sollten Bilder regelmäßig aktualisiert werden. Ein Team-Foto, auf dem die Hälfte der abgebildeten Personen nicht mehr im Unternehmen arbeitet, oder Fahrzeuge mit einem alten Logo wirken nachlässig. Ein fester Termin im Jahr für neue Aufnahmen hält die Bildsprache frisch und zeigt Besuchern, dass das Unternehmen lebt.
- [1]Nielsen, J. (2010): Photos as Web Content. Nielsen Norman Group.
- [2]Nielsen Norman Group (2017): Images: Decorative vs. Informational. Eyetracking Web Usability.
- [3]Freeman, M. (2007): The Photographer's Eye. Lewes: Ilex.
- [4]Google Web.dev (2024): Optimize images; Use modern image formats.
Stand: September 2026. Kursmaterial der Klarwerk Akademie.