Alt-Texte, Dateigrößen, WebP: Wie Bilder gleichzeitig schöner und schneller werden
Viele B2B-Websites haben das gleiche Dilemma: Sie wollen mit starken Bildern und Videos überzeugen, gleichzeitig bremst genau das die Ladezeit. Und dann kommt schnell die falsche Schlussfolgerung: „Dann lieber weniger echte Bilder.“ Das Gegenteil ist richtig. Sie brauchen authentische Inhalte, aber technisch sauber serviert.
Authentische Bilder und Videos sind im B2B kein Luxus, sondern ein Vertrauensbeweis. Stockmotive wirken austauschbar. Echte Aufnahmen von Prozessen, Menschen bei der Arbeit, Maschinen, Details und Umgebung reduzieren Zweifel. Der Besucher versteht schneller: Die können das wirklich. Die Kunst ist, diese Beweise so einzubinden, dass sie schnell laden und sauber wirken.
Warum Bilder oft langsam sind, obwohl sie gut aussehen
In der Praxis sind es fast nie „zu viele Bilder“, sondern falsche Bilddaten:
- Das Bild ist viel größer als es auf der Website angezeigt wird.
- Das Format ist alt (z. B. PNG oder JPG, obwohl WebP oder AVIF besser wäre).
- Es fehlt eine sinnvolle Kompression.
- Die Seite lädt auch Bilder, die noch gar nicht im Sichtbereich sind.
- Das wichtigste Bild oben auf der Seite bekommt keine Priorität.
Google selbst empfiehlt für WebP: kleinere Dateien bei vergleichbarer Qualität, sowohl verlustbehaftet als auch verlustfrei, und das kann die Seitenladezeit deutlich entlasten.
Google for Developers
Die drei Hebel, die fast immer funktionieren
1. Richtig dimensionieren
Das Foto muss in der Pixelgröße geliefert werden, in der es tatsächlich gebraucht wird. Ein Klassiker: 6000 Pixel breite Kamera-Datei, die auf der Website nur 1200 Pixel breit angezeigt wird. Das ist verschenkte Ladezeit. Für eine saubere Lösung braucht es passende Größen für Desktop und mobil, idealerweise als responsive Bilder (WordPress macht das grundsätzlich schon über srcset, wenn das Theme es korrekt nutzt).
2. Modernes Format nutzen: WebP (und ggf. AVIF)
WebP ist sehr breit unterstützt und in vielen Fällen der schnellste Weg zu deutlich kleineren Dateien. Die globale Browser-Unterstützung liegt bei über 95 Prozent, damit ist WebP im Alltag ein sicherer Standard.
caniuse.com
Wenn Sie noch weiter optimieren wollen, kann AVIF zusätzlich sinnvoll sein, je nach Motiv. MDN empfiehlt ebenfalls moderne Formate wie WebP oder AVIF und den Vergleich der Ergebnisse.
MDN Web Docs
3. Kompression, aber mit Augenmaß
Kompression ist nicht der Feind der Qualität. Sauber komprimiert sieht ein Web-Bild praktisch identisch aus, lädt aber deutlich schneller. Entscheidend ist: lieber kontrolliert komprimieren als „Originalqualität“ hochladen und hoffen, dass es schon passt.
Alt-Texte: klein, aber wirkungsvoll
Alt-Texte sind kein SEO-Zauberspruch. Sie sind eine Beschreibung des Bildes im Kontext, vor allem für Barrierefreiheit und für Suchmaschinenverständnis. Google empfiehlt, Bilder so bereitzustellen, dass Suchmaschinen sie verstehen können, inklusive sinnvoller Beschreibungen. Google for Developers
Wichtig: Wenn ein Bild rein dekorativ ist und der Inhalt ohne dieses Bild vollständig wäre, ist ein leerer Alt-Text korrekt (alt=““). Das ist auch eine gängige Empfehlung in Googles Schreib- und Accessibility-Leitfäden. Google for Developers
Praxisregel für Alt-Texte
Beschreiben Sie nicht, was Sie gerne wären, sondern was zu sehen ist, passend zur Seite. Nicht „beste Industriequalität“, sondern „Verpackungsmaschine in der Endmontage, Blick auf Greifer und Sensorik“. Kurz, konkret, ohne Keyword-Stapeln.
Video macht Mut, wenn es richtig eingesetzt wird
Viele Firmen haben Hemmungen bei Video, weil sie Angst vor Aufwand haben. Dabei gilt im B2B: Ein kurzes, echtes Prozessvideo wirkt oft stärker als jede Hochglanz-Animation. Es zeigt Realität und Kompetenz.
Technisch gilt: Ein Video sollte nicht als riesiges Autoplay-Ungetüm die Startseite blockieren. Setzen Sie auf sinnvolle Einbindung: Vorschaubild, Klick zum Start, oder Video erst laden, wenn es wirklich gebraucht wird. Große GIFs sollte man ohnehin vermeiden, hier sind Videoformate meist effizienter.
WordPress und Divi: So wird es im Alltag beherrschbar
Mit WordPress lassen sich moderne Bildformate heute sehr gut integrieren, je nach Setup über Optimierungs-Plugins oder über den Server-Workflow. In Divi ist der entscheidende Punkt die Disziplin: Bilder in sinnvoller Größe hochladen, einheitliche Bildformate nutzen, nicht jeden Bereich mit Dekoration überladen, und das wichtigste Bild im ersten Bildschirmbereich gezielt priorisieren.
Kurz gesagt: Authentische Inhalte gewinnen. Technik sorgt dafür, dass sie auch schnell ankommen.
Mini-Checkliste: In 15 Minuten den größten Bild-Bremser finden
- Welches Bild ist auf der Startseite das größte sichtbare Element?
- Ist es in passender Pixelgröße exportiert oder viel zu groß?
- Liegt es als WebP vor?
- Hat es einen sinnvollen Alt-Text, oder ist es nur Deko?
- Werden Bilder unterhalb des sichtbaren Bereichs erst später geladen?
- Gibt es unnötige Slider oder übergroße Hintergrundbilder?
Unser Fazit
Authentische Bilder und Videos sind im B2B ein Vorteil, kein Risiko. Sie machen Leistung sichtbar und bauen Vertrauen auf. Wenn Dateigrößen, Formate und Alt-Texte sauber umgesetzt sind, werden Inhalte gleichzeitig schöner, schneller und wirksamer.
Wenn Sie möchten, mache ich einen kurzen Webseiten-Check mit Fokus auf Bild- und Video-Performance: Startseite und die drei wichtigsten Leistungsseiten, inklusive konkreter Liste, welche Bilder Sie wie umstellen sollten (Größe, Format, Priorität, Alt-Text).
FAQs:
Warum sind authentische Bilder im B2B so wichtig?
Weil sie Vertrauen schneller aufbauen als Behauptungen. Echte Motive zeigen Prozesse, Größenordnung und Kompetenz und reduzieren Zweifel, ob ein Anbieter wirklich liefern kann.
Machen viele Bilder eine Website automatisch langsam?
Nein. Meist ist nicht die Anzahl das Problem, sondern falsche Bilddaten: zu große Pixelmaße, falsches Format, fehlende Kompression oder unnötiges Laden außerhalb des Sichtbereichs.
Was ist der häufigste Fehler bei Bildgrößen?
Originaldateien aus der Kamera hochzuladen, obwohl auf der Website nur ein Bruchteil der Pixel benötigt wird. Das kostet Ladezeit, ohne dass die Bildwirkung besser wird.
Was bringt WebP gegenüber JPG oder PNG?
WebP liefert häufig deutlich kleinere Dateien bei vergleichbarer Bildqualität. Dadurch laden Seiten schneller, ohne dass die Bildwirkung leidet.
Sollten wir WebP oder AVIF verwenden?
WebP ist heute ein sehr sicherer Standard mit breiter Unterstützung. AVIF kann noch kleiner sein, ist aber je nach Motiv und Workflow nicht immer die erste Wahl. In der Praxis ist WebP für viele Unternehmen der beste Start.
Was sind gute Alt-Texte und warum sind sie wichtig?
Alt-Texte beschreiben ein Bild im Kontext, vor allem für Barrierefreiheit und für Suchmaschinenverständnis. Gute Alt-Texte sind kurz, konkret und beschreiben, was zu sehen ist, ohne Werbephrasen oder Keyword-Stapeln.
Müssen alle Bilder einen Alt-Text haben?
Nein. Rein dekorative Bilder sollten einen leeren Alt-Text haben, damit Screenreader nicht unnötig stören. Inhaltstragende Bilder sollten einen sinnvollen Alt-Text bekommen.
Wie kann Video eingesetzt werden, ohne die Ladezeit zu zerstören?
Video sollte leichtgewichtig eingesetzt werden: kurz, ohne Ton, stark komprimiert, mit Posterbild. Bereiche wie der Footer sollten Video erst laden, wenn der Nutzer dorthin scrollt. So bleibt der erste Eindruck schnell.
Was sind die schnellsten 80/20-Maßnahmen für Bild-Performance?
Hero-Bild richtig dimensionieren und als WebP ausliefern, unnötige Slider vermeiden, Bilder unterhalb des sichtbaren Bereichs verzögert laden, Dateigrößen konsequent komprimieren und Alt-Texte sauber setzen.
