WPLake > Lernzentrum > Optimierung von Bildern in WordPress mit Lazy Loading und Webp-Format
  • English
  • Español
  • Français
  • Italiano

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

Steigern Sie die Leistung von WordPress mit Bildoptimierung: Verringern Sie die Dateigröße und nutzen Sie Caching mit CDN. Lernen Sie Plugins kennen, um Aufgaben für eine nahtlose Optimierung zu automatisieren.
Cameras take large photos

Die wichtigsten Punkte auf einen Blick

  1. Die Bildoptimierung in WordPress verbessert die Leistung: Es geht darum, die Dateigröße zu reduzieren und gleichzeitig die visuelle Qualität beizubehalten, was zu einer verbesserten Nutzererfahrung und Suchmaschinenplatzierung führt.
  2. Allgemeine Techniken zur Optimierung von Bildern: Dazu gehören Komprimierung, Größenanpassung, Zuschneiden und die Wahl des geeigneten Dateiformats wie JPEG, PNG oder WebP.
  3. Lazy Loading verbessert die Ladezeit von Seiten: Bilder werden nur geladen, wenn sie für den Besucher sichtbar sind, wodurch die anfängliche Ladezeit verkürzt wird. Diese Funktion ist jetzt standardmäßig in WordPress 5.5 enthalten.
  4. Bild-Caching beschleunigt das Laden von Seiten: Das Speichern von Bildern im Browser des Besuchers verringert die Serverlast und beschleunigt das Laden der Seiten. Dies wird durch Plugins wie WP Super Cache oder W3 Total Cache ermöglicht.
  5. Verwendung eines Content Delivery Network (CDN): Es stellt Bilder effizient bereit, indem es Kopien auf Servern speichert, die über verschiedene geografische Standorte verteilt sind, wodurch die Latenzzeit verringert und die Geschwindigkeit der Website verbessert wird.
  6. WordPress-Plugins automatisieren die Bildoptimierung: Tools wie Smush, Imagify und EWWW Image Optimizer übernehmen Aufgaben wie Komprimierung, Größenanpassung, Lazy Loading und Caching und vereinfachen so den Optimierungsprozess.

Inhaltsübersicht

Was ist Bildoptimierung?

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).

Allgemeine Techniken zur Optimierung von Bildern

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

Bildkomprimierung

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.

Größenänderung und Zuschneiden

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.

Visually the same, but much smaller
Optisch sind die Bilder identisch, aber das optimierte Bild hat eine um 76 % kleinere Dateigröße.

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.

Dateiformate

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.

Langsames Laden

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.

Bild-Caching

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.

Komplexe Techniken zur Optimierung von Bildern

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.

Content Delivery Network (CDN)

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.

WordPress-Plugins

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.

Schlussfolgerung

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!

War dieser Artikel hilfreich?

Völlig nutzlos

Geringfügig hilfreich

Sehr hilfreich

FAQ-Modus

/

Lernmodus

  1. Warum ist Bildoptimierung wichtig?

    Die Optimierung von Bildern verbessert die Ladegeschwindigkeit der Website, erhöht die Benutzerfreundlichkeit und kann sich positiv auf die Platzierung in Suchmaschinen auswirken.

  2. Was sind einige gängige Techniken zur Optimierung von Bildern in WordPress?

    Zu den gängigen Techniken gehören Bildkomprimierung, Größenanpassung, Zuschneiden, Auswahl geeigneter Dateiformate, träges Laden und Zwischenspeichern von Bildern.

  3. Welche beliebten WordPress-Plugins gibt es für die Automatisierung der Bildoptimierung?

    Beliebte Plugins sind Smush, Imagify und EWWW Image Optimizer, die Aufgaben wie Komprimierung, Größenanpassung, träges Laden und Caching automatisieren.

  4. Wie funktioniert das "Lazy Loading" in WordPress?

    Lazy Loading in WordPress sorgt dafür, dass Bilder erst dann geladen werden, wenn sie im Viewport des Besuchers sichtbar werden, wodurch die anfängliche Ladezeit der Seite verkürzt wird.

Ähnliche Artikel

Inhaltliche Links (13)

Über den Autor

Baxter Jones

With over 15 years of experience in the web industry, I specialize in design, user experience, and web best practices. I have a keen eye for detail and thrive on following a structured process in my work. I’m passionate about WordPress, considering it the best innovation since sliced bread. When I’m not at my computer, you’ll find me enjoying time in the garden.

0 Kommentare

    Hinterlassen Sie einen Kommentar

    Antwort an 

    Bitte seien Sie rücksichtsvoll, wenn Sie einen Kommentar hinterlassen.

    Nicht öffentlich gezeigt

    Got it