1.8 Element #3: Bilder (Hero Image)

Im Prinzip gibt es 2 verschiedene Arten von Bildern, welche Du auf Deiner Website potenziell brauchst:

  1. Das persönliche Foto von Dir.
  2. Unterstützendes Bildmaterial (Fotos oder Illustrationen), insbesondere das sogenannte Hero Image: Also das Titelbild bzw. Stimmungsbild, welches auf der Startseite direkt als erstes gesehen wird und so auf einen Blick die Stimmung und Emotion prägen soll.

Der Vollständigkeitshalber: Falls Du physische Produkte verkaufst, dann wären Fotos der Produkte natürlich ebenfalls sehr wichtig (also speziell auch für Online Shops).

Schauen wir uns die 2 Arten von Bildern genauer an:

1. Das persönliche Foto von Dir


Deine Website kann grundsätzlich ganz ohne unterstützendes Bildmaterial auskommen.

Was aber meiner Meinung nach wirklich sehr zu empfehlen ist, ist ein persönliches Foto von Dir.

Deine Besucher und potenzielle Kunden wollen wissen, mit wem Sie es zu tun haben (darum ist die „Über uns“ oder „Team“ Seite neben der Startseite praktisch immer die am häufigsten besuchte Seite einer Website).

Muss das Foto vom Fotograf sein?

Nicht unbedingt. Ein „Schnappschuss“ von einem talentierten Hobby-Fotografen kann sehr symphatisch und persönlich rüberkommen und ist immer noch besser als gar kein Foto.

Aber: Die Qualität muss wirklich stimmen (also scharf, gut belichtet, keine unseriöse Umgebung/Hintergrund).

Im Zweifelsfall empfehle ich Dir wirklich zum Fotografen zu gehen. Ein professionelle Portrait Foto beim Fotografen machen zu lassen lohnt sich definitiv (und sollte für ca. 150.- machbar sein).

Ein schlechtes Foto in einer ansonsten tollen Website zieht einfach gleich den Gesamteindruck der Website herunter.

Ein aufwändiges Fotoshooting von Dir in Deiner Arbeitsumgebung bzw. „in Action“ ist für Dich als Selbständigen nicht unbedingt nötig (und kann je nachdem auch schnell 500-1000.- kosten, also sowies das Budget sprengen).

2. Das Hero Image (und weitere unterstützende Bilder)


Ein Bild sagt bekanntlich mehr als Tausend Worte.

Das Hero Image ist sozusagen das Standard Bild für Deinen Brand.

Einerseits ist es das erste Bild das ein neuer Besucher auf der Startseite sieht, andererseits soll es auch einen gewissen Wiedererkennungseffekt haben (indem Du z.B. das gleiche Bild als Titelbild auf Deinen Social Media Profilen verwendest).

Das Problem:

Die meisten Selbständigen wie Du und ich haben gar keine eigenen Fotos zur Verfügung, die wir als Hero Image verwenden könnten.

Einerseits, weil ein Fotoshooting wie schon erwähnt entsprechend kostet, andererseits weil wir meistens sowieso schlicht kein passendes interessantes Motiv hätten. Also sei es z.B. eine eindrucksvolle Arbeitsumgebung, Gebäude, Produkte „in Action“ oder einfach die natürliche Umgebung:


Glück ist, wenn man das Matterhorn, eines der bekanntesten Motive der Schweiz als Hero Image authentisch nutzen kann 😉

Und hier kommen sogenannte Stockfotos zum Zug.

Stockfotos (bzw. Stockfotografie) nennt man Fotos, welche „auf Vorrat“ (Vorrat = stock auf Englisch) gemacht worden sind.


Bevor ich Dir jetzt aber zeige, wo Du tolle (gratis und kostenpflichtige) Stockfotos findest:

Die grundsätzliche Frage zuerst: Brauchst Du überhaupt ein Hero Image?

Nein, nicht unbedingt. Wie schon gesagt: Du kannst tatsächlich ein tolles Webdesign haben, nur mit Einsatz von den gewählten Farben und Schriftarten (und natürlich dem eigentlichen Inhalt).

Aber: Wir müssen das Thema Minimalismus ja nicht auf die Spitze treiben 🙂

Und ein tolles Foto ist nunmal der einfachste Weg, Deiner Website noch etwas mehr Leben einzuhauchen, einen Blickfang zu haben, Texte aufzulockern und einfach insgesamt Dein Design etwas interessanter zu gestalten.

Hier also meine besten Tipps, wo Du tolle Bilder findest:

Wo Du Bilder findest (sowohl für Dein Hero Image als auch sonstiges unterstützendes Bildmaterial)


Was Du auf keinen Fall darfst: Einfach in Google oder auf fremden Websites Bilder herunterladen.

Im Zweifelsfall: Wenn nicht explizit angegeben ist, dass Du ein Bild verwenden darfst, musst Du davon ausgehen, dass das Bild geschützt ist (und Du es nicht verwenden darfst).

Du brauchst also eine andere Quelle für Deine Bilder.

Und zum Glück gibt es hier mittlerweile einige grossartige Websites dafür.

Hier die besten Websites mit Bildern, welche Du gratis und vor allem ohne Einschränkungen verwenden kannst (sprich, Du musst nicht einmal eine Quellenangabe machen):

  1. Unsplash ist mit Abstand die #1 mit der grössten Auswahl und Top Qualität (würde ich als erste Anlaufstelle empfehlen): https://unsplash.com/
  2. https://pixabay.com/
  3. https://www.pexels.com/
  4. https://gratisography.com/
  5. https://picjumbo.com/
  6. https://freerangestock.com/


Obwohl Du natürlich auch hier grundsätzlich die Bilder mit dem ganzen Internet „teilen“ musst, ist die Auswahl mittlerweile so riesig, dass Du die allermeisten Bilder nicht schon auf Hunderten Websites gesehen hast.

Kleiner Tipp für Unsplash: Wenn Du ein Bild anschaust, hast Du rechts unten den „Info“ Button, wo Du nachschauen kannst, wie häufig ein Bild heruntergeladen wurde (und damit die etwas „unverbrauchteren“ Fotos finden):



Für noch mehr Auswahl und vor allem exklusivere Fotos, musst Du auf kostenpflichtige Plattformen ausweichen.

Die grösste und bekannteste (aber auch sehr teure) Plattform ist GettyImages. Hier kann ein einzelnes Foto je nach gewünschter Grösse schnell mehrere Hundert Franken kosten.

Mittlerweile gibt es aber Anbieter, bei welchen Du bereits für wenige Franken ein Foto kaufen kannst.

Und ein paar Franken für ein Foto, dass dann dafür deutlich seltener gebraucht wird, ist es allemal wert.

Hier also die besten Anbieter, vom Teuersten zum Günstigsten:

  1. GettyImages (~335.-/Bild): https://www.gettyimages.ch/
  2. Stocksy (~75.-/Bild): https://www.stocksy.com/
  3. DepositPhotos (ab ~1.-/Bild): https://de.depositphotos.com/
  4. StockUnlimited (ab ~1.-/Bild): https://www.stockunlimited.com/


Falls Du anstatt einem Foto eine gezeichnete Grafik oder Illustration oder abstrakte Formen, Texturen oder Muster suchst, findest Du hier eine grosse Auswahl zu sehr günstigen Preisen:

  1. https://graphicriver.net/
  2. https://creativemarket.com/


Das aber einfach als Ergänzung. Mit dem Gratis Angebot solltest Du eigentlich meistens auskommen.

Überwältigt von der Auswahl? Hier einige konkrete Tipps:

Tipps für die Bilder-Auswahl


Zuerst die 2 häufigsten Fehler bzw. Negativ-Beispiele bei der Wahl der Bilder:

Fehler #1: Klischee-Stockfotos


Da muss ich wohl nicht viel dazu sagen: Verzichte auf Bilder, welche schon hundertfach gebraucht wurden und schlicht nicht authentisch wirken.



Hier und hier einige unterhaltsame Beispiele, was für Stockfotos man eben nicht verwenden sollte.

Fehler #2: Kein einheitlicher Bilder-Stil


Das ist etwas weniger offensichtlich, aber macht einen grossen Unterschied:

Selbst wenn die einzelnen Stockfotos für sich eigentlich hochwertig und authentisch sind: Wenn verschiedene Stile wild gemixt werden, sieht das ganze Design wieder sehr schnell chaotisch und amateurhaft aus:


Komplett unterschiedliche Bilder Stile, teilweise noch mit uneinheitlicher Schriftart ergänzt.

Wähle also einfach einen einheitlichen Stil. Das sieht nicht nur viel besser aus, sondern erleichtert Dir auch die Bilder-Wahl.

Hier einige Ideen und Beispiele, wie Du Dir einen einheitlichen Bilder-Stil zusammenstellen kannst (als Beispiel mit Unsplash.com):


Der Klassiker: Schwarz-Weiss. Du kannst auf Unsplash.com ganz einfach nach „black and white“ suchen:



Du kannst aber natürlich auch nach jeder anderen Farbe suchen, also z.B. gezielt nach Deiner Branding Farbe. Hier als Beispiel „blue“:



Wenn Du auf der Suche nach dem klassischen Business Stil bist, versuche es mit einer Suche nach „corporate“ oder „business“:



Du willst mehr einen natürlicheren, warmen und einladenden Business-Stil? Versuche es z.B. mit „people working together“ oder „meeting“:



Du willst nicht unbedingt ein Foto, sondern eine Illustration? Kein Problem, suche z.B. nach „illustration“ oder „abstract“:



Das kannst Du natürlich auch gezielt eingrenzen, z.B. mit „abstract blue“:



Und schliesslich mein persönlicher Tipp: Wenn du einfach nach „background“ suchst, findest Du sehr viele verschiedene Ideen, die perfekt als Hero Image geeignet sind (meist mit sehr gleichmässigen Flächen, damit Du einen guten Kontrast hast, wenn Text über dem Bild steht):



Du siehst:

Auch wenn Du nicht all zu kreativ bist: Wenn Du auf Unsplash.com einfach einmal etwas herumklickst, wirst Du sicher einige tolle Ideen und Inspiration finden 🙂

Wie Du Dein Hero Image auf der Website einsetzt


Grundsätzlich bist Du bei der Wahl des Hero Image völlig frei.

Du kannst aber in ein konkretes Problem laufen: Kontrast.

Das Hero Image verwendest Du ja als Hintergrundbild. Sprich: Es muss genügend Kontrast vorhanden sein, damit der Text darauf lesbar ist.

Wenn Du Glück hast, kannst Du das Bild 1:1 benutzen und hast mit weisser oder schwarzer Schriftfarbe genügend Kontrast:



Sobald Du aber ein Bild mit sowohl hellen als auch dunklen Stellen hast, kann der Text praktisch unleserlich werden:



Keine Sorge, das lässt sich ganz elegant lösen:

Du kannst einerseits das Bild verdunkeln:



Oder natürlich umgekehrt aufhellen:



Oder aber, Du färbst das Bild ganz einfach mit Deiner gewählten Branding Farbe ein:



Die genau Anleitung wie Du Dein Hero Image auf Deiner Website einfügst und einfärben kannst, zeige ich Dir dann im Modul 3 (soviel schon einmal vorab: Du wirst kein Bildbearbeitungsprogramm dafür brauchen – das geht direkt in WordPress 🙂 ).

Schau mir über die Schultern


Ich wusste, dass ich für meine Website eine simple, abstrakte Illustration als Hero Image wollte.

Einerseits, weil das wieder meinen Brand unterstützen soll (dynamisch / modern), andererseits ganz einfach, weil mir der Stil gefällt und ich es gerne simpel halte 🙂

Ich habe mich also ganz einfach auf den beiden oben erwähnten Websites speziell für Grafiken und Illustrationen (https://graphicriver.net/ & https://creativemarket.com/) durch Hunderte Bilder durchgeklickt.

Tipp, falls Du ebenfalls eine Illustration (bzw. Textur, Muster oder ähnliches) möchtest:

Wie oben gezeigt, kannst Du auch Illustrationen mit Deiner Branding Farbe einfärben.

Das funktioniert besonders gut, wenn Du gezielt nach Schwarz-Weiss Grafiken suchst. Also nach „black and white“ suchen, bzw. hier direkt die Links für die beiden Websites:


Ich habe mich schlussendlich für diese Grafik (ein Polygon Muster) entschieden, welches total nur 4$ kostete:


Link: https://graphicriver.net/item/black-and-white-geometric-backgrounds/9716646

Dieses werde ich dann noch ganz einfach mit meiner gewählten Branding Farbe einfärben und fertig. Simpel aber effektiv 🙂

Michael Brütsch

Webdesigner & WordPress Experte: Ich kreiere WordPress Websites, die Google liebt (aka Suchmaschinenoptimierung / SEO).

Schreibe einen Kommentar