So wählst du die richtigen Bilder für deine Website

Kläre zuerst, welche Aufgabe das Bild hat

Frage dich vor der Auswahl: „Was sollen Besucher an dieser Stelle verstehen oder empfinden?“

Ein Bild auf der Startseite kann dein Unternehmen vorstellen. Ein Bild zu einer Dienstleistung zeigt die Arbeit oder ihr Ergebnis. Ein Teamfoto hilft Kunden, die Menschen wiederzuerkennen, denen sie begegnen werden. Wähle ein Bild, das diesen Zweck unterstützt.

Formuliere vor der Suche einen kurzen Auftrag: „Das Bild soll ein kleines, von uns renoviertes Bad zeigen und links Platz für die Überschrift lassen.“ Eine konkrete Vorgabe hilft, auch schöne Fotos auszusortieren, die nicht zur Seite passen.

Vergleiche die Optionen anhand von drei Fragen: Was vermittelt das Bild? Ist diese Information hier hilfreich? Bleibt die Aussage auch in dem Platz verständlich, der für das Bild vorgesehen ist? Liefert das Bild weder nützliche Informationen noch eine passende Stimmung, kann der Abschnitt mit Text allein besser funktionieren.

Wähle ein passendes Bild für den Einstiegsbereich

Der große Einstiegsbereich, oft Hero genannt, ist für viele Besucher der erste Eindruck. Sein Bild sollte die Überschrift unterstützen, statt mit ihr um Aufmerksamkeit zu konkurrieren.

Ein Renovierungsbetrieb könnte einen fertigen Raum oder einen Handwerker bei der Arbeit zeigen. Für eine Physiotherapiepraxis passt eine natürliche Aufnahme einer Beratung oder Übung. Ein lokales Café könnte seine Räume oder ein typisches Gericht präsentieren.

Lass genügend ruhige Fläche für Überschrift und Schaltflächen. Zieht das spektakuläre Bild so viel Aufmerksamkeit auf sich, dass das Angebot unklar bleibt, wähle ein einfacheres Motiv.

Beurteile das Bild im tatsächlichen Seitenlayout. Ein für sich genommen gelungenes Foto kann genau hinter der Überschrift unruhig sein. Setze Überschrift und Schaltfläche als Seitentext um, statt sie ins Bild einzubauen. So können sie sich dem Layout anpassen.

Beispiel: drei Bilder für dieselbe Startseite

Ein Renovierungsbetrieb nutzt die Überschrift „Badsanierungen für kleine Wohnungen“ und hat drei Fotos zur Auswahl:

• Ein professionelles Stockfoto eines großen Luxusbads. Die Beleuchtung ist ansprechend, doch der Raum entspricht nicht den kleinen Bädern, die der Betrieb zeigen möchte. Das Bild kann falsche Erwartungen an die Arbeit wecken.
• Ein Foto eines eigenen abgeschlossenen Badprojekts mit engem Ausschnitt und sichtbarer Unordnung. Das Motiv passt, aber die Raumaufteilung ist schwer zu erkennen. Probiere einen anderen Ausschnitt oder ein anderes Foto desselben Projekts.
• Ein übersichtliches Foto eines fertiggestellten kleinen Bads. Stauraum, Dusche und Platzverhältnisse sind gut zu erkennen. Bleibt außerdem Platz für die Überschrift, passt es am besten zu dieser Seite.

Verschwindet beim dritten Foto die Dusche im Smartphone-Ausschnitt, bereite eine eigene mobile Variante vor oder stelle den Text neben das Bild. Motiv, Aussage und endgültiges Layout bestimmen die Auswahl gemeinsam.

Zeige die Dienstleistung oder ihr Ergebnis

Bilder zu Dienstleistungen helfen am meisten, wenn sich Besucher damit die Arbeit besser vorstellen können. Ein Installateur könnte eine fertige Installation oder einen Techniker beim Kunden zeigen. Ein Fotograf kann eine echte Arbeitsprobe präsentieren. Das sagt mehr aus als ein beliebiges Foto einer Person am Laptop.

Wähle die Ansicht, die eine wahrscheinliche Kundenfrage beantwortet. Ein fertiger Raum zeigt das Ergebnis, eine Nahaufnahme einen Anschluss oder die Verarbeitung, ein Arbeitsfoto einen Teil des Ablaufs. Entscheide danach, was der Abschnitt erklären soll.

Ergänze Projektbilder um eine kurze Bildunterschrift, die die Arbeit und das wichtige Detail benennt. „Einbaustauraum unter einer Dachschräge“ sagt mehr als „Noch ein zufriedener Kunde“. Beschreibe nur, was das Projekt tatsächlich zeigt, und formuliere Aussagen zu Qualität oder Ergebnissen konkret.

Nutze natürliche Fotos des echten Teams

Ein Teamfoto kann einen kleinen Betrieb zugänglicher wirken lassen, wenn es die Menschen zeigt, denen Kunden tatsächlich begegnen. Eine vertraute Arbeitsumgebung, natürliche Gesichtsausdrücke und entspannte Posen wirken meist überzeugender als ein stark inszeniertes Gruppenfoto.

Halte Ausschnitt und Hintergrund bei Einzelporträts ähnlich. Verwende aktuelle Fotos, die zu dem Service passen, den Kunden erwarten können.

Name und Funktion neben dem Porträt helfen, das Gesicht der Person zuzuordnen, die die Anfrage beantwortet oder den Termin übernimmt. Ein einfaches, gut ausgeleuchtetes Porträt kann reichen; ein aufwendiges Shooting ist nicht nötig. Bitte die abgebildeten Personen vor der Veröffentlichung um Erlaubnis und achte darauf, dass im Hintergrund nicht versehentlich Kunden oder private Angaben zu sehen sind.

Wähle Blogbilder passend zum Artikel

Ein Blogbild soll das Thema erkennbar machen, statt nur Platz zu füllen. Für einen Artikel über Wandfarben ist ein Raum mit einem deutlichen Farbbeispiel oft hilfreicher als eine beliebige Person mit einem Pinsel.

Eine einfache Grafik, ein echtes Beispiel oder ein Foto deiner Arbeit kann passender sein als ein Stockfoto. Stimme die Bildart auf die Erklärung ab: Ein Vergleich braucht möglicherweise zwei Beispiele nebeneinander, eine Anleitung einen Screenshot des konkreten Schritts. Ein dekoratives Titelbild kann das Thema einführen, ersetzt aber keine Beispiele, die zum Verständnis nötig sind.

Prüfe den Ausschnitt auf Computer und Smartphone

Ein breites Bild kann auf dem Smartphone ganz anders aussehen. Der Browser schneidet möglicherweise die Seiten ab, sodass eine Person, ein Produkt oder ein wichtiges Detail am Rand verschwindet.

Sieh dir das Bild in seiner späteren Anzeigegröße an. Das Hauptmotiv muss auf beiden Geräten sichtbar bleiben. Liegt Text über dem Bild, sollte dahinter eine ruhige Fläche liegen. Gibt es dafür keinen geeigneten Platz, stelle den Text neben das Bild.

1. Setze das Bild in den tatsächlichen Abschnitt ein. Prüfe es mit der endgültigen Überschrift, Schaltfläche und dem umgebenden Text.
2. Prüfe das Seitenlayout in einer breiten und einer schmalen Ansicht. Achte auf abgeschnittene Gesichter, fehlende Produktdetails und Text über unruhigen Bildbereichen.
3. Passe Ausschnitt oder Motivposition an. Hat dein Editor eine Einstellung für den Bildfokus, lege ihn auf das wichtige Detail und prüfe die Vorschau erneut.
4. Kontrolliere die Seite auf einem Smartphone. Die Bildaussage und wichtige Beschriftungen müssen in der tatsächlichen Größe erkennbar bleiben.

Funktioniert ein Ausschnitt nicht für beide Größen, braucht die Website möglicherweise unterschiedliche Bildausschnitte für verschiedene Bildschirme. Der MDN-Leitfaden zu responsiven Bildern erklärt diese als Art Direction bezeichnete Lösung für die Person, die deine Seite erstellt.

Setze Stockfotos gezielt ein

Stockfotos können helfen, wenn du kein geeignetes eigenes Foto hast. Frage vor der Auswahl:

• Passt es eindeutig zum Unternehmen oder zur Dienstleistung?
• Wirkt es natürlich und glaubwürdig?
• Könnte dasselbe Foto auf fast jeder Website eines Wettbewerbers stehen?

Wirkt das Bild austauschbar, suche ein genauer passendes Motiv oder verwende ein echtes Foto deiner Arbeit, Produkte, Räume oder deines Teams. Eigene Fotos können Besuchern zeigen, was sie erwartet.

Ein Stockfoto kann ein allgemeines Thema illustrieren oder Stimmung vermitteln. Weniger geeignet ist es, wenn du dein tatsächliches Team, deine Räume oder abgeschlossene Arbeiten zeigen möchtest. Stelle es nicht als Beleg für ein von dir ausgeführtes Projekt dar. Ein passendes Stockfoto kann trotzdem besser sein als ein eigenes Foto, das zu dunkel, ablenkend oder unklar ist.

Sorge für einen stimmigen Bildstil

Bilder aus verschiedenen Quellen können zusammenpassen. Suche nach einer Gemeinsamkeit, etwa natürlichem Licht, einer ähnlichen Farbpalette oder einem einheitlichen fotografischen Stil.

Du musst nicht jedes Foto gleich bearbeiten. Die Seite sollte stimmig wirken, während jedes Bild zu seinem Abschnitt passt.

Beginne mit zwei oder drei Regeln: ähnliche Ausschnitte für Teamporträts, einheitliche Zuschnitte für Blogtitelbilder und natürliches Licht bei Projektfotos. Betrachte die Bilder gemeinsam auf der Seite. Tausche einen Ausreißer aus, bevor du einen starken Filter auf die gesamte Sammlung anwendest.

Kurze Checkliste vor der Veröffentlichung

• Du kannst erklären, welchen Beitrag das Bild im Abschnitt leistet.
• Es stellt das Unternehmen, Thema oder Beispiel zutreffend dar.
• Das Hauptmotiv bleibt im tatsächlichen Desktop- und Mobil-Layout sichtbar.
• Text und Schaltflächen sind lesbar; wichtige Informationen stehen auch als Seitentext bereit.
• Licht, Ausschnitt oder Farben passen zu den umgebenden Bildern.
• Du hast die Nutzungsberechtigung und gegebenenfalls erforderliche Quellen- oder Urheberangaben geprüft.

Bereite die ausgewählten Bilder für die Website vor

Nach der Auswahl helfen dir unsere Anleitungen, passende Bildgrößen zu wählen, Bilder ohne Verzerrung zu skalieren und sinnvolle Alt-Texte und Dateinamen zu schreiben.

Überlege außerdem, wie die Bildinformation Menschen erreicht, die das Bild nicht sehen können. Inhaltlich relevante Bilder brauchen eine passende Textalternative; rein dekorative Bilder erhalten in der Regel einen leeren Alt-Text. Das W3C-Tutorial zu Bildern erklärt die Auswahl anhand des Bildzwecks.