An einem Montagvormittag schaue ich mir für einen Website-Check die Seite eines Betriebs an. Auf der Startseite begrüßt mich ein Handschlag: zwei Hände vor weißem Hintergrund, dazu Hemdmanschetten. Darunter sitzt ein Team im Großraumbüro und schaut lachend auf einen Laptop.
Der Betrieb hat acht Mitarbeitende und kein Großraumbüro. Gelacht wird dort sicher auch, aber nicht über diesen Laptop.
Fotos sind das Erste, was jemand auf eurer Website sieht, noch bevor ein einziger Satz gelesen ist. Innerhalb weniger Sekunden vermitteln sie, ob sich das nach einem echten Betrieb oder nach einem Prospekt anfühlt. Gleichzeitig sind sie die häufigste Ursache dafür, dass eine Seite langsam lädt.
Früher habe ich das Thema auf drei Beiträge verteilt: Auswahl, Google und Bildgrößen. Wer Teil zwei gelesen hat, hat Teil drei nie gefunden, deshalb steht jetzt alles hier in einem Beitrag.
Welche Fotos auf eure Website gehören
Echte Menschen statt Stockfotos
Menschen schauen sich gern Menschen an, am liebsten aber die, die es im Betrieb tatsächlich gibt: euer Team, eure Räume und eure Hände bei der Arbeit. Ein mittelmäßiges echtes Foto schlägt ein perfektes Stockfoto, weil man ihm glaubt. Stockfotos können Lücken füllen, gehören aber nicht auf die Startseite.
Menschen im Zusammenhang zeigen
Ein Produkt allein auf weißem Hintergrund liefert eine Information. Zeigt ihr dasselbe Produkt in der Hand von jemandem, der es benutzt, erzählt es eine Geschichte. Bei Dienstleistungen ist es genauso: Eine Steuerberaterin im Gespräch mit einer Kundin vermittelt mehr als ihr Porträt vor einer weißen Wand.
Qualität, die man nicht bemerkt
Eure Fotos sollten scharf, gut belichtet und gerade sein. Gute Fotos fallen nicht auf, schlechte dafür umso mehr: Ein verwackeltes Bild auf der Startseite vermittelt schnell den Eindruck, dass auch sonst nicht so genau hingeschaut wird. Ein Shooting mit einer Fotografin ist deshalb meistens die bessere Investition als das dritte Plugin.
Abwechslung mit einer Linie
Verschiedene Perspektiven, Nahaufnahmen und Totale, Menschen und Details halten eure Seite lebendig. Die Bilder sollten aber aus derselben Welt kommen, mit ähnlichem Licht und ähnlichen Farben, die zum Design passen. Sonst schaut die Website aus wie ein Fotoalbum, in das drei Familien ihre Urlaubsbilder geklebt haben.
Weniger, dafür an der richtigen Stelle
Das wichtigste Bild gehört oben auf die Seite, wo jeder hinschaut. Danach reichen wenige gute Bilder, es muss keine Galerie mit vierzig Fotos vom Betriebsausflug sein. Meistens ist ein Bild pro Abschnitt völlig ausreichend.
Die richtige Größe: Pixel zählen, nicht ppi
Bei der Bildgröße passieren die meisten Fehler: Zu große Bilder machen die Seite langsam, zu kleine werden vom Browser vergrößert und sehen dann pixelig aus. Beides kostet Vertrauen, wenn auch auf unterschiedliche Art.
Für das Web zählen die Abmessungen in Pixeln, also Breite mal Höhe. Die oft genannten „72 ppi“ sind eine Einstellung aus der Druckwelt, die der Browser ignoriert. Ein Bild mit 1.200 Pixeln Breite ist am Bildschirm gleich groß, egal ob ihr 72 oder 300 ppi eingestellt habt.
Als Faustregel gilt: Ladet ein Bild so groß hoch, wie es auf der Seite höchstens angezeigt wird. Diese Größen helfen euch bei der Orientierung:
- Bild über die ganze Breite (Header, Hintergrund): etwa 1.920 Pixel breit
- Bild im Text oder in einer Spalte: etwa 800 bis 1.200 Pixel breit
- Beitragsbild im Blog: so, wie es die Vorlage vorgibt – bei mir 1.080 × 675 Pixel
- Vorschaubild, Porträt in einer Karte, Teamfoto im Raster: etwa 300 bis 600 Pixel
Achtet auch auf die Dateigröße: Normale Bilder sollten möglichst unter 150 KB bleiben, große Headerbilder höchstens um die 300 KB haben. Ein Foto direkt vom Handy bringt gern vier bis acht MB mit – das ist, als würdet ihr einen Möbelwagen schicken, um einen Brief zuzustellen.
Welches Format wofür
Vier Formate reichen für fast alles:
- WebP: der heutige Standard für Fotos im Web. Bei gleicher Qualität sind die Dateien deutlich kleiner als JPG, und alle aktuellen Browser können das Format anzeigen.
- JPG: das bewährte Format für Fotos und die richtige Wahl, wenn WebP nicht geht.
- PNG: eignet sich für Grafiken mit durchsichtigem Hintergrund, Screenshots und Bilder mit Schrift. Bei Fotos werden die Dateien meistens zu groß.
- SVG: eignet sich für Logos und Symbole. Weil das Format aus Formen statt aus Pixeln besteht, bleibt es in jeder Größe gestochen scharf. Für Fotos ist es ungeeignet.
GIF braucht ihr eigentlich nur noch für kleine Animationen, wobei es selbst dafür bessere Wege gibt.
So bereite ich Bilder vor
Dahinter steckt kein Geheimnis, sondern eine Routine mit vier Schritten, die ich erledige, bevor ein Bild auf eine Website kommt:
- Zuschneiden und auf die richtige Pixelgröße bringen. Ich mache das in Photoshop, ein kostenloses Online-Werkzeug wie „iLoveIMG“ tut es genauso.
- Speichern und nachschauen, wie groß die Datei ist.
- Wenn die Datei noch über 100 KB hat, komprimiere ich sie mit „TinyPNG“. Den Unterschied sieht man nicht, obwohl die Datei danach oft nur noch halb so groß ist.
- In WebP umwandeln, zum Beispiel mit „Convertio“.
Das klingt nach Aufwand, dauert pro Bild aber keine zwei Minuten. Plugins, die Bilder nachträglich verkleinern, helfen dabei, alte Sünden in der Mediathek aufzuräumen. Neue Bilder ladet ihr am besten gleich richtig hoch.
Was Google über eure Bilder wissen muss
Google kann Bilder inzwischen recht gut erkennen, weiß aber nicht, warum sie auf eurer Seite stehen. Dabei helfen ihm drei Dinge.
Ein sprechender Dateiname
Mit „IMG_838299.jpg“ kann niemand etwas anfangen, mit „badsanierung-wien-walk-in-dusche.webp“ schon. Verwendet Kleinbuchstaben und Bindestriche statt Leerzeichen und verzichtet auf Umlaute und Sonderzeichen. Gebt der Datei ihren Namen, bevor ihr das Bild hochladet, denn nachher wird das Umbenennen mühsam.
Der Alt-Text
Der Alt-Text beschreibt, was auf dem Bild zu sehen ist. Er hilft Menschen, die das Bild nicht sehen können und sich die Seite vorlesen lassen, und Suchmaschinen. Dafür reicht ein kurzer, ehrlicher Satz wie „Monteurin beim Einbau einer Walk-in-Dusche“. Eine Liste mit zehn Suchbegriffen hat dort nichts verloren.
Die Bildunterschrift, wo sie passt
Bildunterschriften werden erstaunlich oft gelesen, manchmal sogar öfter als der Text daneben. Wenn ein Bild etwas erklärt, etwa ein Vorher-Nachher, eine Grafik oder ein Projektfoto, lohnt sich deshalb ein Satz darunter.
Damit Bilder die Seite nicht bremsen
Mit der richtigen Größe und dem passenden Format habt ihr schon die halbe Miete. Den Rest erledigt die Technik:
- Komprimierung: entweder vor dem Hochladen (siehe oben) oder automatisch mit einem Plugin.
- Lazy Loading: Bilder weiter unten werden erst geladen, wenn jemand dorthin scrollt. WordPress macht das inzwischen von Haus aus, Caching-Plugins wie WP Rocket legen noch etwas nach.
- Fester Platz für jedes Bild: Sind Breite und Höhe bekannt, springt der Text beim Laden nicht herum. Das merkt man vor allem am Handy.
Wie schnell eure Seite tatsächlich lädt, zeigt euch ein kostenloser Test wie PageSpeed Insights von Google. Dort seht ihr auch, welche Bilder zu groß sind. Die Rückmeldung ist ziemlich direkt, aber hilfreich.
Häufige Fragen zu Website-Fotos
Wie groß sollen Bilder für eine Website sein?
Bilder sollten so groß sein, wie sie auf der Seite höchstens angezeigt werden: etwa 1.920 Pixel für Bilder über die ganze Breite und 800 bis 1.200 Pixel für Bilder im Text. Die Dateigröße bleibt möglichst unter 150 KB, bei großen Headerbildern bis etwa 300 KB.
Welches Bildformat ist das beste für Websites?
Für Fotos eignet sich WebP, ersatzweise JPG. Für Logos und Symbole verwendet ihr SVG, für Grafiken mit durchsichtigem Hintergrund oder mit Schrift PNG.
Brauchen Website-Bilder 72 dpi?
Nein, am Bildschirm zählen nur die Pixelmaße. Die dpi- oder ppi-Angabe spielt erst beim Druck eine Rolle.
Darf ich Stockfotos verwenden?
Ja, wenn ihr eine gültige Lizenz habt und sie sparsam einsetzt. Auf der Startseite, der Über-uns-Seite und im Teambereich funktionieren echte Fotos aus eurem Betrieb deutlich besser.
Tierfotos gehen immer 😉
Und jetzt ihr
Öffnet eure Startseite und schaut euch nur die Bilder an, lasst Text und Logo dabei einmal außen vor. Würde jemand, der euren Betrieb noch nie gesehen hat, daran erkennen, wer ihr seid und was ihr macht?
Wenn euch dort ein Handschlag vor weißem Hintergrund begrüßt, wisst ihr jetzt, wo ihr anfangen könnt.
Und falls ihr bei der Gelegenheit gleich die Ladezeit testet und kurz erschreckt: Willkommen im Club, das passiert mir bei meinen eigenen Seiten auch regelmäßig. Welches Bild auf eurer Website würdet ihr als Erstes austauschen?
