Komprimieren Sie Ihre Bilder, liefern Sie WebP oder AVIF in passenden Größen aus, laden Sie das LCP-Bild per Preload vor und verzögern Sie alle übrigen Bilder per Lazy Loading. Sofort wirkt das bei Hero-Bildern, die Bulk-Optimierung der gesamten Mediathek lohnt sich danach. Plugins nehmen Ihnen die meiste Arbeit ab, ein Backup vor jedem Massenjob ist aber Pflicht.
Kurz gesagt:
- Bei JPEG reicht häufig eine Qualitätsstufe um 85; testen Sie neue Werte zuerst an fünf bis zehn typischen Bildern, bevor Sie die Mediathek umstellen.
- Für die meisten Fotos genügen srcset und sizes; fehlen passende Bildvarianten, laden mobile Geräte oft größere Dateien, als für die Anzeige nötig sind.
- Das größte sichtbare Bild darf nicht verzögert laden; stimmen Sie die Vorladeadresse auf die als WebP ausgelieferte Datei ab, damit keine doppelte Anforderung entsteht.
- Sichern Sie vor der Massenoptimierung Datenbank und Upload Ordner, testen Sie eine kleine Bildauswahl und verarbeiten Sie große Bestände in servergerechten Paketen.
- Vergleichen Sie Änderungen einzeln auf Mobilgeräten und am Desktop; für Core Web Vitals zählt nach einigen Wochen der Feldwert am 75. Perzentil.
Inhaltsverzeichnis
- Welche Reihenfolge funktioniert beim Bilder optimieren in WordPress?
- Wie komprimieren Sie Bilder und wann lohnen sich WebP und AVIF?
- Wie liefern Sie Bilder responsiv aus: srcset, sizes und picture?
- Was sollten Sie vor dem Upload mit Bildern erledigen?
- Wann nutzen Sie Lazy Loading und wann Preload?
- Wie gehen Sie bei großen Mediatheken Schritt für Schritt vor?
- Wie testen und überwachen Sie das Ergebnis?
- Worauf kommt es bei der Plugin-Auswahl an?
- Was tun bei Upload-Fehlern, fehlenden Bildern und Timeouts?
- Wie schützen Sie Ihre Bilder und Ihre Seite bei der Bildintegration?
- Wie wir Sie bei der Bildoptimierung unterstützen
- FAQ
- Quellen
Welche Reihenfolge funktioniert beim Bilder optimieren in WordPress?
Arbeiten Sie nicht wild drauflos. Bilder optimieren Sie am besten in einer festen Schrittfolge, die Sie auch als Checkliste ans Team weitergeben können. Zuerst sichern Sie die Seite per Backup. Dann legen Sie fest, welche Seiten zuerst dran sind: Startseite, Kategorieseiten und Produktseiten bringen meist den größten Effekt, weil dort der meiste Traffic landet.
Danach geht es in dieser Reihenfolge weiter:
- Vorbereitung: Backup anlegen, Ausgangswerte mit PageSpeed Insights festhalten.
- Kompression und Format: Bilder verkleinern, nach WebP oder AVIF konvertieren.
- Responsive Varianten: passende Bildgrößen erzeugen und per srcset ausliefern.
- Lazy Load und Preload: sichtbare Hero-Bilder vorladen, alles Übrige verzögern.
- Bulk-Optimierung: bestehende Mediathek in Batches abarbeiten.
- Testen: Messung wiederholen und mit den Ausgangswerten vergleichen.
Unterscheiden Sie dabei drei Bildtypen. Hero-Bilder sind groß und stehen im sichtbaren Bereich, hier zählt jedes Kilobyte und das Preload. Content-Bilder im Fließtext dürfen kleiner sein und werden verzögert geladen. Thumbnails in Listen und Shops sind zahlreich, deshalb lohnt sich hier die automatische Verarbeitung am meisten.
Planen Sie außerdem das Budget: Cloud-Dienste rechnen meist über Kontingente ab, lokale Verarbeitung kostet Serverleistung statt Geld. Wie wir Ladezeit-Projekte insgesamt angehen, beschreiben wir im Beitrag zum Workflow für WordPress und WooCommerce.
Wie komprimieren Sie Bilder und wann lohnen sich WebP und AVIF?
Google nennt in den PageSpeed-Empfehlungen zur Bildoptimierung vier Stellschrauben: Format, Qualität, Auflösung und Responsivität. Wer daran dreht, verkürzt die Ladezeit deutlich. Für Ihren Alltag heißt das: Kompression ist der Hebel mit dem besten Verhältnis aus Aufwand und Wirkung.
Bei JPEG reicht oft eine Qualitätsstufe um 85. Das Auge sieht den Unterschied zu 100 kaum, die Datei wird aber spürbar kleiner. Achten Sie bei Fotos mit feinen Farbverläufen oder rotem Text darauf, dass das Chroma-Sampling keine Artefakte erzeugt. PNG nutzen Sie nur dort, wo Transparenz oder scharfe Kanten nötig sind, etwa bei Logos.
WebP und AVIF liefern bei vergleichbarer Optik meist deutlich kleinere Dateien als JPEG und PNG. Halten Sie für ältere Browser trotzdem eine Fallback-Strategie bereit, damit niemand ein leeres Bildfeld sieht. Gute Plugins erledigen das automatisch.
Bei der Frage lokal oder Cloud gilt:
- Lokale Konvertierung über GD oder Imagick schont Ihre API-Kontingente. QuickWebP wandelt JPG und PNG lokal auf dem Server in WebP um, AVIF gibt es dort in der Pro-Version auf unterstützten Servern.
- Cloud-Dienste schonen die Server-CPU und schaffen große Mengen schneller. ShortPixel arbeitet über eine Image-Optimization-Cloud und bringt automatische Kompression, WebP/AVIF und Bulk-Optimierung mit.
- Gemischte Ansätze gibt es auch: MegaOptim komprimiert lokal ohne API und bietet zusätzlich eine Cloud-Option.
Achten Sie bei jedem Plugin auf vier Funktionen: automatische Konvertierung beim Upload, eine Bulk-Warteschlange, die Sicherung der Originale und eine Wiederherstellungsfunktion.
Profi-Tipp: Testen Sie neue Qualitätswerte zuerst an fünf bis zehn typischen Bildern Ihrer Seite und vergleichen Sie sie nebeneinander, bevor Sie die Einstellung auf die ganze Mediathek loslassen.
Wie liefern Sie Bilder responsiv aus: srcset, sizes und picture?
Ein Smartphone braucht oft kein besonders großes Bild. Genau dafür gibt es responsive Bilder: Sie stellen dem Browser mehrere Dateien zur Auswahl, er nimmt die passende. Das responsive Bilder in HTML erklärt MDN sauber, wobei zwei Konzepte zu trennen sind: Resolution Switching (dasselbe Motiv in verschiedenen Größen) und Art Direction (je nach Bildschirm ein anderer Ausschnitt).
So gehen Sie vor:
- Prüfen Sie, welche Bildgrößen Ihr Theme in WordPress registriert. WordPress erzeugt beim Upload mehrere Varianten und schreibt srcset und sizes meist selbst in den Code.
- Ergänzen Sie fehlende Größen, wenn Ihr Layout breiter ist, als die Standardgrößen hergeben. Danach müssen Sie bestehende Thumbnails neu generieren.
- Prüfen Sie das sizes-Attribut: Es sagt dem Browser, wie breit das Bild im Layout tatsächlich wird. Fehlt die Angabe, rät er und lädt oft zu viel.
- Setzen Sie width und height. Laut MDN reservieren diese Attribute Platz und verringern Layoutverschiebungen. Das hilft dem CLS-Wert, besonders bei lazy geladenen Bildern.
- Nutzen Sie das picture-Element nur, wenn Sie wirklich einen anderen Bildausschnitt brauchen, etwa ein Querformat am Desktop und ein Hochformat am Handy.
Faustregel: Für die meisten Fotos reicht srcset mit sizes. picture lohnt sich bei Art Direction oder wenn Sie Formate manuell staffeln. Bei Page-Buildern lohnt ein Blick in die Bildeinstellungen des Elements, weil manche Module eigene Größen erzwingen und srcset aushebeln.
Was sollten Sie vor dem Upload mit Bildern erledigen?
Die beste Optimierung ist ein Bild, das gar nicht erst zu groß hochgeladen wird. Legen Sie für Ihre Redaktion feste Startwerte fest und passen Sie sie nur an, wenn Ihr Layout es verlangt:
- Hero-Bilder: Wählen Sie eine Breite, die zum Layout und zur Auslieferung passt.
- Content-Bilder: Stimmen Sie die Bildbreite auf den Platz im Layout ab.
- Thumbnails: Verwenden Sie kleine, zum jeweiligen Layout passende Bilddateien.
- Dateinamen sprechend und kleingeschrieben, mit Bindestrichen statt Leerzeichen:
wordpress-wartung-dashboard.jpgstattIMG_4471.jpg. - Alt-Text als kurze, sachliche Beschreibung dessen, was zu sehen ist. Kein Keyword-Gestopfe, kein „Bild von“.
- EXIF-Daten und eingebettete Farbprofile entfernen, wenn sie nicht gebraucht werden. Das spart Bytes und verhindert, dass Standortdaten im Netz landen.
- Bilder beschneiden statt nur herunterzuskalieren, wenn nur ein Ausschnitt wichtig ist.
- Dateigröße prüfen: Große Fotos zwingen Plugins zu unnötiger Arbeit.
Schon ein Export-Preset in Photoshop, Affinity oder einem kostenlosen Tool wie Squoosh nimmt Ihnen viel ab. Wer regelmäßig dutzende Bilder verarbeitet, baut sich ein kleines Skript, das Größe und Qualität automatisch setzt. Einige Plugins, etwa QuickWebP, füllen außerdem ALT-Text und Titel automatisch aus den Metadaten. Das ersetzt die redaktionelle Prüfung nicht, spart aber Tipparbeit.
Wann nutzen Sie Lazy Loading und wann Preload?
Die Grundregel ist einfach: Alles, was beim Laden nicht sichtbar ist, darf warten. Alles, was im sichtbaren Bereich liegt, soll sofort kommen. Das größte sichtbare Element ist meist das LCP-Bild, oft das Hero-Bild. Nehmen Sie es vom Lazy Loading aus und laden Sie es per Preload vor.
Typische Fehler beim Preload:
- Die Preload-URL stimmt nicht mit der tatsächlich ausgelieferten Datei überein, etwa weil das Plugin WebP ausliefert, der Preload aber die JPEG-Datei anfordert. Dann lädt der Browser beides.
- Die Größenangaben (imagesrcset und imagesizes) fehlen, und mobile Geräte laden die Desktop-Variante vor.
- Zu viele Preloads: Wenn Sie zu viele Bilder vorladen, wird die Priorisierung weniger wirksam.
Achten Sie außerdem auf Caching-Plugins und CDN. Sie schreiben Bild-URLs um oder verändern Header, und dabei können Preload und Lazy Loading ins Leere laufen. Wie Sie Lazy Loading sauber aktivieren, zeigt unsere Anleitung zu Lazy Loading in WordPress, und wie ein Bilder-CDN für WordPress die Auslieferung beschleunigt, steht in einem eigenen Beitrag.
- Lazy Loading für alles unterhalb des ersten Bildschirms.
- Kein Lazy Loading und stattdessen Preload für das LCP-Bild.
- Platzhalter wie LQIP nur gezielt einsetzen, etwa bei sehr großen Galerien.
Profi-Tipp: Öffnen Sie die Seite im Browser, wechseln Sie in die Entwicklertools und prüfen Sie im Netzwerk-Tab, ob das LCP-Bild wirklich als eine der ersten Dateien kommt und nur einmal geladen wird.
Wie gehen Sie bei großen Mediatheken Schritt für Schritt vor?
Tausende Bilder auf einmal zu verarbeiten ist der Moment, in dem Server in die Knie gehen. Bleiben Sie deshalb strukturiert:
- Backup anlegen: Datenbank und den Ordner
wp-content/uploadssichern. Ohne Sicherung kein Bulk-Job. - Testlauf an einer Stichprobe: Optimieren Sie zunächst eine kleine Auswahl an Bildern und prüfen Sie Qualität, Fallbacks und Seitenlayout.
- Queue starten: Beginnen Sie mit den wichtigsten Seiten und stellen Sie die Batch-Größe passend zu Ihren Serverlimits ein. Lieber kleine Pakete wählen, damit der Vorgang nicht abbricht.
- Thumbnails regenerieren: Haben Sie Bildgrößen geändert, erzeugen Sie die Varianten neu. Mit WP-CLI geht das automatisiert und ohne Browser-Timeout.
- Monitoring und Rollback: Behalten Sie Speicherplatz und CPU-Last im Blick und halten Sie die Wiederherstellung der Originale bereit, falls etwas nicht stimmt.
Cloud-Verarbeitung lohnt sich bei sehr großen Beständen, weil sie Ihren Server entlastet. Lokale Verarbeitung passt, wenn Sie Kontingente sparen wollen und genug Serverreserven haben. Für automatisierte Abläufe bringt etwa DropAvif lokale WebP-Konvertierung samt Cloud-AVIF-Option und WP-CLI-Integration mit.
Wie testen und überwachen Sie das Ergebnis?
Gemessen wird in PageSpeed Insights, das neben Lighthouse-Labordaten auch echte Felddaten zeigt. Für Bilder zählen vor allem LCP (wann erscheint das größte Element), CLS (verschiebt sich das Layout) und FCP, dazu INP als Maß für die Reaktionsfähigkeit.
Labordaten helfen beim Fehlersuchen, weil sie reproduzierbar sind. Felddaten zeigen, was echte Besucher erleben, und sind für Core Web Vitals maßgeblich. Dabei zählt das 75. Perzentil: Drei von vier Besuchern sollten einen guten Wert erleben.
Eine praktische Testreihe sieht so aus:
- Baseline messen, bevor Sie irgendetwas ändern.
- Eine Änderung nach der anderen einspielen und neu messen.
- Mobil und Desktop getrennt vergleichen.
- Felddaten nach einigen Wochen am 75. Perzentil auswerten.
- Nach jedem Theme- oder Plugin-Update erneut prüfen und bei Abweichungen Alarm schlagen.
Tiefer in die Metriken steigen Sie mit unserem Beitrag zu den Core Web Vitals unter WordPress ein.
Worauf kommt es bei der Plugin-Auswahl an?
Ein Bildoptimierungs-Plugin muss nicht alles können, aber das Richtige. Prüfen Sie diese Kriterien:
- Automatische Konvertierung nach WebP und AVIF beim Upload.
- Bulk-Queue für bestehende Bilder.
- Lokale Verarbeitung möglich, falls Sie keine Daten an externe Dienste schicken wollen.
- Backup der Originale mit Wiederherstellung.
- Preload-Unterstützung für das LCP-Bild.
- Kompatibilität mit Ihrem Page-Builder und mit WooCommerce.
Wer alles in einem will, schaut sich Optimole an: Es arbeitet cloudbasiert, liefert über ein CDN aus, komprimiert per ML-Verfahren, konvertiert in WebP/AVIF und lädt Bilder verzögert.
Schalten Sie nach der Installation sofort Auto-Optimize, Backup der Originale, Lazy Loading und eine Preload-Liste für Ihre Hero-Bilder ein. Prüfen Sie vorher den Server: aktuelle PHP-Version, GD oder Imagick, genug RAM und eine ausreichende Ausführungszeit für Bulk-Jobs. Ein Cloud-Dienst ist die bessere Wahl, wenn Ihr Hosting knapp bemessen ist oder die Mediathek sehr groß wird.
Was tun bei Upload-Fehlern, fehlenden Bildern und Timeouts?
Die meisten Probleme haben banale Ursachen:
- Upload scheitert: Prüfen Sie memory_limit, max_execution_time und upload_max_filesize in der PHP-Konfiguration. Auch fehlende oder defekte GD/Imagick-Module verursachen Fehler, wie die Diskussion „Der Server kann das Bild nicht verarbeiten“ im WordPress-Forum zeigt.
- Bilder fehlen in der Mediathek: Oft liegen sie noch auf dem Webspace, wie in diesem Forumsfall zu fehlenden Artikelfotos. Schuld sind dann Plugins, Dateirechte oder ein eingespieltes Backup. Auch bestimmte WordPress-Versionen hatten Anzeigeprobleme in Multisite-Installationen.
- Timeouts bei Bulk-Jobs: Batch-Größe reduzieren, Cloud-Verarbeitung nutzen oder per WP-CLI arbeiten.
- Danach: Dateirechte prüfen, Thumbnails neu generieren, Theme und Plugins nacheinander deaktivieren, um Konflikte zu finden.
Kommen Sie allein nicht weiter, übernehmen wir die WordPress Problemlösung für Sie.
Wie schützen Sie Ihre Bilder und Ihre Seite bei der Bildintegration?
Bilder sind nicht nur Ladezeit, sondern auch Angriffsfläche und Kostenfaktor. Der Klassiker ist Hotlinking: Fremde Seiten binden Ihre Bilder direkt ein, Ihr Server liefert aus, Ihr Traffic-Kontingent wird belastet, und Sie haben nichts davon. Dagegen helfen Regeln in der .htaccess oder in der Server-Konfiguration, die Bildanfragen von fremden Domains blockieren oder auf ein Platzhalterbild umleiten. Achten Sie dabei auf Ausnahmen für Ihr CDN, Suchmaschinen und Social-Media-Vorschauen, sonst verschwinden Vorschaubilder beim Teilen.
Weitere Punkte, die oft vergessen werden:
- Upload-Rechte begrenzen: Nur Rollen, die wirklich Medien hochladen müssen, bekommen die Berechtigung.
- Dateitypen einschränken: SVG-Uploads nur zulassen, wenn sie bereinigt werden, denn in SVG-Dateien kann Code stecken.
- Ausführung von Skripten im Upload-Ordner verbieten, damit eingeschleuste Dateien nichts anrichten können.
- Metadaten prüfen: EXIF-Daten können Standorte oder Gerätedaten enthalten, die Sie nicht veröffentlichen wollen.
- Externe Dienste prüfen: Wer Bilder über Cloud-Optimierer oder CDN ausliefert, gibt Daten an Dritte. Klären Sie das datenschutzrechtlich, bevor Sie live gehen.
- Originale sichern: Ein Backup der unkomprimierten Dateien schützt Sie vor Datenverlust durch fehlerhafte Bulk-Jobs.
Wie Sie Ihre Seite insgesamt absichern, haben wir in unserem Beitrag zur WordPress-Sicherheit zusammengefasst.
Wie wir Sie bei der Bildoptimierung unterstützen
Wenn Sie keine Lust haben, Plugins zu vergleichen und Bulk-Jobs zu überwachen, übernehmen wir das mit einer digitalen Visitenkarte für BeOptimal, die SEO-optimierte Inhalte bietet. Unser Team setzt den ganzen Workflow für Sie um, vom Audit bis zur Wartung. Schauen Sie sich dazu unsere WordPress Wartung an.
Das bekommen Sie von uns:
- Performance-Audit mit klaren Prioritäten für Ihre wichtigsten Seiten.
- Bulk-Optimierung Ihrer Mediathek mit Backup und Rollback-Plan.
- Wartungsverträge.
Sinnvoll ist das vor allem bei großen Mediatheken, kritischen Core-Web-Vitals-Werten oder wenn Ihnen schlicht die Zeit fehlt. Rufen Sie uns an oder schreiben Sie uns über Werbeeinfach: Im Erstgespräch klären wir, wo bei Ihnen der größte Hebel liegt.
FAQ
Warum werden meine Bilder in WordPress nicht mehr angezeigt?
Meist liegen die Dateien noch auf dem Server, aber Dateirechte, ein Plugin oder ein eingespieltes Backup stören die Anzeige. Prüfen Sie zuerst Rechte und Upload-Ordner, deaktivieren Sie dann testweise Plugins und erzeugen Sie die Thumbnails neu. In seltenen Fällen steckt ein Fehler der WordPress-Version dahinter.
Wie kann ich Bilder in WordPress kleiner machen?
Reduzieren Sie vor dem Upload die Pixelmaße, komprimieren Sie die Dateien und konvertieren Sie sie in WebP oder AVIF. Ein Plugin wie ShortPixel oder QuickWebP erledigt das automatisch beim Hochladen. Bestehende Bilder verarbeiten Sie per Bulk-Optimierung, nach einem Backup.
Wie kann ich WordPress für das SEO optimieren?
Schnelle Ladezeiten, saubere Core Web Vitals und gepflegte Bilddaten bilden die Basis. Achten Sie auf komprimierte Bilder, sprechende Dateinamen, sinnvolle Alt-Texte und ein vorgeladenes LCP-Bild. Darauf aufbauend lohnt sich eine strukturierte Betreuung, wie wir sie bei der Suchmaschinenoptimierung anbieten.
Wie viele Bilder lade ich per Lazy Loading und was lade ich sofort?
Alles außerhalb des ersten Bildschirms laden Sie verzögert. Das LCP-Bild, meist das Hero-Bild, laden Sie sofort und per Preload vor. So erscheint der wichtigste Inhalt zuerst, ohne dass der Rest die Seite bremst.
Quellen
- Optimize Images | PageSpeed Insights | Google for Developers
- QuickWebP – WebP & AVIF Image Optimizer, Compression & SEO for WordPress
