Bilder — der größte Hebel, den fast jeder liegen lässt.

Erst die Abmessungen.

Der wichtigste Punkt und der, den Komprimierungs-Plugins nicht lösen. Ein Bild mit 4000 Pixeln Breite, das in einer 800 Pixel breiten Spalte angezeigt wird, überträgt das Fünffache an Daten für exakt dieselbe sichtbare Qualität.

Die Regel: Ein Bild wird höchstens doppelt so breit ausgeliefert wie die Fläche, in der es erscheint — der Faktor zwei deckt hochauflösende Bildschirme ab. Für eine 800 Pixel breite Spalte reichen also 1600 Pixel.

Das herauszufinden ist einfach: Rechtsklick auf das Bild, untersuchen, und die tatsächliche gegen die dargestellte Größe halten. Wenn dort ein Faktor von fünf oder zehn steht, hast du deinen größten Hebel gefunden.

Formate.

Zwei Hinweise. Erstens: SVG wird unterschätzt. Logos und Symbole als SVG sind winzig, immer gestochen scharf und lassen sich per CSS einfärben. Prüfe aber hochgeladene SVG-Dateien, da sie Skripte enthalten können (Sicherheit).

Zweitens: PNG für Fotos ist ein verbreiteter und teurer Fehler. Ein Foto als PNG kann leicht das Zehnfache der JPEG-Größe haben, ohne besser auszusehen.

Komprimierung.

Zwei Arten: verlustfrei entfernt nur überflüssige Daten, verlustbehaftet wirft Bildinformation weg. Für Fotos ist verlustbehaftet richtig — die Frage ist nur, wie stark.

Praktisch liegt der Punkt, an dem Qualitätsverlust sichtbar wird, deutlich niedriger als die meisten annehmen. Für ein typisches Foto ist eine Qualitätsstufe um 75 bis 80 Prozent in aller Regel nicht vom Original zu unterscheiden, spart aber den Großteil der Daten.

Prüf das selbst: Nimm ein Bild, speichere es in drei Stufen, und sieh sie nebeneinander in Originalgröße an. Du wirst überrascht sein, wie weit man gehen kann — und ab wo es dann plötzlich auffällt, besonders bei Flächen mit sanften Farbverläufen wie Himmel.

Mehrere Größen.

Ein Handy mit 400 Pixeln Breite braucht kein Bild für einen Breitbildschirm. Mit mehreren hinterlegten Größen und einer Angabe, wie breit das Bild im Layout erscheint, wählt der Browser selbst die passende.

Das ist auf dem Handy die größte Einzelersparnis überhaupt — oft achtzig Prozent weniger Daten als beim Ausliefern der Desktop-Fassung. WordPress legt diese Größen beim Hochladen automatisch an; wichtig ist, dass das Theme sie auch nutzt und die Breitenangabe stimmt (Mobil).

Ein häufiger Fehler: Das Theme gibt eine falsche Breitenangabe aus, und der Browser wählt deshalb konsequent eine zu große Fassung. Das sieht man nur, wenn man im Untersuchungsfenster nachschaut, welche Größe tatsächlich geladen wurde.

Verzögertes Laden.

Bilder, die beim Aufruf nicht sichtbar sind, werden erst geladen, wenn man in ihre Nähe scrollt. Das spart bei langen Seiten erheblich und ist in modernen Browsern mit einem Attribut erledigt.

Die wichtige Ausnahme: Das größte Bild im ersten Bildschirm darf nicht verzögert geladen werden. Dort schadet es direkt dem LCP, weil der Browser erst spät anfängt. Viele Plugins aktivieren verzögertes Laden pauschal für alles — das ist einer der häufigsten selbstverschuldeten Tempoverluste (LCP).

Maßangaben.

Jedes Bild braucht Breite und Höhe im HTML. Der Browser reserviert daraus den Platz, bevor das Bild da ist — das verhindert Layoutsprünge. Die Angaben müssen nicht der Anzeigegröße entsprechen, nur dem Seitenverhältnis (CLS).

Hintergrundbilder.

Bilder, die über CSS eingebunden sind, haben drei Nachteile: Der Browser entdeckt sie spät, es gibt keine automatische Auswahl der passenden Größe, und sie haben keinen Alternativtext.

Deshalb gilt: Alles, was Inhalt ist, gehört als echtes Bildelement in die Seite. CSS-Hintergründe sind für Dekoration richtig — Verläufe, Muster, Texturen. Besonders bei großen Kopfbildern lohnt der Wechsel auf ein echtes Bildelement fast immer (Barrierefreiheit).

Bestehende Bilder.

Bei einer gewachsenen Website liegen oft Tausende Bilder in der Mediathek. Die lassen sich nachträglich bearbeiten — Plugins erzeugen moderne Formate und komprimieren bestehende Dateien.

Drei Hinweise dazu. Erstens: vorher sichern, die Bearbeitung ist nicht umkehrbar, wenn keine Originale behalten werden (Backup). Zweitens: Die Bearbeitung ändert nichts an zu großen Abmessungen, wenn das Plugin nicht auch skaliert — prüf die Einstellung. Drittens: In Stapeln arbeiten, nicht alles auf einmal, sonst läuft der Vorgang in Serverbegrenzungen (Speicherlimit).

Und räum gleich auf: In jeder gewachsenen Mediathek liegen Bilder, die nirgends mehr verwendet werden (Webspace voll).

In WordPress.

1. Vor dem Hochladen auf sinnvolle Abmessungen bringen — das ist der wirksamste Schritt.
2. Bildgrößen im Theme prüfen: Welche werden tatsächlich gebraucht? Ungenutzte Größen belegen nur Platz.
3. Ein Plugin für moderne Formate und Komprimierung einsetzen.
4. Verzögertes Laden aktiviert lassen, aber das Kopfbild ausnehmen.
5. Alternativtexte beim Hochladen schreiben.
6. Nach einer Theme-Umstellung die Größen neu erzeugen lassen.

Im Shop.

Produktbilder sind ein Sonderfall: Sie müssen gut aussehen, weil sie verkaufen, und es sind viele. Zwei Empfehlungen.

Erstens: In Listenansichten reicht eine kleine Fassung völlig — dort werden oft versehentlich die großen Detailbilder ausgeliefert. Zweitens: Die Vergrößerungsansicht sollte erst laden, wenn jemand sie öffnet, nicht mit der Produktseite. Beides zusammen halbiert auf einer typischen Kategorieseite die Datenmenge (Produktbilder).

Prüfweg.

1. Netzwerkanalyse öffnen und nach Bildern filtern.
2. Nach Größe sortieren — die drei größten sind dein Ziel.
3. Tatsächliche gegen dargestellte Größe halten.
4. Format prüfen.
5. Gesamtdatenmenge der Seite ansehen.
6. Mobil wiederholen — wird dort eine kleinere Fassung geladen?

Schritt sechs deckt den häufigsten verdeckten Fehler auf: Wenn auf dem Handy dieselbe Datei geladen wird wie am Rechner, funktioniert die Größenauswahl nicht.

Wenn du nicht weiterkommst.

Wenn deine Seite auf dem Handy zäh lädt und du vermutest, dass es an den Bildern liegt. Ich messe deine Seite mit echten Nutzerdaten statt mit einem einzelnen Test, sortiere die Befunde nach Wirkung und behebe die, die zählen: Ladezeit optimieren. Dauerhaft begleitet die WordPress-Wartung — damit neue Inhalte die Werte nicht wieder kaputt machen.

Orientierungswerte, keine Fixpreise — nach einem kurzen Gespräch bekommst du ein Festpreisangebot.

Wer hilft.

Ich bin Manuel Killert, Webentwickler aus Quakenbrück. Ich mache Websites schneller — und zwar messbar, nicht gefühlt. Das heißt: erst messen, dann die zwei oder drei Stellen beheben, die tatsächlich den Unterschied machen, dann noch einmal messen.

Was ich nicht mache: eine Punktzahl schönrechnen. Es gibt Tricks, mit denen ein Testwerkzeug hundert Punkte zeigt, während die Seite für echte Besucher gleich langsam bleibt. Das ist Selbstbetrug, und ich sage dir, wenn jemand dir so etwas verkauft hat.

Ich arbeite mit dem, was du hast — Theme, Plugins, Hoster. Ein Neubau ist manchmal die ehrlichere Antwort, und dann sage ich das auch, statt monatelang an einer Seite zu optimieren, die grundsätzlich falsch gebaut ist.