Optimierung von Bildern in WordPress mit Lazy Loading und Webp-Format

Die Bildoptimierung in WordPress bezieht sich auf den Prozess der Optimierung von Bildern, um ihre Leistung zu verbessern und ihre Dateigröße zu verringern, ohne ihre visuelle Qualität wesentlich zu beeinträchtigen.

Sehen wir uns einige Techniken und Praktiken an, mit denen die Ladegeschwindigkeit von Bildern auf einer WordPress-Website verbessert werden kann. Dies führt in der Regel zu einer verbesserten Benutzerfreundlichkeit und einer besseren Platzierung in Suchmaschinen (denn Suchmaschinen mögen keine langsam ladenden Websites).

Sehen wir uns einige gängige Techniken zur Optimierung von Bildern in WordPress an.

Hierbei geht es darum, die Dateigröße eines Bildes zu verringern, ohne dass die visuelle Qualität zu sehr leidet. Sie können Bilder mit verschiedenen Methoden komprimieren und Online-Tools zur Bildkomprimierung, WordPress-Plugins oder Software zur Bildoptimierung verwenden.

Die Größe von Bildern sollte an ihre Anzeigegröße auf der Website angepasst werden, um unnötige Bandbreitennutzung zu vermeiden. Versuchen Sie dennoch, die Anzahl der Bildgrößen auf ein Minimum zu beschränken, denn andere Plugins und sogar Themes können zusätzliche Bildgrößen in WordPress registrieren. Glücklicherweise können Sie diese deaktivieren, also seien Sie vorsichtig.

Das Zuschneiden ermöglicht es Ihnen, unerwünschte Teile eines Bildes zu entfernen, die für den Inhalt nicht wesentlich sind. WordPress verfügt über 3 eingebaute Zuschneidegrößen, Thumbnail, Medium und Large. Nur bei der Thumbnail-Größe gibt es ein Kontrollkästchen, das das Zuschneiden auf die exakten Maße erlaubt, bei den anderen Größen wird die Größe proportional angepasst. Es gibt eine Möglichkeit, die Abmessungen über Ihren Verwaltungsbildschirm zu ändern. Besuchen Sie Einstellungen > Medien, um sie zu ändern.

Profi-Tipp: Sie müssen Ihre Miniaturbilder neu generieren (d. h. alle Größen, die kleiner sind als das Original), damit die vorhandenen Bilder auf die Größen der Medieneinstellungen zugeschnitten werden. Siehe mehr über Kontrolle der Bildgrößen in WordPress.

Hinweis: Wenn Sie, aus welchen Gründen auch immer, hochauflösende Bilder auf Ihrer Website haben möchten, dann versuchen Sie, die Abmessungen auf die maximale Breite oder Höhe Ihrer größten Ausschnittgröße zu beschränken.

Die Wahl des richtigen Dateiformats für Bilder kann die Dateigröße und Ladegeschwindigkeit erheblich beeinflussen. JPEG eignet sich in der Regel für Fotos und komplexe Bilder, während PNG besser für Bilder mit transparentem Hintergrund oder einfache Grafiken geeignet ist. Mit WebP können Sie das Beste aus beiden Welten nutzen: kleine Dateigrößen und sehr geringe Einbußen bei der visuellen Qualität.

Beim "Lazy Loading" werden die Bilder erst dann geladen, wenn sie aus Sicht des Besuchers sichtbar werden, und nicht auf einmal. Diese Technik reduziert die anfängliche Ladezeit der Seite, insbesondere bei Seiten mit vielen Bildern. Seit WordPress 5.5 ist "Lazy Loading" nun eine Standardfunktion.

Beim Caching werden Bilder im Browser des Besuchers gespeichert, so dass sie bei späteren Seitenaufrufen lokal abgerufen und nicht erneut heruntergeladen werden müssen. Dadurch wird die Serverlast verringert und das Laden der Seite beschleunigt. Verwenden Sie Plugins wie WP Super Cache (was wir auf wplake.org verwenden), W3 Total Cache oder LiteSpeed Cache, um den Cache für Ihre Website zu aktivieren.

Diese Techniken sind eigentlich gar nicht so komplex, sie erfordern nur ein paar mehr Schritte. Aber wenn Sie sie verwenden, werden Sie wahrscheinlich auch andere Vorteile haben. Schauen wir uns das mal an.

Der Einsatz eines CDN hilft, Bilder effizienter zu liefern. Natürlich ist ein CDN viel mehr als nur ein Bildlieferdienst. Kurz gesagt, es beschleunigt Ihre Website, indem es Kopien auf Servern speichert, die über verschiedene geografische Standorte verteilt sind. Dadurch werden die Entfernung und die Latenzzeit zwischen dem Browser des Nutzers und dem Bildserver verringert.

Es gibt mehrere WordPress-Plugins, wie Smush, Imagify und EWWW Image Optimizer, die Bildoptimierungsprozesse automatisieren. Ich würde immer empfehlen, sie zuerst in einer Testumgebung auszuprobieren, bis Sie wissen, was sie tun. Denn wenn Sie sich nicht sicher sind, was es tut, könnte es zum Beispiel Ihre Originalbilder löschen (das heißt, wenn Sie etwas anderes versuchen, werden die neuen Bilder nicht von den Originalen abgeschnitten, sondern von einer kleineren Version des Bildes). Darüber hinaus können diese Plugins Aufgaben wie Komprimierung, Größenanpassung, Lazy Loading und Caching übernehmen und so den Optimierungs-Workflow vereinfachen.

Profi-Tipp: Achten Sie darauf, dass Sie Schritte nicht überschreiben oder duplizieren. Wenn Sie z.B. ein Bildoptimierungs-Plugin haben, das auch Caching anbietet, schalten Sie es nicht ein, wenn Sie bereits ein Cache-Plugin verwenden.

Bei der Optimierung der Seitengeschwindigkeit und der Bilder ist es oft ein Versuch-und-Irrtum-Szenario, aber seien Sie sich darüber im Klaren, dass, wenn Ihre Website nicht viele Bilder enthält, die Auswirkungen nicht so groß sein werden, wie wenn das Gegenteil der Fall wäre.

Durch die Anwendung dieser Techniken können Sie die Ladegeschwindigkeit und die Leistung von Bildern auf Ihrer WordPress-Website erheblich verbessern, was zu einem besseren Benutzererlebnis und potenziell zu einer besseren Platzierung in Suchmaschinen führt. Es gibt noch viele andere Techniken, mit denen Sie Ihre WordPress-Website optimieren können, denn letztendlich verbessert eine schnelle Website die Benutzerfreundlichkeit, und wie Sie inzwischen wissen sollten, lieben Suchmaschinen dies.

Ich hoffe, Sie haben diesen Artikel nützlich gefunden.

Viel Spaß beim Optimieren!