Website-Bilder verkleinern, ohne an Qualität zu verlieren

Auf den meisten Webseiten machen Bilder den größten Teil der Datenmenge aus. Der einfachste Weg, eine langsame Seite schneller zu machen, ist daher meist, die Bilder zu verbessern, nicht den Server.

1. Bilder in der angezeigten Größe hochladen

Ein 4000 Pixel breites Smartphone-Foto in einen Bereich zu laden, der 800 Pixel breit angezeigt wird, lässt Besucher unnötig mehrere Megabyte herunterladen. Verkleinern Sie das Bild vor dem Hochladen auf die größte Breite, in der es erscheint. Für hochauflösende Bildschirme reicht meist die doppelte Anzeigebreite.

WordPress erzeugt automatisch verschiedene Größen jedes Uploads und fügt ein srcset-Attribut hinzu, damit der Browser die passende wählt. Ein nicht übergroßes Original schont trotzdem Speicherplatz und Inode-Verbrauch.

2. Das richtige Format wählen

• WebP: von allen aktuellen Browsern unterstützt und bei gleicher Bildqualität meist kleiner als JPEG.
• AVIF: in vielen Fällen noch kleiner als WebP; die meisten aktuellen Browser unterstützen es.
• SVG: ideal für Logos und Symbole, in jeder Größe scharf. Vorsicht bei SVG-Dateien aus fremden Quellen, sie können Code enthalten.
• PNG: nur für Bilder mit Transparenz und wenigen Farben. Nicht für Fotos verwenden.

3. Die Komprimierungsqualität einstellen

Bei Fotos senkt eine Qualität von etwa 75–85 % die Dateigröße deutlich, ohne sichtbaren Verlust. Am besten probieren Sie einige Einstellungen mit Ihren eigenen Bildern aus und vergleichen.

4. Lazy Loading richtig einsetzen

Das Attribut loading="lazy" sorgt dafür, dass Bilder weiter unten erst geladen werden, wenn der Besucher sich ihnen nähert. WordPress fügt es den meisten Bildern selbst hinzu.

Die wichtige Ausnahme: Das große Bild, das beim Öffnen sofort sichtbar ist (meist Titel- oder Produktbild), nicht lazy laden. Es ist oft das LCP-Element, und spätes Laden lässt die Seite langsam wirken. Mit fetchpriority="high" lädt der Browser dieses Bild zuerst.

5. Breite und Höhe angeben

Stehen width und height eines Bildes im HTML, reserviert der Browser den Platz, bevor es ankommt. So springt der Inhalt beim Laden nicht nach unten, das CLS-Problem. Siehe unseren Ratgeber zu Core Web Vitals.

Vorhandene Bilder gesammelt verbessern

Unter WordPress kann ein Plugin zur Bildoptimierung vorhandene Bilder gesammelt komprimieren und WebP-Versionen erzeugen. Auch die Bildoptimierung von LiteSpeed Cache kann das, sie läuft allerdings über einen externen Dienst namens QUIC.cloud. Erstellen Sie vorher ein Backup und lassen Sie die Option zum Aufbewahren der Originale aktiv.

Das Ergebnis messen

Prüfen Sie die Gesamtgröße der Seite vorher und nachher in den Entwicklertools des Browsers. Kleinere Seiten erreichen Besucher schneller und senken Ihren monatlichen Traffic.