Auf einen Blick
Große, unkomprimierte Bilddateien sind die Hauptursache für lange Ladezeiten von WordPress-Websites. In diesem Artikel erfährst du, wie du deine Bilder automatisiert über die WordPress-Plugins Imagify oder TinyPNG komprimierst oder alternativ eine serverseitige Optimierung über das HostPress Plesk Control Panel einrichtest. Dabei wandelst du Bilder in moderne Next-Gen-Formate wie WebP und AVIF um, reduzierst die Dateigröße ohne sichtbaren Qualitätsverlust und verbesserst deine Core Web Vitals.
Voraussetzungen
Bevor du mit der Bildoptimierung startest, stelle sicher, dass folgende Voraussetzungen erfüllt sind:
- Du besitzt einen Administrator-Zugang zum WordPress-Dashboard deiner Website.
- Du hast Zugriff auf das HostPress-Kundencenter (für die serverseitige Plesk-Optimierung).
- Du hast ein aktives Konto bei Imagify oder TinyPNG erstellt, um den benötigten API-Schlüssel für die Plugin-Nutzung zu erhalten.
Schritt-für-Schritt-Anleitung
Option 1: Automatische Bildoptimierung und AVIF-Konvertierung mit Imagify
Die Nutzung des Plugins Imagify ist ideal, um Bilder vollautomatisch beim Upload zu verarbeiten und direkt in die modernsten Formate (WebP und AVIF) umzuwandeln.
Schritt 1: Das Imagify-Plugin installieren
- Logge dich in dein WordPress-Dashboard ein.
- Navigiere im linken Menü zu Plugins > Installieren.
- Gib oben rechts in das Suchfeld den Begriff
Imagifyein. - Klicke beim Plugin „Imagify – Optimize Images & Convert WebP & AVIF“ auf den Button Jetzt installieren.
- Klicke nach der Installation auf denselben Button, der nun Aktivieren heißt.
Schritt 2: API-Schlüssel verknüpfen
- Navigiere im WordPress-Dashboard zu Einstellungen > Imagify.
- Trage deinen persönlichen Imagify-API-Schlüssel in das dafür vorgesehene Eingabefeld ein.
- Klicke auf Verbinden, um das Plugin mit deinem Imagify-Konto zu autorisieren.
Schritt 3: Auto-Optimierung und Next-Gen-Formate (WebP & AVIF) aktivieren
- Bleibe im Menü Einstellungen > Imagify und scrolle zum Bereich Allgemeine Einstellungen.
- Aktiviere die Option Bilder beim Hochladen automatisch optimieren (Auto-optimize images on upload).
- Scrolle zum Bereich Optimierungs-WebP & AVIF und setze die Haken bei WebP-Versionen von Bildern erstellen und AVIF-Versionen von Bildern erstellen. (Hinweis: AVIF bietet eine noch stärkere Komprimierung als WebP bei gleicher Qualität).
- Klicke am Ende der Seite auf den Button Änderungen speichern.
Schritt 4: Bestehende Bilder optimieren (Bulk Optimization)
- Navigiere im WordPress-Dashboard zu Medien > Bulk Optimization.
- Klicke auf den Button Imagif’em all.
- Lass das Browserfenster geöffnet, bis das Tool deine gesamte bestehende WordPress-Mediathek komprimiert hat.
Option 2: Bildoptimierung mit TinyPNG (Alternative Plugin-Lösung)
Wenn du eine smarte Komprimierung mit einem großzügigen kostenlosen Kontingent (bis zu 500 Bilder pro Monat) suchst, ist TinyPNG eine hervorragende Alternative.
Schritt 1: Das TinyPNG-Plugin installieren
- Navigiere im WordPress-Dashboard zu Plugins > Installieren.
- Suche nach
TinyPNG(Der genaue Name lautet: TinyPNG – JPEG, PNG & WebP image compression). - Klicke auf Jetzt installieren und anschließend auf Aktivieren.
Schritt 2: Account verknüpfen und API-Key hinterlegen
- Navigiere im Dashboard zu Einstellungen > TinyPNG – JPEG, PNG & WebP image compression.
- Trage deinen Namen und deine E-Mail-Adresse in das Feld Register new account ein oder gib deinen bestehenden API-Key im Feld I already have an account ein.
- Klicke auf Save changes, um das Plugin zu aktivieren.
Schritt 3: Auto-Optimierung und Bulk-Optimierung durchführen
- Scrolle in den TinyPNG-Einstellungen nach unten zum Bereich New image uploads.
- Wähle die Option Compress new images in the background (Recommended), damit zukünftige Uploads automatisch optimiert werden.
- Um alte Bilder zu komprimieren, navigiere zu Medien > Bulk Optimization.
- Klicke auf den Button Start Bulk Optimization und warte, bis der Vorgang abgeschlossen ist.
Option 3: Serverseitige Bildoptimierung über das Plesk Control Panel
Falls du eine sehr speicherintensive Website betreibst, kannst du die Rechenlast der Bildkomprimierung und AVIF/WebP-Auslieferung vom WordPress-Webspace direkt auf die Serverebene verlagern.
Schritt 1: Im Plesk Control Panel anmelden
- Logge dich in dein HostPress-Kundencenter ein.
- Klicke in der Produktübersicht deiner Domain auf den Button Control Panel Login, um die Plesk-Oberfläche zu öffnen.
Schritt 2: Speed Kit aktivieren
- Klicke im linken Hauptmenü von Plesk auf den Menüpunkt Erweiterungen (Extensions).
- Suche nach der Erweiterung Speed Kit und klicke auf Öffnen oder Aktivieren.
- Folge dem Einrichtungsassistenten des Speed Kits. Dieses Tool übernimmt die automatisierte Auslieferung deiner Bilder in den Formaten WebP oder AVIF auf CDN- und Serverebene.
Schritt 3: Serverseitiges Caching via Nginx einrichten
- Navigiere in Plesk zu Websites & Domains und wähle deine Website aus.
- Klicke auf die Kachel Apache- & nginx-Einstellungen.
- Stelle sicher, dass das Nginx-Caching aktiviert ist.
- Wähle im Dropdown-Menü der HostPress-Caching-Profile die Option aus, die hochauflösende JPEGs/PNGs automatisch „on-the-fly“ in WebP/AVIF konvertiert und ausliefert, sobald ein Browser die Seite anfordert. Klicke unten auf Übernehmen.
Best Practices für den HostPress-Stack
Ergänzend zur automatischen Komprimierung solltest du folgende CMS-Einstellungen vornehmen, um die Serverlast niedrig zu halten:
Maximale Upload-Größe begrenzen (mit Imsanity)
Verhindere, dass unbearbeitete Smartphone-Bilder (z. B. mit 6000 Pixel Breite) die Serverfestplatte füllen.
- Installiere das Plugin Imsanity über Plugins > Installieren.
- Navigiere zu Einstellungen > Imsanity.
- Trage bei Bilder, die innerhalb von Seiten/Beiträgen hochgeladen werden eine maximale Breite und Höhe von
2048Pixeln ein. Größere Bilder werden nun direkt beim Upload automatisch hardwareseitig herunterskaliert.
Lazy Loading überprüfen
Stelle sicher, dass Bilder erst geladen werden, wenn der Nutzer in den sichtbaren Bereich (Viewport) scrollt. Da WordPress dies ab Version 5.5 nativ unterstützt, solltest du in Drittanbieter-Optimierungs-Plugins (wie WP Rocket) prüfen, dass sich die Lazy-Loading-Funktionen nicht gegenseitig blockieren oder doppelt ausgeführt werden.
Profi-Tipps & Fehlerbehebung (Troubleshooting)
Problem: Imagify oder TinyPNG optimiert keine neuen Bilder mehr
- Ursache: Das monatliche Optimierungsvolumen deines kostenlosen Kontos ist aufgebraucht (Imagify: 20 MB/Monat; TinyPNG: ca. 500 Bilder/Monat). Beachte, dass WordPress beim Upload eines Bildes automatisch mehrere Zwischengrößen erstellt, die alle vom Limit abgezogen werden.
- Lösung: Navigiere zu den jeweiligen Plugin-Einstellungen (Einstellungen > Imagify oder TinyPNG) und überprüfe den Kontostatus. Wenn das Limit erreicht ist, musst du dein Kontomodell upgraden oder den nächsten Abrechnungsmonat abwarten.
Problem: AVIF- oder WebP-Bilder werden auf der Website nicht angezeigt
- Ursache: Der serverseitige Nginx-Cache oder das CDN hat noch die alten Pfade zu den JPEG/PNG-Dateien zwischengespeichert oder der Browser des Besuchers ist stark veraltet und unterstützt kein AVIF.
- Lösung: Melde dich in Plesk an, navigiere zu Apache- & nginx-Einstellungen und klicke auf den Button Cache leeren. Leere zusätzlich den Cache deines WordPress-Caching-Plugins (z. B. WP Rocket oder HostPress Cache). Plugins wie Imagify liefern als Fallback automatisch das Originalbild aus, wenn ein älterer Browser kein AVIF/WebP unterstützt.
Problem: Fehlermeldung „An error occurred“ oder Server-Timeout bei der Bulk-Optimierung
- Ursache: Der Server läuft beim gleichzeitigen Verarbeiten von Hunderten Bildern in das PHP-Memory-Limit oder die maximale Ausführungszeit (Max Execution Time).
- Lösung: Scrolle in den Einstellungen der Bulk Optimization nach unten und reduziere die Anzahl der parallel verarbeiteten Bilder. Alternativ solltest du die Bildoptimierung über Plesk (Option 3) nutzen, da diese keine PHP-Prozesse des Webspace blockiert.
Fazit & Support-Hinweis
Die Kombination aus dedizierten Plugins (Imagify/TinyPNG) für Next-Gen-Formate wie AVIF und dem optimierten HostPress-Nginx-Server-Stack bietet die performanteste Auslieferung deiner Medien.
Solltest du trotz dieser Anleitung Probleme mit der Bildkomprimierung oder Ladezeit deiner Website haben, steht dir das HostPress-Support-Team jederzeit zur Verfügung. Schreibe uns einfach ein Ticket über dein HostPress-Kundencenter oder nutze den Live-Chat auf unserer Website.