Nimm eine beliebige Website, die dich in den ersten Sekunden verloren hat, und scrolle nach oben. Wahrscheinlich hatten die Bilder damit zu tun. Ein Stockfoto lächelnder Fremder, die nichts mit den Menschen zu tun haben, die das Unternehmen wirklich bedient. Ein Titelbild, so vage, dass es zu jedem Unternehmen in jeder Branche passen könnte. Oder gar keine Bilder, sodass die Seite leer und unfertig wirkt. Bilder auf einer Website sind keine Dekoration. Sie sind Kommunikation. Dieser Artikel zeigt, was Website-Bilder wirklich leisten, wie du die richtigen auswählst, wo sie auf jeder Seite hingehören und was passiert, wenn du es falsch machst.
Besucher verarbeiten Bilder schneller als Worte. Bevor jemand deine Überschrift liest, hat sein Gehirn aus dem Bild schon einen ersten Eindruck gebildet. Deine Bilder führen also ein Argument für dein Unternehmen, bevor du selbst eines führen kannst. Die Frage ist, ob es das Argument ist, das du führen willst.
Was leisten Website-Bilder eigentlich?
Jedes Bild auf deiner Website sagt einem Besucher etwas. Das Titelbild deiner Startseite sagt: "So ein Unternehmen sind wir, und für diese Menschen sind wir da." Das Foto auf deiner Über-uns-Seite sagt: "Hier arbeiten echte Menschen." Das Produktfoto auf deiner Leistungsseite sagt: "Das bekommst du, wenn du mit uns arbeitest."
Sind diese Signale klar und relevant, fühlen sich Besucher orientiert. Sind sie vage oder allgemein, fühlen Besucher nichts, und das ist das schlechteste Ergebnis. Wer nichts fühlt, hat keinen Grund weiterzulesen.
Bilder lenken auch, wohin der Blick geht. Das ist der Kern der visuellen Hierarchie einer Seite. Ein gut platziertes Bild zieht die Aufmerksamkeit auf den Abschnitt, der zählt. Ein schlecht platziertes teilt die Aufmerksamkeit und verunsichert den Besucher, wohin er als Nächstes schauen soll. Jedes Bild sollte seinen Platz verdienen, indem es dem Besucher hilft, in die richtige Richtung zu gehen.
Echte Fotos oder Stockfotos: Ist das wichtig?
Ja. Mehr, als die meisten erwarten.
Besucher erkennen Stockfotos besser als vor fünf Jahren. Der perfekt ausgeleuchtete Besprechungsraum mit vier bunt gemischten Fachleuten, die vor einem Laptop nicken. Der Handschlag vor einer Skyline. Die lächelnde Frau mit der Kaffeetasse. Diese Bilder sind so verbreitet, dass Besucher eine Art visuelle Immunität entwickelt haben. Sie sehen sie und nehmen nichts wahr.
Echte Fotos tun das Gegenteil. Ein Foto deines echten Ladengeschäfts, deines echten Teams, deiner echten fertigen Arbeit. Diese Bilder sind nur für dich spezifisch. Wer sie sieht, bekommt den Beleg, dass hinter der Website ein echtes Unternehmen steht, und das ist eines der wertvollsten Dinge, die ein Bild vermitteln kann. Selbst ein Handyfoto bei gutem Licht wirkt oft besser als ein poliertes Stockbild, weil es echt ist.
Trotzdem hat Stockfotografie ihren Platz. Für Blogartikel, zur Veranschaulichung abstrakter Konzepte und für zweitrangige Bildplätze, bei denen Spezifisches weniger zählt, erfüllt ein gut gewähltes Stockfoto seinen Zweck. Die Regel: Nutze echte Fotos, wo Vertrauen auf dem Spiel steht, und Stockfotos, wo das Bild nur den Inhalt unterstützt, statt etwas über dein Unternehmen zu behaupten.
Wie wählst du das richtige Bild für jede Seite?
Frag dich, bevor du nach einem Bild suchst, welche Aufgabe es auf dieser bestimmten Seite erfüllen soll.
Auf deiner Startseite muss das Titelbild vermitteln, was du tust und für wen, bevor jemand ein Wort liest. Könnte ein Besucher allein dein Titelbild ansehen und hätte keine Ahnung, in welcher Branche du arbeitest, erfüllt das Bild seine Aufgabe nicht.
Auf deiner Über-uns-Seite muss das Bild persönlich sein. Zeige die Menschen. Zeige den Raum. Zeige etwas, das das Unternehmen menschlich und konkret wirken lässt statt firmenhaft und anonym.
Auf einer Leistungs- oder Produktseite zeigst du das Ergebnis. Ein Vorher-nachher für einen Renovierungsbetrieb. Ein Screenshot des Dashboards für ein Software-Tool. Ein Foto des fertigen Gerichts für einen Catering-Service. Ergebnisbilder überzeugen mehr als Prozessbilder, weil sie die Frage beantworten, die ein Besucher wirklich stellt: Was habe ich, wenn das fertig ist?
Erst wenn du die Aufgabe kennst, suchst du das Bild. Nicht umgekehrt.
Was lässt ein Bild gegen dich arbeiten?
Irrelevanz
Ein Bild, das nichts Konkretes über dein Unternehmen, deine Leistung oder deinen Kunden sagt, zeigt dem Besucher, dass niemand sorgfältig über die visuelle Erfahrung der Website nachgedacht hat. Dieser Eindruck bleibt hängen.
Missverhältnis
Ist dein Text warm und im Gesprächston, deine Bilder aber kalt und firmenhaft, wirkt die Seite uneinheitlich. Besucher spüren diesen Misston, auch wenn sie ihn nicht benennen können. Stimmung von Bild und Text müssen zusammenpassen.
Lange Ladezeiten
Große, unkomprimierte Bilder sind der häufigste Grund, warum Websites langsam laden. Eine Seite, die auf dem Handy länger als drei Sekunden lädt, verliert einen erheblichen Teil ihrer Besucher, bevor etwas zu sehen ist. Jedes Bild, das du hochlädst, sollte fürs Web komprimiert sein. Die meisten Website-Plattformen übernehmen einen Teil davon automatisch, aber du solltest wissen, was du hochlädst. Wie sich die Geschwindigkeit einer Website auf Besucher und Rankings auswirkt, zeigt der Artikel dazu im Gesamtbild.
Fehlender Alt-Text
Jedes Bild auf deiner Website braucht im Feld für den Alt-Text eine kurze Beschreibung dessen, was es zeigt. Das ist aus zwei Gründen wichtig. Besucher mit Screenreadern verlassen sich auf den Alt-Text, um zu verstehen, was ein Bild zeigt. Suchmaschinen nutzen den Alt-Text, um Bilder zu indexieren. Wer ihn weglässt, verliert schnell Barrierefreiheit und SEO-Wert.
Wo sollten Bilder auf deinen Seiten erscheinen?
Eine allgemeingültige Regel für die Bildplatzierung gibt es nicht, aber einige Muster funktionieren verlässlich.
Setze dein stärkstes Bild dorthin, wo Besucher zuerst hinsehen. Auf den meisten Seiten ist das der obere Bereich, im sichtbaren Teil ohne Scrollen. Scrollt ein Besucher nach unten, bevor er sich zum Lesen entscheidet, fängt der zweite Bildplatz in der Seitenmitte ihn mitten im Scrollen ab. Ein drittes Bild weiter unten auf einer langen Seite holt Besucher zurück, die schon fast bis zum Ende gelesen haben.
Nutze Bilder, um lange Textabschnitte aufzulockern, aber nur, wenn das Bild etwas beiträgt. Ein Bild, das die Aussage im Absatz daneben veranschaulicht, erfüllt eine Aufgabe. Ein Bild, das nur dort steht, weil der Abschnitt zu lang wirkte, ist Füllmaterial, und Besucher merken das.
Auf dem Handy verschiebt sich die Bildplatzierung, weil der Bildschirm schmal ist und Bilder untereinander gestapelt werden. Ein Bild, das auf dem Desktop neben dem Text steht, erscheint auf dem Handy darüber oder darunter. Teste, wie jede Seite auf dem Handy aussieht, und prüfe, ob das Bild an seiner neuen Position noch Sinn ergibt. Das gehört dazu, damit deine Website auf jeder Seite den Grundsätzen von responsivem Design folgt.
Welches Dateiformat sollten deine Bilder haben?
Die Kurzfassung:
- JPEG für Fotos. Kleine Dateigröße, hohe Qualität, funktioniert überall.
- PNG für Logos, Icons und alles mit transparentem Hintergrund oder scharfer Schrift.
- WebP für beides, wenn deine Plattform es unterstützt. Es erzeugt bei gleicher Qualität kleinere Dateien als JPEG und PNG. Die meisten modernen Browser kommen problemlos damit zurecht.
- SVG für Icons und einfache Illustrationen. Skaliert perfekt auf jede Größe bei winzigen Dateigrößen.
Als Dateigröße solltest du bei normalen Seitenbildern unter 200 Kilobyte bleiben. Titelbilder dürfen bis etwa 400 Kilobyte groß sein. Alles Größere muss vor dem Hochladen komprimiert werden. Ein Fünf-Megabyte-Foto vom Handy hat auf einer Webseite nichts verloren.
Was ist Alt-Text und warum braucht ihn jedes Bild?
Alt-Text ist eine kurze schriftliche Beschreibung, die einem Bild angehängt ist. Er steht im Bild-Tag auf der Seite, ist für sehende Besucher unsichtbar, wird aber von Screenreadern und Suchmaschinen gelesen. Beide brauchen ihn, um zu verstehen, was deine Bilder zeigen.
Für die Barrierefreiheit ist der Alt-Text der Weg, wie Besucher mit Screenreadern Bilder auf deiner Website erleben. Ohne ihn hören diese Besucher nichts, wenn das Bild lädt, und es entsteht eine Lücke in dem, was du vermitteln wolltest. Für SEO gilt: Suchmaschinen sehen Bilder nicht so wie Menschen. Über den Alt-Text verstehen sie, was ein Bild zeigt und ob es für die Seite relevant ist, die es unterstützt.
Alt-Text gut zu schreiben heißt, konkret und schlicht zu beschreiben, was tatsächlich im Bild ist. Ein Foto einer fertigen Küchenrenovierung bekommt einen Alt-Text wie "weiße Küche im Landhausstil mit Marmorarbeitsplatten nach der Renovierung" statt "Küchenfoto" oder "Bild1". Passt dein Keyword natürlich in die Beschreibung, nimm es auf. Aber schreib zuerst für die Beschreibung. Alt-Text, der nur Keywords wiederholt, verfehlt beide Zwecke.
Jedes Bild, das du hochlädst, sollte einen Alt-Text haben, bevor die Seite online geht. Das dauert pro Bild weniger als eine Minute und wirkt sich darauf aus, wer deinen Inhalt nutzen kann und wie deine Seiten ranken.
So gehst du mit Bildern in WEMASY um
Der Website-Builder von WEMASY enthält Bildblöcke, die du in jeden Seitenabschnitt einfügst. Du lädst direkt im Builder hoch, positionierst und veränderst die Größe ohne Code und ergänzt den Alt-Text im selben Schritt. Bilder werden automatisch responsiv ausgeliefert und passen sich jeder Bildschirmgröße an, ohne dass du getrennte Versionen für Desktop und Handy erstellen musst.
Seitenabschnitte in WEMASY unterstützen Bilder neben Text in flexiblen Spaltenlayouts oder als Hintergrund in voller Breite für Abschnitte, bei denen ein starkes Bild den Ton setzt. In beiden Fällen bleibt das Bild an den Inhalt gebunden, den es unterstützt, statt lose im Layout zu schweben.
Was enthalten ist, siehst du beim WEMASY Website-Builder. Die Tarife findest du auf der Preisseite.
Häufig gestellte Fragen zu Website-Bildern
Brauche ich professionelle Fotos für meine Website?
Professionelle Fotos machen auf wichtigen Seiten einen echten Unterschied, besonders auf deiner Startseite und Über-uns-Seite, wo sich Vertrauen bildet. Für zweitrangige Bilder, Blogartikel und unterstützende Visuals reicht ein gut ausgeleuchtetes Foto mit einem modernen Handy. Wichtig ist, dass das Bild echt ist und zu deinem Unternehmen passt, nicht, dass es ein Profi aufgenommen hat. Mit dem Website-Builder von WEMASY richtest du das direkt auf deiner Website ein.
Wie viele Bilder sollte eine Startseite haben?
Genug, um die Abschnitte zu unterstützen, aber nicht so viele, dass die Seite überladen wirkt oder langsam lädt. Ein starkes Titelbild, ein bis zwei Bilder im Hauptteil der Seite und optional ein Team- oder Arbeitsplatzfoto weiter unten ist für die meisten Startseiten kleiner Unternehmen eine sinnvolle Struktur. Jedes Bild sollte seinen Platz verdienen, statt Fläche zu füllen.
Kann ich Bilder von Stockfoto-Seiten auf meiner Website nutzen?
Ja, unter Bedingungen. Stockfoto-Seiten bieten Bilder unter Lizenzen an, die kommerzielle Nutzung erlauben, aber prüfe die Bedingungen jedes Bildes, bevor du es nutzt. Die praktische Einschränkung: Diese Bilder erscheinen auf vielen anderen Websites. Nutze sie deshalb für unterstützende und zweitrangige Bildplätze, nicht als wichtigstes Bild auf Seiten, bei denen Vertrauen zählt, wie deine Startseite oder Über-uns-Seite.
Welche Größe sollten Bilder haben, die ich auf meine Website hochlade?
Komprimiere vor dem Hochladen. Ziel sind unter 200 Kilobyte für die meisten Seitenbilder und unter 400 Kilobyte für Titelbilder. Nutze JPEG für Fotos, PNG für Logos und Bilder mit Transparenz und WebP, wenn deine Plattform es unterstützt. Verkleinere das Bild vor dem Hochladen immer auf die maximale Breite, in der es angezeigt wird, statt es den Browser herunterskalieren zu lassen.
Beeinflussen Bilder das Ranking meiner Website in der Suche?
Ja, auf zwei Arten. Große, unkomprimierte Bilder verlangsamen deine Seite, und Suchmaschinen berücksichtigen das beim Ranking. Bilder ohne Alt-Text lassen die Chance aus, Suchmaschinen zu sagen, was die Seite enthält. Richtig dimensionierte Bilder mit beschreibendem Alt-Text tragen zu Ladegeschwindigkeit und Sichtbarkeit in der Suche bei.