Bedienungsanleitung
Überblick
Spyra Rocks Images optimiert Bilder in WordPress. Das Plugin unterstützt Kompression, WebP-Kopien, Retina-Dateien, srcset-Unterstützung, CSS-Umschreibungen, LCP-Bild-Preload und Aufräumfunktionen für generierte Bilddateien.
Das Ziel ist eine saubere Bildauslieferung mit guter Qualität, passenden Dateigrößen und möglichst kurzen Ladezeiten.
Einrichtung
- Plugin aktivieren.
- Zu Medien → Spyra Rocks Images wechseln.
- Status der Bild-Engine und WebP-Unterstützung prüfen.
- Qualität, maximale Bildgröße und gewünschte Optionen festlegen.
- Einstellungen speichern.
Die Einstellungen sollten zur WordPress-Medienkonfiguration passen. Wenn WordPress zum Beispiel eine große Bildgröße von 1280 px verwendet, ist eine maximale Plugin-Bildgröße von 2560 px sinnvoll, damit passende Retina-Dateien erzeugt werden können.
Bildgrößen und Retina-Dateien
WordPress erzeugt beim Hochladen verschiedene Bildgrößen. Das Plugin kann daraus optimierte WebP-Dateien und passende @2x-Varianten für Retina-Displays erzeugen.
Damit die Bildauslieferung zuverlässig funktioniert, sollten die WordPress-Bildgrößen und die maximale Bildgröße im Plugin zusammenpassen.
Ein typisches Beispiel:
- WordPress Mittelgroß: 640 px Breite
- WordPress Groß: 1280 px Breite
- Plugin maximale Bildgröße: 2560 px
Dadurch kann zu einer normalen 1280-px-Datei eine passende 2560-px-Retina-Datei erzeugt werden.
Bilder sollten sauber über die WordPress-Mediathek registriert werden. Nur dann kann WordPress Bildgrößen, Metadaten und responsive srcset-Ausgaben zuverlässig bereitstellen.
LCP-Bild-Preload
Das Plugin kann das voraussichtliche LCP- beziehungsweise Hero-Bild einer Seite automatisch erkennen und im Kopfbereich der Seite per preload priorisieren.
Dadurch kann der Browser das wichtigste sichtbare Bild früher laden. Das kann besonders auf Startseiten oder Seiten mit großem Einstiegsbild die LCP-Zeit verbessern.
Wenn eine passende @2x-Datei vorhanden ist, wird automatisch ein imagesrcset mit 1x- und 2x-Variante ausgegeben.
Beispiel für die erzeugte Ausgabe:
<link rel="preload" as="image" href="https://www.example.de/wp-content/uploads/media/images/home.webp" imagesrcset="https://www.example.de/wp-content/uploads/media/images/home.webp 1x, https://www.example.de/wp-content/uploads/media/images/home@2x.webp 2x" fetchpriority="high">
Die automatische Erkennung überspringt typische Logos, Icons, Favicons, Avatare, Platzhalter und sehr kleine Bilder.
Manuelle Überschreibung
Falls auf einer Seite nicht das gewünschte Bild automatisch erkannt wird, kann das LCP-Bild manuell über ein Custom Field festgelegt werden.
Das Custom Field heißt:
_srr_lcp_image_url
Als Wert wird die vollständige Bild-URL eingetragen, zum Beispiel:
https://www.example.de/wp-content/uploads/media/images/home.webp
Das LCP-Bild sollte als echtes <img> im HTML vorhanden sein, nicht nur als CSS-Hintergrundbild. Für das erste große sichtbare Bild sollte außerdem kein loading="lazy" verwendet werden.
Bedienung
Neue Uploads können automatisch komprimiert und bei vorhandener Serverunterstützung als WebP-Kopie erzeugt werden. Der Bulk Generator kann bestehende Medien nachträglich verarbeiten und zeigt Fortschritt, übersprungene Dateien, Fehler, erzeugte WebP-Dateien, Retina-Dateien und eingesparten Speicher an.
Zusätzlich gibt es Werkzeuge zum Löschen und Neuerzeugen von Thumbnails, zum Entfernen von @2x-Dateien und zum Leeren des CSS-Caches.
Nach größeren Änderungen an Bildgrößen oder nach dem Neu-Registrieren von Bildern sollten die benötigten Bildgrößen und Retina-Dateien neu erzeugt werden.
Aufräumen und Löschen
Beim Löschen eines Bildes aus der Mediathek entfernt das Plugin auch passende @2x-Dateien. Dadurch bleiben keine unnötigen Retina-Dateien im Upload-Ordner zurück.
Das betrifft sowohl das Originalbild als auch bekannte Zwischenformate aus den WordPress-Metadaten.
Beispiel:
home.webphome@2x.webphome-768x512.webphome-768x512@2x.webp
Wenn das Bild aus der Mediathek gelöscht wird, werden die passenden @2x-Varianten ebenfalls entfernt.
Das Plugin löscht nur zugehörige Dateien mit gleichem Basisnamen und @2x-Suffix. Es werden keine ganzen Ordner oder fremden Dateien pauschal entfernt.
Hinweise
Vor großen Bulk-Läufen sollte ein Backup vorhanden sein. Die tatsächliche WebP-Unterstützung hängt von der PHP-Bildbibliothek des Servers ab.
Wenn externe Cache-Plugins genutzt werden, sollten danach auch deren Caches geleert werden.
Für eine gute Bildauslieferung ist nicht nur die Kompression wichtig. Entscheidend sind auch passende Bildmaße, saubere Mediathek-Metadaten, korrekte Retina-Dateien und ein sinnvoll gesetztes LCP-Bild.
Logos und Grafiken mit harten Kanten sollten nicht zu stark verlustbehaftet komprimiert werden. Wenn möglich, sind SVG oder hochwertige PNG/WebP-Dateien für solche Motive besser geeignet.
