Bilder und Fotos für die Website – Auswahl, Maße und Links

Eine der am häufigsten gestellten Fragen an mich als Webdesignerin ist „Welche Bilder soll ich bloß auf meiner Website verwenden?“ Die Antwort darauf ist natürlich nicht in einem Satz zu beantworten, also habe ich einen Blogartikel daraus gemacht. Ich möchte dir hier zeigen:

• wie wichtig gute Bilder sind
• wo du Stockfotos bekommen kannst
• was du für ein Website-Fotoshooting beachten solltest
• wie du deine Bilder für Suchmaschinen optimieren kannst
• welche technischen Anforderungen es an deine Bilder gibt

Der Artikel wird regelmäßig erweitert, unter anderem kommt bald noch ein Abschnitt über KI-generierte Bilder mit Midjourney hinzu. Schau also gern immer mal wieder vorbei 🙂

Warum sind gute Bilder so wichtig für deine Website?

Der Spruch ist zwar alt, aber einfach die Wahrheit: „Ein Bild sagt mehr als 1000 Worte“. Bilder vermitteln Stimmung, können Informationen transportieren, Botschaften unterstreichen. Die richtigen Bilder unterstützen dich dabei, deinen Besucher*innen das „Hier bin ich richtig“-Gefühl zu vermitteln, was super wichtig für deine Website ist. Bilder bzw. Fotos können den Unterschied machen zwischen „Website wirkt professionell“ und „Website wirkt stümperhaft“ oder auch einfach nur „Website wirkt unstimmig“. Sie lockern Textwüsten auf, machen deine Website attraktiver und können Geschriebenes nochmal verdeutlichen (z. B. in Infografiken). Gerade wenn du als Personal Brand unterwegs bist, also du selbst deine eigene Marke bist, helfen dir die richtigen Bilder dabei, deine Markenidentität auch konsistent einzusetzen. Du solltest die Bilder also auf jeden Fall sorgfältig auswählen, damit sie deine Message unterstützen. Nutze im Zweifelsfall lieber kein Bild, oder nur ein Icon / Piktogramm statt eines schlechten Bildes.

Tipps zur Auswahl ansprechender Bilder für Ihre Website

Um die richtigen Bilder auszuwählen, solltest du vor allem die folgenden Punkte berücksichtigen:

• Was ist das Ziel des gezeigten Bildes? Soll es eher Emotionen wecken, Informationen vermitteln oder deine Markenidentität unterstreichen? Wenn dir das Ziel klar ist, kannst du die Bilder entsprechend besser auswählen.
• Passen die Bilder zum Inhalt der Website und passt jedes einzelne Bild insbesondere zum Text, der gerade an der Stelle wo es eingesetzt wird vermittelt wird? Vermeide eine sogenannte „Text-Bild-Schere“ – dass du also zum Beispiel im Text schreibst von „Ausgebrannt und am Ende sein“, man auf dem Foto aber eine erholte, glückliche Frau sieht.
• Ist die Bildqualität hervorragend? Die Bilder sollten scharf, gut belichtet und in hoher Auflösung sein (es sei denn, du hast aus künstlerischen Gründen z. B. extra unscharfe Bilder im Einsatz).
• Überlege dir vorher gut, ob die Bilder auch zu deiner Zielgruppe passen und auch wirklich deine Wunschkund*in abholen – wenn du z. B. vor allem Rentner*innen als Zielgruppe hast, nutze eher Fotos von älteren statt jüngeren Frauen. So kann sich deine Zielgruppe besser mit den gezeigten Personen identifizieren.
• Wenn du Stockfotos verwendest, versuche welche zu finden, die du nicht schon 100x auf anderen Websites gesehen hast.
• Investiere, wenn es dir irgendwie möglich ist, unbedingt einmal in ein professionelles Fotoshooting. Du brauchst zu Beginn meist gar nicht viele Fotos, oft reichen schon 5 gute Bilder. Der Unterschied zwischen Handy-Selfies und professionellen Fotografen-Fotos ist riesig und sie werden deiner Website einen komplett anderen – professionellen – Look geben!

Welches Bildformat du nutzen solltest

Pauschal gesagt:

Für Fotos, Bilder mit vielen Farbverläufen und Details nimmst du am besten JPG/JPEG (Joint Photographic Experts Group). Diese Bilder solltest du nicht nachträglich verändern, da sonst die Qualität leidet.

Für Logos, andere Bilder mit transparentem Hintergrund und Bilder, die du nachträglich nochmal bearbeiten (z.B. zurecht schneiden musst), solltest du PNG (Portable Network Graphics) verwenden. Die Dateigröße ist etwas größer als bei JPG, dafür bleiben sie auch nach weiterer Bearbeitung gestochen scharf.

Die Bedeutung der Bildgröße und -komprimierung für eine schnelle Ladezeit der Website

Nicht zu vernachlässigen ist die Bildgröße für eine Website. Denn das die Ladezeit ein sehr wichtiger Faktor ist – nicht nur für deine Besicher*innen, auch für Google – habe ich schon ausführlich in diesem Blogartikel beschrieben. Eine grobe Faustregel ist, dass deine Bilder möglichst unter 200 KB bleiben sollten – was gerade bei sehr großen Bildern, die sich über die gesamte Breite der Website erstrecken, nicht immer zu schaffen ist. Du kannst die Bilder jedoch vor dem Hochladen in deine WordPress Mediathek noch komprimieren – z. B. mit den kostenlosen Diensten wie tinypng.com oder compressjpg.

Um die Dateigröße klein zu halten hilft es auch, die Bilder nur so groß einzubinden, wie es überhaupt nötig ist. Falls du nur ein kleines Foto für eine Kundenstimme benötigst, muss dies nicht 2000 x 2000 Pixel groß sein. Du kannst dich ganz grob an diesen Vorschlägen für die Abmessungen bei Website-Bildern orientieren:

Weitere Tipps für die Optimierung deiner Bilder inkl. WordPress-Plugins, die dich dabei unterstützen, findest du hier.

Bilder für die Suchmaschinenoptimierung einsetzen

Bilder können dir sogar dabei helfen, dass deine Seite oder dein Blogartikel besser bei Google gefunden wird. Dazu solltest du:

• einen aussagekräftigen Dateinamen für deine Bilder verwenden, die das relevante Keyword (Infos dazu findest du in meinem SEO-Blogartikel) oder eine Beschreibung des Bildinhaltes enhalten (statt IMG1320.jpg nimm lieber „website-optimierung.jpg“)
• trage immer einen ALT-Text (alternativer Text) ein. Dieser wird angezeigt, falls dein Bild nicht geladen werden kann. Hier solltest du kurz und prägnant den Bildinhalt beschreiben, du kannst hier auch nochmal das Keyword verwenden
• Bildbeschreibung – hier kannst du nochmal den Inhalt und Kontext des Bildes beschreiben und ebenfalls relevante Keywords unterbringen

Was du sonst noch für gute Website-Bilder beachten solltest

• Bildsitemaps: Füge eine Bildsitemap zu deiner Website hinzu, um den Suchmaschinen zusätzliche Informationen über deine Bilder zu liefern. Eine Bildsitemap listet alle Bilder auf deiner Website auf und enthält relevante Metadaten wie Bild-URLs, Bildtitel und Bildbeschreibungen – dadurch können Suchmaschinen deine Bilder leichter indexieren und ranken. Du kannst dies z. B. mit kostenlosen WordPress-Plugins wie „RankMath“ oder „YoastSEO“ machen.
• Mobile Optimierung: Stelle sicher, dass deine Bilder für die mobile Ansicht optimiert sind, d.h. gut angezeigt werden können (es darf nichts Wichtiges abgeschnitten sein) und vor allem gut lesbar sind.
• Backlinks und Social Sharing: Hochwertige Bilder und insbesondere Infografiken haben eine höhere Wahrscheinlichkeit, geteilt und verlinkt zu werden. Achte darauf, dass deine Bilder für das Teilen in sozialen Medien optimiert sind, indem du Share-Buttons oder Links zu Social-Media-Plattformen bereitstellst (z. B. mit dem Plugin „Shariff“). Backlinks von anderen Websites, die auf deine Bilder verweisen, können ebenfalls zur Bild-SEO beitragen und somit dein Ranking verbessern.

Wo du hochwertige Fotos für deine Website finden kannst – Datenbanken für Stockfotos

Die wenigsten haben eine ausreichende Anzahl an Fotos für ihre Website zur Hand. Was also tun? Eine mögliche Lösung ist: Auf Stockfotos zurückgreifen! Hier musst du unbedingt genau die Lizenzbedingungen prüfen und einhalten, um nicht abgemahnt zu werden. Mögliche Stockfotos findest du auf:

• Canva*
• Pixabay
• Pixelio
• Shutterstock
• Getty Images
• Adobe Stock
• Unsplash
• Pexels

Websites für Mockups

Außerdem kannst du natürlich sogenannte Mockups selbst erstellen, das sind eine Art Vorschaubilder, die vor allem gern für Produkte genommen werden. Wenn du also eine PDF Datei oder einen Online Kurs hast, kannst du ein Mockup erstellen, um das ganze plastischer darzustellen und ansprechend aufzubereiten:

 

Die besten Websites für Mockups sind:

• ebenfalls Canva* (dort verwendest du dann Elemente → Rahmen, um dein Bild in einen bestimmten Rahmen reinzuziehen)
• Smartmockups
• Placeit
• Mockupworld

Tipps für ein Website-Fotoshooting

Es ist endlich soweit und dir steht ein professionelles Fotoshooting bevor? Super! Hier sind noch ein paar Tipps, um das Shooting bestmöglich vorzubereiten:

• Website-Planung: Überlege dir im Vorfeld, für welche Unterseiten du wie viele Fotos brauchst und notiere dir auch die jeweilige Stimmung oder den Textabschnitt, um passende Bilder zu machen. Geht es eher um etwas Ernstes oder darfst du herzhaft lachen? Was muss unbedingt mit aufs Foto, damit alles passt? Was sollen die Bilder vermitteln? Professionalität? Freude? Vertrauen? Kreativität? Da lässt sich viel machen! Erstelle dann am besten eine Liste mit Fotos, die du benötigst. Denke unbedingt auch an die unterschiedlichen Formate und lass einen ausgewogenen Mix aus Hochformat und Querformatbildern machen.
• Passende Location: Wähle eine Location, die zum Thema und Stil deiner Website passt. Das kann ein Büro, ein Studio, eine Außenkulisse oder ein spezieller Veranstaltungsort sein. Denke daran, dass der Hintergrund nicht zu überladen sein sollte, um den Fokus auf das Hauptmotiv zu lenken.
• Requisiten und Details: Überlege, ob du Requisiten oder Details verwenden möchtest, um die Bilder interessanter und aussagekräftiger zu machen. Requisiten können dazu beitragen, das Thema oder die Botschaft der Website zu unterstützen. Achte darauf, dass die Requisiten nicht zu überladen wirken und das Hauptmotiv nicht überdecken. Bei mir gab es z. B. einen schönen Blumenstraß, ein Notizbuch und natürlich meinen Laptop!
• Licht ist alles! Ohne passende Beleuchtung kann der Rest noch so super sein – die Bilder werden maximal halb so gut. Kläre also im Vorfeld, ob an der ausgesuchten Location auch ausreichend Licht vorhanden ist, oder wer welche Lampen organisieren muss.
• Konsistenz und Branding: Stelle sicher, dass die Bilder zur Konsistenz und zum Branding deiner Website passen. Verwende Farben, Schriften und Stile, die bereits auf der Website vorhanden sind (oder eingesetzt werden sollen), um einen einheitlichen Stil zu gewährleisten. Du kannst sogar Kleidung in deinen Markenfarben oder einer neutralen Farbe tragen, damit alles gut zusammenpasst.
• Mal nah, mal fern: Auf deiner Website kannst du es so halten wie im echten Leben: Du zeigst dich erst einmal von weiter weg, damit dich auch völlig fremde Menschen in Ruhe und mit Abstand kennenlernen können. Es ist uns oft unangenehm, wenn wir auf einer Website gleich in ein riesengroßes, fremdes Gesicht blicken. Achte also darauf, dass von dir sowohl Fotos von weiter weg mit großem Bildausschnitt gemacht werden, als auch von näher dran, die du dann z. B. auf deiner Über mich Seite verwenden kannst.
• Stimmungsfotos: Wenn es das Kontingent erlaubt, lass auch noch Fotos nur von der Umgebung / dem Set oder den Requisiten machen, die du dann quasi statt generischer Stockfotos auf deiner Website verwenden kannst. Falls du eine Praxis hast, könnten das z. B. Praxisräume sein, ansonsten vielleicht ein Notizbuch mit Blumen oder andere Arbeitsmaterialien. Die von den gleichen Fotografen gemachten Bilder werden genau den gleichen Stil, die gleiche Beleuchtung etc. haben wie die von dir gemachten Fotos und passen somit 100x besser in deine Website als Stockfotos von irgendwelchen Datenbanken.

Ich hoffe, die Tipps aus diesem Blogartikel haben dir weitergeholfen und du hast ganz viel Spaß bei der Auswahl der Bilder für deine Website. Schreib mir gern in die Kommentare, welches deine Lieblings-Stockfotowebsite ist und ob du schon Fotografenfotos gemacht hast!