Deine Website hat Texte, die stimmen, und trotzdem wirkt sie austauschbar. Der Grund hängt oft nicht an den Worten, sondern an den Bildern.
Diese Lektion zeigt dir, wie du eine Bildsprache für deine Website entwickelst: Fotos und Grafiken, die Fragen deiner Besucher beantworten, statt nur Lücken zu füllen.
Kurzantwort
Was ist Bildsprache auf einer Website?
Die Bildsprache einer Website ist die Summe aller Fotos, Grafiken und Icons plus die Regeln, nach denen sie ausgewählt und behandelt werden. Eine gute Bildsprache beantwortet die drei Fragen jedes Besuchers: Was bekomme ich hier, wer macht das, und wie sieht das Ergebnis aus?
Bilder sind dabei Beweis, nicht Schmuck. Ein echtes Foto aus deinem Betrieb beantwortet die Vertrauensfrage besser als jedes geschriebene Versprechen.
📌 Für wen ist das relevant: Für Selbstständige und kleine Unternehmen, die ihre Website selbst bestücken oder eine Agentur briefen und wollen, dass die Bilder Anfragen bringen statt Ladezeit zu kosten.
- Jedes Bild bekommt einen Job, reine Dekoration fliegt raus
- Echte Fotos aus deinem Betrieb schlagen Stock-Material fast immer, auch vom Smartphone
- Am Ende steht die komplette Bildwelt der Schreinerei Brenner als übertragbare Vorlage
Das lernst du in dieser Lektion
Du kannst jedes Bild deiner Website einem Job zuordnen und reine Dekoration streichen.
Du kannst eine Foto-Einkaufsliste für einen Foto-Tag im eigenen Betrieb schreiben und weißt bei jedem Motiv, worauf es ankommt.
Du kannst Personenbilder so platzieren, dass Gesichter und Blickrichtung für deinen CTA arbeiten statt gegen ihn.
Du kannst deinen Bildbestand auf Familienähnlichkeit und Technikfehler prüfen und Ausreißer gezielt ersetzen.
Inhalt
01 ·
Bilder haben einen Job
Jedes Bild auf deiner Website tut eines von zwei Dingen: Es beantwortet eine Frage deines Besuchers, oder es dekoriert. Mehr Kategorien gibt es nicht, und diese Zuordnung ist der erste Handgriff der ganzen Lektion.
Die Fragen, die Besucher an eine Firmenwebsite mitbringen, sind erstaunlich stabil. Sie lauten: Was bekomme ich hier, wer macht das, und wie sieht das Ergebnis aus?
Dekoration ist nicht verboten, aber sie hat einen Preis. Jedes Zierbild kostet Aufmerksamkeit, die dann deiner Botschaft fehlt, und Ladezeit, die dein Besucher spürt. Ein Bild ohne Job muss diesen Preis wert sein, und das ist es fast nie.
Ein Rahmensatz vorweg, damit du weißt, worauf du dich stützt: Alles in dieser Lektion ist Handwerkswissen aus Gestaltung und Fotografie, keine Sammlung von Studienergebnissen, und für die Anwendung an deiner Seite reicht das vollkommen.
Die Schreinerei Brenner, die fiktive Handwerksfirma aus diesem Kurs, hatte in ihrem ersten Entwurf ein großes Bild in der Hero: ein Händedruck vor einer Weltkarte, gekauft aus einer Bilddatenbank. Es sagt nichts über Möbel, nichts über die Werkstatt und nichts über die Menschen dahinter. Ersetzt durch ein Foto vom Gesellen beim Einbau einer Massivholztreppe beantwortet dieselbe Fläche plötzlich zwei Besucherfragen auf einmal.
Schaubild: Deko-Bild und Job-Bild an der Brenner-Hero. Gleiche Fläche, gleiches Layout, aber nur das rechte Bild arbeitet für die Anfrage.
Damit du die Zuordnung systematisch machen kannst, hier die drei Besucherfragen als Tabelle, mit dem Bild-Job dahinter und dem passenden Brenner-Beispiel.
| Besucherfrage | Bild-Job | Beispiel Schreinerei Brenner |
|---|---|---|
| Was bekomme ich hier? | Das Angebot im Einsatz zeigen | Massivholztreppe beim Einbau im Kundenhaus |
| Wer macht das? | Echte Menschen bei echter Arbeit zeigen | Der Chef an der Hobelbank, das Team in der Werkstatt |
| Wie sieht das Ergebnis aus? | Fertige Projekte zeigen | Referenzfotos abgeschlossener Aufträge |
| Keine der drei Fragen | Dekoration: streichen oder ersetzen | Händedruck vor Weltkarte |
Dieselbe Zuordnung als Schaubild, damit du sie beim Sortieren deiner eigenen Bilder vor Augen hast.
Schaubild: die Frage-zu-Bild-Zuordnung. Jedes Bild deiner Seite sollte sich einer dieser drei Zeilen zuordnen lassen.
💡 Merke
Ein Bild, das keine Besucherfrage beantwortet, ist Dekoration. Dekoration kostet Aufmerksamkeit und Ladezeit und zahlt nichts zurück. Gib jedem Bild einen Job, oder gib die Fläche dem Inhalt zurück.
💡 Praxis-Tipp
Mach heute die Bild-Inventur: Leg eine Liste mit allen Bildern deiner Startseite an und schreib in eine zweite Spalte den Job jedes Bildes, also die Besucherfrage, die es beantwortet. Der Screenshot der Seite neben der Liste hilft, kein Bild zu übersehen.
Bleibt die Job-Spalte bei einem Bild leer, hast du Dekoration gefunden. Streich sie oder merk sie für den Austausch vor, denn die leeren Zeilen deiner Liste sind zugleich deine ersten Foto-Aufgaben für Sektion 02.
Für die Conversion heißt das: Bilder sind Beweis, nicht Schmuck. Das echte Werkstattfoto beantwortet die Frage, ob man dieser Firma trauen kann, besser als jedes geschriebene Versprechen daneben.
02 ·
Echt schlägt Stock
Stock-Fotos sind Bilder aus Datenbanken, die jeder kaufen kann, und genau das ist ihr Problem. Dein Besucher hat die lächelnde Frau mit dem Headset und die Business-Runde am Whiteboard schon auf dutzenden anderen Websites gesehen. Er kann selten benennen, woran er es erkennt, aber er erkennt es.
Für das Vertrauen ist das Gift. Ein austauschbares Bild sagt zwischen den Zeilen: Hier wollte niemand zeigen, wie es wirklich aussieht. Und eine Firma, die sich nicht zeigt, wirkt entweder verschlossen oder beliebig, beides schadet der Anfrage.
Ein brauchbares echtes Foto braucht dagegen keine teure Kamera, sondern vier Zutaten: einen echten Ort, echte Menschen, echte Arbeit und echte Ergebnisse. Die Werkstatt mit Spänen auf dem Boden schlägt das aufgeräumte Studio, weil sie nach genau der Firma aussieht, bei der man anfragen will. Perfektion ist hier nicht das Ziel, Wiedererkennbarkeit ist es.
Ein aktuelles Smartphone reicht für die meisten Website-Fotos aus, wenn zwei Dinge stimmen: das Licht und der Ausschnitt. Fotografiere bei Tageslicht am offenen Tor oder am Fenster statt unter der Neonröhre, und geh nah genug ran, dass die Arbeit das Bild füllt. Die Ausschnitt-Regeln im Detail bekommst du in Sektion 05.
Bleibt die Frage, wann Stock legitim ist. Zwei Fälle: abstrakte Themen ohne fotografierbares Motiv, etwa eine Seite über Datenschutz, und die Übergangslösung, bis eigene Fotos da sind. Wähl dann wenigstens untypisch, also ruhige Motive ohne grinsende Models, die zu deiner Farbstimmung passen und nicht nach Datenbank aussehen.
So sieht die Foto-Einkaufsliste aus, mit der die Schreinerei Brenner in ihren Foto-Tag geht. Jede Zeile stammt aus einer leeren Job-Spalte der Bild-Inventur.
| Motiv | Beantwortete Frage | Hinweis für die Aufnahme |
|---|---|---|
| Werkstatt im Überblick | Wer macht das? | Vormittags bei Tageslicht, Tore auf, Menschen im Bild |
| Geselle beim Treppeneinbau | Was bekomme ich hier? | Nah ran, Hände und Werkstück füllen das Bild |
| Chef und Team im Porträt | Wer macht das? | Ruhiger Hintergrund, jede Person einzeln im Hochformat |
| Drei fertige Projekte beim Kunden | Wie sieht das Ergebnis aus? | Gleiche Tageszeit und gleiche Bearbeitung wie der Rest |
| Detail: Oberfläche und Holzverbindung | Wie gut ist die Arbeit? | Jedes Motiv einmal quer und einmal hoch aufnehmen |
💡 Praxis-Tipp
Schreib heute deine eigene Foto-Einkaufsliste für einen Foto-Tag im Betrieb. Nimm die leeren Zeilen aus deiner Bild-Inventur und notier pro Bild drei Dinge: das Motiv, die Besucherfrage, die es beantwortet, und den Ort mit Uhrzeit.
Plane alle Aufnahmen für denselben Tag und dieselbe Tageszeit, dann bekommen die Bilder von allein das gleiche Licht. Warum das für die Wirkung entscheidend ist, siehst du in Sektion 04.
Für die Conversion heißt das: Ein Besucher, der deine echte Werkstatt und deine echten Leute sieht, hat die erste Vertrauensfrage beantwortet, bevor er eine einzige Zeile gelesen hat. Genau diese Sekunde entscheidet oft darüber, ob er weiterliest.
03 ·
Menschen zeigen, richtig
Gesichter ziehen Blicke an. Fotografen und Gestalter arbeiten seit jeher mit dieser Eigenschaft, denn wo ein Gesicht im Bild ist, schaut der Betrachter zuerst hin. Auf deiner Website ist das ein Werkzeug mit zwei Schneiden.
Es kann für dich arbeiten: Ein Foto mit echten Menschen macht aus einer anonymen Firma ein Gegenüber, und genau das baut Vertrauen auf. Es kann aber auch gegen dich arbeiten: Ein großes Model-Gesicht direkt neben dem Anfrage-Button zieht den Blick vom Button weg, und dein wichtigstes Element verliert gegen ein Gesicht, das nicht einmal zu deiner Firma gehört.
Die Blickrichtung der abgebildeten Person ist dabei dein feinstes Werkzeug. Der Betrachter folgt dem Blick im Bild, so wie er auch im Alltag dorthin schaut, wohin andere schauen. Eine Person, die Richtung Headline oder Button blickt, führt den Besucher genau dorthin, eine Person, die aus der Seite hinausschaut, führt ihn ins Leere.
ℹ️ Woher dieser Griff kommt
Blickführung ist altes Gestalterwissen. Maler nutzen Blicklinien und Zeigegesten seit Jahrhunderten, um den Betrachter durch ein Bild zu leiten, und die Werbefotografie arbeitet bis heute mit demselben Griff. Auf einer Website ist nur der Zielpunkt konkreter: der nächste Schritt, den dein Besucher gehen soll.
Schaubild: Blickrichtung als Werkzeug. Die Person im Bild lenkt den Besucherblick, und du entscheidest mit der Bildauswahl, wohin.
Die zweite Personenregel betrifft die Auswahl: Zeig echte Mitarbeiter mit Namen statt anonymer Models. Ein Porträt mit der Zeile “Jonas Brenner, Schreinermeister” darunter ist ein Versprechen mit Absender, ein Model-Bild ist eine Behauptung ohne. Wer namentlich auf der Website steht, steht erkennbar für die Arbeit ein, und genau so liest es der Besucher.
💡 Merke
Ein Gesicht ist das lauteste Element im Sichtfeld. Platzier es so, dass es für deinen nächsten Schritt arbeitet: mit Blickrichtung zur Headline oder zum Button, und nie als Konkurrenz direkt neben dem CTA.
💡 Praxis-Tipp
Mach heute den Blickrichtungs-Check: Öffne jede Seite mit Personenfotos und zieh mit dem Finger die Blicklinie jeder abgebildeten Person auf dem Bildschirm weiter. Notier pro Bild, wo die Linie endet.
Endet sie im Nichts oder außerhalb der Seite, tausch das Foto gegen eine Aufnahme, in der die Person Richtung Inhalt schaut, oder rück Headline und Button auf die Seite, in die geblickt wird. Beides kannst du ohne Designer entscheiden.
Für die Conversion heißt das: Personenbilder sind Blicklenkung. Richtig platziert übergeben sie den Besucher an deinen Anfrage-Button, falsch platziert sind sie sein stärkster Konkurrent.
04 ·
Konsistenz: eine Bildwelt statt Sammelsurium
Einzelne gute Bilder machen noch keine Bildsprache. Erst wenn deine Bilder als Familie wirken, entsteht der Eindruck einer Firma mit klarer Handschrift. Familienähnlichkeit heißt: ähnliches Licht, ähnliche Farbstimmung und die gleiche Behandlung über alle Bilder hinweg.
Gleiche Behandlung schließt die Motivart ein. Entweder deine Leistungs-Kacheln zeigen alle Menschen bei der Arbeit, oder alle zeigen das Produkt, aber nicht wild gemischt. Ein Wechsel ohne Grund liest sich wie die drei Buttonstile aus der Lektion zu den Design-Prinzipien: als Unterschied, der etwas bedeuten müsste und nichts bedeutet.
Die Rezepte für Einheitlichkeit sind unspektakulär. Fotografiere beim Foto-Tag alles zur gleichen Tageszeit am gleichen Ort, dann stimmt das Licht von allein. Bearbeite danach alle Bilder mit demselben Filter-Stil und beschneide sie nach derselben Logik, etwa immer nah an der Arbeit.
Für Illustrationen und Icons gilt dieselbe Regel in strengerer Form: ein Stil, eine Strichstärke, eine Farblogik. Ein feines Linien-Icon neben einem bunten Comic-Werkzeugkasten zerreißt jede Reihe. Nimm alle Icons aus einem einzigen Satz und gib ihnen eine einheitliche Farbe aus deiner Palette.
Schaubild: Sammelsurium und Bildfamilie im Kachelraster. Rechts wurde kein einzelnes Bild besser, nur die Behandlung wurde vereinheitlicht.
Der Prüfgriff dafür ist einfach: Leg alle Bilder einer Seite als kleine Vorschauen nebeneinander, so wie im Schaubild. In diesem Raster erkennst du Ausreißer sofort, das gelbstichige Handyfoto zwischen kühlen Profibildern oder das eine Stock-Bild zwischen echten Aufnahmen. Jeder Ausreißer kommt auf die Ersatzliste für den nächsten Foto-Tag.
💡 Merke
Bilder wirken als Familie oder gar nicht. Ähnliches Licht, ähnliche Farbstimmung, gleiche Behandlung: Das erreichst du mit einem Foto-Tag und einem einzigen Filter-Stil, und genau das trennt die gewachsene Website vom Sammelsurium.
Für die Conversion heißt das: Eine einheitliche Bildwelt liest der Besucher als Sorgfalt, und Sorgfalt im Auftritt lässt ihn auf Sorgfalt in der Arbeit schließen. Das Sammelsurium behauptet das Gegenteil, ganz ohne Worte.
05 ·
Technik, die man sieht: Format, Ausschnitt, Schärfe
Die beste Bildidee scheitert an sichtbarer Technik. Drei Fehler tauchen auf Selbermacher-Websites immer wieder auf: verlorene Ausschnitte, zu kleine oder unscharfe Bilder und verzerrte Proportionen. Alle drei erkennst und behebst du ohne Vorwissen.
Der erste Griff: Bilder gehören beschnitten. Das Motiv füllt den Rahmen, und verlorenes Drumherum fliegt weg, denn was die Fläche füllt, wirkt gewollt, und was darin schwimmt, wirkt zufällig. Geh beim Zuschneiden näher ran, als du dich zuerst traust, meistens gewinnt das Bild dadurch.
Schaubild: verlorenes Motiv und gefüllter Rahmen. Der Beschnitt ist die schnellste Verbesserung, die ein bestehendes Bild bekommen kann.
Der zweite Griff ist die Formatlogik, und sie ist Konvention, keine Vorschrift: Querformat für Hero-Flächen und Teaser, Hochformat für Personen, quadratisch für Kacheln und Raster. An dieser Aufteilung orientieren sich auch Baukästen und Themes, deshalb fährst du gut damit. Wer beim Foto-Tag jedes wichtige Motiv einmal quer und einmal hoch aufnimmt, hat später für jede Fläche passendes Material.
Der dritte Griff betrifft die Qualität: Zu kleine, unscharfe oder verzerrte Bilder ruinieren jeden Eindruck von Sorgfalt, und Verzerrung ist der schlimmste der drei Fehler. Ein in die Breite gezogenes Logo oder ein gestauchtes Porträt signalisiert, dass hier niemand hingesehen hat. Skaliere Bilder deshalb nur proportional und ersetze jede Aufnahme, die auf großen Flächen pixelig wird.
| Fehler | Woran du ihn erkennst | Behebung |
|---|---|---|
| Verlorener Ausschnitt | Das Motiv schwimmt klein in leerer Fläche | Beschneiden, bis das Motiv den Rahmen füllt |
| Zu klein oder unscharf | Auf großen Flächen pixelig oder matschig | Größere Originaldatei verwenden oder Motiv neu aufnehmen |
| Verzerrt | Kreise werden zu Eiern, Gesichter zu breit oder zu schmal | Nur proportional skalieren, Seitenverhältnis nie frei ziehen |
ℹ️ Zwei Pflichten jenseits des Sichtbaren
Jedes inhaltliche Bild braucht einen Alt-Text, also eine kurze Beschreibung des Bildinhalts für Menschen, die es nicht sehen können. Das gehört zur Barrierefreiheit und ist für viele Unternehmen inzwischen verpflichtend, die Details dazu stehen in der Lektion zur Barrierefreiheit nach dem BFSG.
Und jede Bilddatei kostet Ladezeit: Verkleinere Bilder vor dem Upload auf die tatsächlich benötigte Größe, kein Foto geht in Kamera-Originalgröße auf die Website. Wie sich Ladezeit messen lässt, behandelt der Beitrag zu den Core Web Vitals.
Für die Conversion heißt das: Technikfehler sieht der Besucher vor dem Inhalt. Ein scharfes, sauber beschnittenes Bild muss nichts beweisen, ein verzerrtes widerlegt deinen Qualitätsanspruch im Vorbeiscrollen.
06 ·
Die Brenner-Bildwelt komplett
Zeit, alles zusammenzusetzen. Die Schreinerei Brenner hat ihren Foto-Tag hinter sich, und ihre Startseite trägt jetzt eine komplette Bildwelt, in der jedes Bild seinen Job hat. Das Schaubild zeigt die Seite mit allen Bild-Flächen und den Aufgaben, die sie erfüllen.
Schaubild: die komplette Bildwelt der Brenner-Startseite. Jede Bildfläche ist mit ihrem Job beschriftet, und keine Fläche ist Dekoration.
Lies das Schaubild von oben nach unten wie ein Besucher. Die Hero zeigt die Treppe im Einbau und beantwortet als Erstes, was es hier gibt. Danach zeigen drei Referenzfotos das Ergebnis, das Werkstatt-Band und die Porträts mit Namen beantworten, wer dahintersteht, und kein einziges Bild ist Schmuck.
Genau diese Inventur führst du jetzt auf deiner eigenen Seite durch. Die Prüfliste fasst alle Handgriffe der Lektion in eine feste Reihenfolge, und jede Zeile kennst du bereits aus einer Sektion.
| Schritt | Prüffrage | Aus Sektion |
|---|---|---|
| 1. Job | Welche Besucherfrage beantwortet dieses Bild? | 01 |
| 2. Echtheit | Zeigt es meinen Betrieb, meine Menschen, meine Ergebnisse? | 02 |
| 3. Gesichter | Arbeitet jedes Gesicht mit seiner Blickrichtung für den nächsten Schritt? | 03 |
| 4. Familie | Wirken alle Bilder der Seite wie aus einer Hand? | 04 |
| 5. Technik | Rahmen gefüllt, scharf, unverzerrt, Alt-Text gesetzt? | 05 |
Experten-Tipp aus der Agentur
Beauftrage keinen Foto-Tag und kauf kein einziges Bild, bevor die Job-Liste steht. Leg zuerst fest, welche Fläche der Website welche Besucherfrage beantworten soll, und fotografier dann diese Liste ab, Position für Position. Wer ohne Liste fotografiert, kommt mit hundert Stimmungsbildern zurück und hat für die Hero trotzdem nichts Passendes.
Und prüf jedes Bild vor dem Upload mit einer einzigen Frage: Würde es auch auf der Website eines Wettbewerbers funktionieren? Wenn ja, ist es noch nicht deins.
Pascal Cabitza
Geschäftsführer Ostend Digital
Für die Conversion heißt das: Eine komplette Bildwelt führt den Besucher von der ersten Frage bis zur Anfrage, ohne dass er es merkt. Jedes Bild räumt einen Zweifel aus dem Weg, und am Ende bleibt nur noch der Klick auf den Button.
07 ·
💡 Recap
Bildsprache für deine Website in 30 Sekunden:
- Jedes Bild hat einen Job. Es beantwortet eine der drei Besucherfragen, also was bekomme ich, wer macht das, wie sieht das Ergebnis aus. Bilder ohne Job sind Dekoration und werden gestrichen
- Echt schlägt Stock. Echter Ort, echte Menschen, echte Arbeit, echte Ergebnisse, und das Smartphone reicht, wenn Licht und Ausschnitt stimmen. Stock nur für abstrakte Themen oder als Übergang, dann untypisch gewählt
- Gesichter sind laut. Sie ziehen den Blick zuerst an, deshalb gehören sie nie als Konkurrenz neben den CTA, und die Blickrichtung der Person zeigt auf Headline oder Button
- Bilder wirken als Familie. Ähnliches Licht, ähnliche Farbstimmung, gleiche Behandlung, bei Icons ein Stil und eine Strichstärke. Ein Foto-Tag zur gleichen Tageszeit und ein Filter-Stil reichen dafür
- Technik sieht man zuerst. Das Motiv füllt den Rahmen, skaliert wird nur proportional, unscharfe Bilder fliegen raus, und jedes inhaltliche Bild bekommt einen Alt-Text
- Die Bild-Inventur ist dein Werkzeug: Job, Echtheit, Gesichter, Familie, Technik als feste Prüfreihenfolge, und die leeren Zeilen werden zur Foto-Einkaufsliste für den nächsten Foto-Tag
08 ·
Selbstcheck: kannst du das anwenden?
Über deinem Kontaktformular liegt ein Stimmungsfoto: zwei Hände an einem Laptop, gekauft aus einer Bilddatenbank. Behalten oder streichen?
Erst die Job-Frage stellen: Welche Besucherfrage beantwortet das Bild? Zwei anonyme Hände am Laptop sagen nichts über dein Angebot, deine Leute oder deine Ergebnisse, das Bild ist Dekoration und kostet Aufmerksamkeit und Ladezeit. Streichen, oder die Fläche mit einem Bild besetzen, das einen Job hat, etwa einem Porträt der Person, die die Anfragen tatsächlich beantwortet.
Du hast am Samstag zwei Stunden Zeit für Fotos im eigenen Betrieb. Wie bereitest du den Termin vor, damit die Bilder nachher wirklich auf die Website passen?
Mit der Foto-Einkaufsliste aus der Bild-Inventur: pro leerer Job-Spalte ein Motiv, dazu die Frage, die es beantwortet, und Ort mit Uhrzeit. Auf die Liste gehören die vier Zutaten echter Fotos, also Ort, Menschen, Arbeit und Ergebnisse, und jedes wichtige Motiv einmal quer und einmal hoch. Alle Aufnahmen in dieselben zwei Stunden bei Tageslicht zu legen sorgt nebenbei für das einheitliche Licht der Bildfamilie.
Neben deinem Anfrage-Button steht ein großes Porträt, und die Person schaut aus der Seite heraus. Ist das ein Problem, und was tust du?
Ja, gleich ein doppeltes: Das Gesicht ist das lauteste Element im Sichtfeld und konkurriert direkt mit dem Button, und die Blickrichtung führt den Besucher zusätzlich ins Leere. Tausch das Foto gegen eine Aufnahme, in der die Person Richtung Button oder Headline schaut, oder rück den CTA auf die Seite, in die geblickt wird. Der Blickrichtungs-Check mit dem Finger auf der Blicklinie zeigt dir in einer Minute, ob es jetzt stimmt.
Deine Referenz-Galerie mischt gelbstichige Handyfotos, kühle Profibilder und zwei Stock-Motive. Wie gehst du vor, ohne alles neu zu fotografieren?
Erst den Familien-Check: alle Bilder als kleine Vorschauen nebeneinanderlegen, dann springen die Ausreißer ins Auge. Die beiden Stock-Motive fliegen zuerst, denn in einer Referenz-Galerie behaupten sie Ergebnisse, die nicht deine sind. Den Rest bringst du mit einem einheitlichen Filter-Stil und gleichem Beschnitt näher zusammen, und was danach immer noch heraussticht, kommt auf die Ersatzliste für den nächsten Foto-Tag.
Auf deiner Team-Seite ist ein Porträt sichtbar in die Breite gezogen, und das Hero-Bild wird auf dem großen Monitor pixelig. Was diagnostizierst du?
Zwei der drei klassischen Technikfehler: Verzerrung und zu geringe Auflösung. Das Porträt wird aus der Originaldatei neu eingesetzt und nur noch proportional skaliert, das Seitenverhältnis wird nie frei gezogen. Für die Hero suchst du die größere Originaldatei oder nimmst das Motiv neu auf, denn ein pixeliges Bild auf der größten Fläche der Seite widerlegt deinen Qualitätsanspruch als Erstes.
Alle Lektionen des Webdesign- und CRO-Kurses im Überblick →
Quellen und Stand (3 Einträge)
- W3C: “Understanding WCAG 2.2”, Erfolgskriterium 1.1.1 Non-text Content: Nicht-Text-Inhalte wie Bilder brauchen eine Textalternative (w3.org/WAI/WCAG22/Understanding, abgerufen 16.08.2026). Das ist der einzige normierte Bezug dieser Lektion. Quellentyp: Richtlinie, keine Interessenlage
- Alle übrigen Regeln dieser Lektion, darunter das Job-Prinzip, die Zutaten echter Fotos, die Blickführung über Gesichter, die Familienähnlichkeit der Bildwelt sowie Formatlogik und Beschnitt-Regel: verbreitete Handwerkspraxis aus Gestaltung, Fotografie und Webdesign, Einordnung Ostend Digital, Stand 08/2026. Sie sind im Text bewusst als bewährte Empfehlungen formuliert, nicht als Messwerte
- Das durchlaufende Beispiel “Schreinerei Brenner” ist frei erfunden und bezeichnet keine echte Firma. Alle sechs Schaubilder sind eigene Darstellungen mit grauen Platzhalterflächen statt echter Fotos, Ostend Digital, Stand 08/2026
Du willst eine Website, deren Bilder verkaufen statt nur zu dekorieren?
Wir entwickeln die Bildwelt deiner Website mit, vom Foto-Briefing über die Auswahl bis zur fertigen Seite, und begründen dir jede Bildentscheidung an ihrer Aufgabe.
