Bilder und Ladezeit: der KMU-Selbst-Check
Von Roland Hentschel
Deine Website lädt zäh, und du weißt nicht, warum? Bevor du an Hosting, Server oder das Theme denkst, öffne das größte Foto ganz oben auf deiner Startseite. In den meisten Fällen, die bei mir auf dem Tisch landen, liegt genau dort die Ursache.
Ich bin selbständiger Webentwickler und SEO-Berater aus Herne und arbeite mit Handwerksbetrieben und kleineren Mittelständlern im Ruhrgebiet. Fast jede Woche öffne ich eine Kundenseite, auf der ein einzelnes Foto vier, fünf oder mehr Megabyte wiegt. Direkt aus der Kamera in die Mediathek geladen, nie bearbeitet. Der Inhaber ahnt nichts davon, weil das Bild auf dem Monitor aussieht wie jedes andere.
Das ist der Punkt, an dem du selbst arbeiten kannst. Ohne Entwickler, ohne Agentur.
Warum Bilder so oft die Ladezeit bestimmen
Bilder machen auf den meisten Websites den größten Teil der übertragenen Datenmenge aus. Ein Textabsatz wiegt ein paar Kilobyte. Ein unbearbeitetes Kamerafoto wiegt schnell das Tausendfache. Wenn eine Seite langsam lädt, ist die Wahrscheinlichkeit hoch, dass ein oder zwei zu große Bilder den Ausschlag geben.
Das trifft besonders das Hero-Bild, also das große Motiv ganz oben. Es lädt als Erstes, es ist meistens das größte Einzelelement, und es entscheidet mit darüber, wie schnell sich die Seite für den Besucher sichtbar aufbaut. Google misst genau das über die Core Web Vitals. Wie diese Kennzahlen zusammenhängen und was sie für dein Ranking bedeuten, habe ich im Beitrag zu Core Web Vitals und Ladezeit genauer beschrieben.
Nicht jede langsame Seite ist ein Bildproblem. Manchmal liegt es am Hosting, manchmal an einem überladenen Theme. Aber die Bilder sind der Ort, an dem du am schnellsten und ohne technisches Wissen den größten Unterschied machst.
Bilder und Ladezeit: der Selbst-Check ohne Entwickler
Kernantwort: Öffne deine Website am Rechner, klicke mit der rechten Maustaste auf ein Foto und wähle "Bild speichern unter". Im Download-Ordner siehst du die Dateigröße. Als grobe Orientierung: Alles über 300 Kilobyte pro Content-Bild ist ein Warnsignal, alles über einem Megabyte ein akutes Problem.
1. Zähle die Bilder auf einer Seite
Öffne deine Startseite und drei wichtige Unterseiten. Zähle alles, was ein Bild ist: Fotos, Icons, Grafiken, das Logo im Header. Jedes davon muss geladen werden. Zehn Bilder zu je 400 Kilobyte ergeben zusammen vier Megabyte. Auf einer schwächeren Mobilverbindung außerhalb der Innenstadt fühlt sich das an wie eine Ewigkeit.
2. Finde das größte Bild
Rechtsklick auf ein Foto, "Bild speichern unter", und im Download-Ordner steht die Dateigröße. Ich habe schon Startseiten gesehen, auf denen ein einzelnes Hero-Bild schwerer war als mancher komplette PDF-Katalog. Das ist keine Ausnahme, das sehe ich regelmäßig.
3. Prüfe das Format
Endet die gespeicherte Datei auf .jpg, .png, .webp oder .avif? Das steht im Dateinamen. Wer nur JPG und PNG findet und kein WebP oder AVIF, verschenkt in fast jedem Fall Ladezeit.
Welche Bildformate auf einer KMU-Website Standard sind
Kernantwort: Für Fotos ist WebP heute die Basis, AVIF die Kür. Beide liefern bei vergleichbarer Bildqualität deutlich kleinere Dateien als JPG. PNG gehört nur noch zu Grafiken mit Transparenz oder scharfen Kanten. Wer heute jedes Bild als JPG oder PNG ausliefert, arbeitet mit den Regeln von vor zehn Jahren.
JPG: der Klassiker, der zu groß geworden ist
JPG ist überall. Jede Kamera speichert es, jedes Handy, jeder Bildbearbeiter. Nur wiegt ein JPG in ordentlicher Qualität schnell zwei bis drei Megabyte. Für den Druck ist das in Ordnung. Für eine Website ist es Ballast.
PNG: der stille Bremsklotz
PNG kann Transparenz, und genau dort gehört es hin: Logos, Icons, feine Grafiken mit scharfen Kanten. Wer aber ein Foto als PNG hochlädt, weil er das Format aus PowerPoint kennt, landet leicht bei zweistelligen Megabyte pro Bild. Das ist dann kein Foto mehr, das ist Ballast auf jeder Verbindung.
WebP: die richtige Voreinstellung
WebP liefert bei vergleichbarer Qualität deutlich kleinere Dateien als JPG. Alle gängigen Browser unterstützen es seit Jahren. WordPress verarbeitet WebP seit Version 5.8 aus dem Juli 2021 nativ, also ohne Zusatz-Plugin. Wer heute noch ein Zwei-Megabyte-JPG hochlädt, obwohl die halb so große WebP-Datei identisch aussieht, verschenkt Ladezeit ohne Gegenwert.
AVIF: das Format, das kaum jemand nutzt
AVIF gehört zum Funktionsumfang von WordPress 6.5, veröffentlicht am 2. April 2024. Seitdem verarbeitet der WordPress-Core AVIF ohne Zusatz-Plugin. AVIF liefert bei gleicher Qualität nochmal kleinere Dateien als WebP. Die technische Grundlage liegt also in jeder Mittelstands-Website mit aktuellem WordPress bereit. Genutzt wird sie fast nie, weil niemand den Inhaber darauf hingewiesen hat.
Wo der Hebel ohne Entwickler wirklich sitzt
Ich sehe drei Stellen, an denen du selbst ansetzen kannst.
- Beim Upload das richtige Format wählen. Läuft dein WordPress mindestens auf Version 6.5 (nachzusehen im Dashboard unter "Auf einen Blick"), akzeptiert es AVIF und WebP direkt. Statt das Handy-JPG hochzuladen, wandelst du es vorher mit einem kostenlosen Werkzeug um. Der Aufwand liegt bei ein paar Sekunden pro Bild.
- Bilder auf die richtige Größe skalieren. Ein Foto, das auf deiner Website 800 Pixel breit angezeigt wird, braucht keine 4000 Pixel Breite. Vor dem Upload auf die tatsächlich angezeigte Größe skalieren spart in der Regel den größten Teil der Dateigröße, ohne dass jemand einen Unterschied sieht.
- Bestehende Bilder in Wellen austauschen. Erst die Startseite, dann die Leistungsseiten, der Blog zuletzt. Kein Relaunch, keine Agenturbestellung. Ein Nachmittag pro Woche über einige Wochen ist realistisch. Das Ziel ist Bewegung, kein perfekter Endzustand.
Der zweite Punkt ist der wichtigste. Das falsche Format kostet dich einen Teil der Dateigröße. Ein Bild in vierfacher Anzeigebreite kostet dich ein Vielfaches. Wenn du nur eine Sache machst, dann diese.
Warum sich das lohnt, auch wenn du sonst nichts anfasst
Langsame Seiten kosten Besucher, und zwar bevor jemand deinen ersten Satz gelesen hat. Wer zu lange auf den Aufbau einer Seite wartet, klickt weg und ist beim Mitbewerber. Auf eine exakte Sekundenzahl lässt sich das nicht herunterbrechen, weil es von Gerät, Verbindung und der Geduld des Einzelnen abhängt. Die Richtung ist aber eindeutig: Schneller heißt mehr Besucher, die bleiben.
Für einen Handwerksbetrieb oder Dienstleister aus dem Ruhrgebiet bedeutet das konkret: Ein Interessent, der schnell auf deinem Angebotsformular landet, füllt es eher aus. Einer, der auf eine zähe Seite trifft, ist weg, bevor er dein Angebot überhaupt gesehen hat. Wie Ladezeit und Umsatz im Alltag zusammenhängen, habe ich im Beitrag zum Umsatz-Check bei langsamer Website aufgeschrieben.
Wie ich in der Praxis vorgehe
Wenn eine Kundenseite bei mir auf dem Tisch liegt, prüfe ich zuerst mit dem kostenlosen PageSpeed Insights von Google, welches Bild bei mobilem Aufruf die Ladezeit dominiert. Meistens ist es das Hero-Bild ganz oben.
Diesen Fall behebe ich immer zuerst: neuer Zuschnitt auf die tatsächlich angezeigte Größe, dann Export als WebP oder AVIF. Danach arbeite ich mich Seite für Seite durch. Erst wenn die Bilder erledigt sind, schaue ich auf Caching, Theme und Server.
Der Grund ist einfach. Bei den Bildern gewinnst du, ohne dass jemand am Code arbeiten muss. Und du gewinnst dort oft mehr als bei allen anderen Maßnahmen zusammen. Deshalb steht die Bildoptimierung in jedem meiner Performance-Projekte am Anfang, nicht am Ende.
Eine ehrliche Grenze gehört dazu: Wenn dein Hosting zu klein dimensioniert ist, hilft auch das beste WebP nichts. Und wenn ein Theme mit zwei Dutzend Plugins aufgebläht ist, verlagerst du das Problem nur. Für die meisten Mittelstandsseiten, die ich sehe, ist das aber nicht die Lage. Der Server läuft, das Theme läuft, nur die Bilder liegen wie Blei über allem.
Wenn du nach dem Selbst-Check unsicher bist, ob deine Seite ein Bild- oder ein Struktur-Problem hat, melde dich bei mir. Ich schaue mir die Startseite an und sage dir, wo der größte Hebel liegt. Ohne Vertrag, ohne Verkaufsdruck.
Häufige Fragen zu Bildern und Ladezeit
Ab welcher Dateigröße ist ein Bild auf der Website zu groß?
Als grobe Faustregel: Über 300 Kilobyte pro Content-Bild ist ein Warnsignal, über einem Megabyte ein akutes Problem. Für ein Hero-Bild ganz oben sind bis etwa 500 Kilobyte vertretbar, wenn die Qualität es rechtfertigt. Wer deutlich darüber liegt, verliert Besucher unbemerkt. Der einfachste Test ist "Bild speichern unter" und ein Blick auf die Dateigröße.
Kann ich WebP oder AVIF ohne technisches Wissen selbst nutzen?
Ja. Kostenlose Online-Werkzeuge wie squoosh.app wandeln JPG- oder PNG-Dateien in WebP oder AVIF um. Du lädst das Original hoch, wählst das Zielformat, lädst die kleinere Datei herunter und stellst sie in WordPress ein. Mit WordPress 6.5 funktioniert AVIF ohne Zusatz-Plugin, WebP schon seit Version 5.8. Der Aufwand liegt bei wenigen Sekunden pro Bild.
Muss ich alle bestehenden Bilder auf einmal austauschen?
Nein. Fang mit den Bildern an, die am häufigsten gesehen werden: Startseite, Leistungsseiten, die meistgelesenen Blogartikel. Alles Weitere ersetzt du nach und nach. Ein systematisches Vorgehen über einige Wochen bringt den größten Teil der Wirkung, ohne dass du einen kompletten Relaunch brauchst.
Wie erkenne ich, ob mein WordPress WebP und AVIF unterstützt?
Die Versionsnummer steht im WordPress-Dashboard im Widget "Auf einen Blick". Seit Version 5.8 wird WebP unterstützt, mit Version 6.5 kam AVIF hinzu. Wer eine ältere Version einsetzt, sollte schon aus Sicherheitsgründen updaten. Nach dem Update lädst du testweise eine WebP- oder AVIF-Datei hoch und siehst, ob die Mediathek sie annimmt.
Ist das Format wichtiger als die Bildgröße?
Beides zählt, aber die Bildgröße ist meist der größere Hebel. Ein Foto in vierfacher Anzeigebreite kostet dich ein Vielfaches an Dateigröße, egal welches Format du wählst. Skaliere zuerst auf die tatsächlich angezeigte Größe, wandle danach in WebP oder AVIF um. In dieser Reihenfolge holst du das meiste heraus.
Über den Autor: Roland Hentschel ist selbstständiger Webentwickler sowie SEO- und KI-Berater mit Sitz in Herne. Er arbeitet mit kleinen und mittelständischen Unternehmen aus unterschiedlichsten Branchen an Websites, die Anfragen bringen statt Besucher zu vertreiben. Mehr über Roland oder direkt Kontakt aufnehmen.
