Bildoptimierung für WordPress: Wie du deine Bilder für bessere Ladezeiten optimierst
- 22shares
- Facebook21
- Pinterest1
- Twitter0
- LinkedIn0
Bilder sind ein wesentlicher Bestandteil Ihrer WordPress-Website. Sie helfen, Inhalte ansprechender und lebendiger aussehen zu lassen und sorgen dafür, dass deine Besucher sich wohlfühlen.
Allerdings können große oder unoptimierte Bilddateien dazu führen, dass deine Website langsam wird und Nutzer möglicherweise abspringen, bevor die Seite vollständig geladen ist. Deshalb ist es wichtig, deine Bilder so zu optimieren, dass sie schnell laden und die Benutzererfahrung nicht beeinträchtigen.
In diesem Artikel zeige ich dir alles, was du über die Optimierung von Bildern für WordPress wissen musst. Ich gehe auf die verschiedenen Möglichkeiten ein, mit denen du die Größe deiner Bilder reduzieren und damit die Ladezeit verbessern kannst. Zudem erkläre ich dir, worauf du bei der Auswahl des richtigen Dateiformats achten musst und welche Tools du verwenden kannst.
Also los gehts.
Inhaltsverzeichnis
Warum Bildoptimierung für deine WordPress-Seite wichtig ist
Bilder sind ein wesentlicher Bestandteil einer WordPress-Website und stellen die erste Verbindung zu deinen Besuchern her. Wenn du Bilder auf deiner Website hast, die nicht optimiert sind, kann es zu Verzögerungen beim Laden der Seite kommen. Das bedeutet, dass deine Besucher möglicherweise die Geduld verlieren, bevor sie überhaupt die Chance haben, deinen Inhalt zu sehen.
Mit anderen Worten: Wenn du nicht dafür sorgst, dass deine Bilder für bessere Ladezeiten optimiert werden, hat das einen negativen Einfluss auf den Erfolg deiner Website.
Optimierst du jedoch die Bilddateien vor dem Hochladen, steigerst du nicht nur die Ladezeiten, sondern verbesserst auch die Nutzererfahrung und schnelle Website wirkt sich auch positiv auf deine Rankings aus.
Es ist also offensichtlich: Bildoptimierung ist ein wichtiger Aspekt für eine erfolgreiche WordPress-Website. Indem du Bilddateien optimierst, kannst du helfen, deine Seite schneller zu laden und so ein besseres Nutzererlebnis für deine Besucher zu bieten.
Wie du deine Bilder in 4 Schritten für die Ladezeiten deiner WordPress-Website optimierst
Im Folgenden zeige ich dir die 4 Schritte, die du zur Optimierung deiner Bilder durchführen solltest.
Das Ganze wird weit weniger technisch als du vielleicht vermutest.
1. Bilder richtig skalieren - Bildgröße
Im ersten Schritt stellst du sicher, dass du die Bilder in der richtigen Größe hochlädst. Also, wenn du z.B. ein Bild für einen Blogbeitrag benötigst und dieses wird nur in einer Breite von beispielsweise 960px angezeigt, dann brauchst du es auch nicht in einem größeren Format hochzuladen.
Die Höhe und Breite deines Bildes kannst du mit einem beliebigen Bildbearbeitungsprogramm bearbeiten. Selbst mit Vorschau auf dem Mac kannst du das, wie im Bild zu sehen, tun.
Hier gibst du eben deine benötigte Breite und Höhe an und kannst auch gleich die Auflösung reduzieren. Da du die Bilder nicht für den Print benötigst, sollte eine Auflösung von 72 dpi in den meisten Fällen völlig ausreichen.
Du siehst auch gleich, dass alleine diese Anpassungen die Dateigröße des Bildes in meinem Beispiel um mehr als 50 % reduziert.
2. Bilder komprimieren - Dateigröße
Im zweiten Schritt komprimierst du die Bilder. Dabei werden unnötige Daten des Bildes entfernt, die an der Wahrnehmung keinen sichtbaren Unterschied machen.
Dazu kannst du einfach ein online Tool wie tinypng nutzen. Hier musst du nur die Bilder hochladen und sie werden automatisch komprimiert. In meinem Beispiel ist das von 250 KB auf unter 50 KB verkleinert worden, also um satte 81 %.
Diesen Schritt kannst du dir theoretisch auch sparen. Denn es gibt Plugins, wie Shortpixel*, Smush, Imagify oder auch EWWW Image Optimizer, die deine Bilder beim Hochladen automatisch komprimieren.
Ich sage, du kannst dir diesen Schritt “theoretisch” sparen, da die meisten Plugins erst in der Premium-Version das meiste aus der Komprimierung rausholen kann es schon Sinn machen, die Bilder vorher zu komprimieren.
Da wir für die nächsten beiden Schritte aber sowieso eins der Plugins benötigen, kannst du aber durchaus darüber nachdenken in eine Premium-Version zu investieren. Diese bringen natürlich noch weitere Features mit als nur die stärkere Komprimierung, aber das würde hier den Rahmen sprengen.
Im Zweifelsfall kannst du deine Bilder auch erst komprimieren und anschließend beim Hochladen durch eines der Plugins erneut ein wenig komprimieren lassen.
In diesem Beispiel wurde das erste Bild vorher mit tinypng komprimiert und anschließend beim Hochladen durch EWWW Image Optimizer erneut komprimiert. Das zweite Bild wurde vorher nicht komprimiert und nur durch das Plugin optimiert.
Du siehst selbst ein bereits komprimiertes Bild kann noch etwas verkleinert werden. Mir sind dadurch noch keine Qualitätsverluste aufgefallen.
Aber da ich faul bin, nutze ich selbst meist nur ein Plugin und verzichte auf die “manuelle” Komprimierung.
3. Bilder in modernen Dateiformaten bereitstellen - .webp, .avif
Neben der Skalierung und Komprimierung deiner Bilder kannst du sie auch noch zusätzlich in einem moderneren Dateiformat ausliefern lassen. Das sorgt für eine zusätzliche Optimierung, da die Bilder in .webp oder .avif noch etwas kleiner sind als .png oder .jpg.
Auch hierbei helfen die oben genannten Plugins.
Im Beispiel von EWWW Image Optimizer musst du lediglich unter Einstellungen > EWWW Image Optimizer die WebP-Konvertierung aktivieren und anschließend benötigst du zur Auslieferung der Bilder im .webp-Format eine Anpassung deiner .htaccess Datei. Das Plugin kann diesen Code-Schnipsel allerdings für dich einfügen, dazu musst du lediglich auf den Button klicken, um die Rewrite-Regeln zu setzen.
Nach dem Setzen der Regel sollte sich das rote PNG Bildchen in ein grünes WEBP Bild ändern und dir somit anzeigen, dass die WebP Bilder ausgeliefert werden können.
Auch wenn hier in meinem Beispiel der Selbsttest fehlgeschlagen ist (wie im Hinweistext zu lesen) war das Bildchen grün und auch die Auslieferung hat funktioniert. Ich hatte bisher noch nie Probleme damit, dass die Bilder nicht in dieser Weise in .webp ausgeliefert werden können, aber sollte dein Server aus irgendeinem Grund anders konfiguriert sein, hast du in den meisten Plugins die Möglichkeit, die Auslieferungsmethode zu ändern.
Shortpixel* kann dir neben .webp die Bilder auch in .avif konvertieren und ausliefern. Dieses Format ist nochmal ein wenig kompakter, aber da es auch neuer ist, unterstützen noch nicht alle Browser dieses Format. Daher ist .webp schon völlig ausreichend.
Aber auch .webp kann von einem Browser nicht unterstützt werden, was dann? Für diese Fälle ist bei der Auslieferung ein Fallback implementiert, der dafür sorgt, dass die Bilder im ursprünglichen Format (.png, .jpg etc.) ausgeliefert werden.
Du hast also keine Nachteile, wenn du die Bilder in modernen Formaten ausliefern lässt. Außer vielleicht etwas mehr Speicherplatz, den du benötigst, um die Bilder im entsprechenden Format vorzuhalten. Aber das sollte dich nicht davon abhalten.
4. Bilder erst laden, wenn sie in den sichtbaren Bereich kommen - Lazy Load
Nachdem die Bilder nun skaliert, komprimiert und in einem modernen Format ausgeliefert werden, bleibt nur noch ein kleiner Schritt.
Mit der etwas unscheinbaren Einstellung Lazy Load kannst du dafür sorgen, dass Bilder erst geladen werden, wenn sie beim Scrollen in den sichtbaren Bereich kommen.
Dadurch müssen die Bilder nicht geladen werden, wenn sie noch gar nicht angezeigt werden.
Das sorgt gerade für mobile Geräte und einer mobilen Verbindung für weniger Datenverbrauch.
Fazit: Warum Bildoptimierung für WordPress wichtig ist
Durch diese 4 simplen Schritte sorgst du dafür, dass deine Bilder weniger Daten verbrauchen und somit deine Website schon deutlich schneller wird. Dank der verschiedenen Plugins sollte es eigentlich auch außer Frage stehen, ob du deine Bilder optimieren solltest.
Der einzige Fall, der mir jetzt einfällt, in dem du deine Bilder vielleicht nicht so stark komprimieren möchtest ist, wenn du Fotograf bist und die Bilder dein Herzstück sind.
Ansonsten würde ich sagen happy optimization 🙂
Wie immer, solltest du noch Fragen haben, nutze die Kommentarfunktion unten.
WordPress-Fan seit über 10 Jahren und Autor von Blogcraft.io
WordPress-Fan seit über 10 Jahren und Autor von Blogcraft.io
Bei Links, die mit einem * markiert sind, handelt es sich um sog. Affiliate-Links. Wenn du einen Kauf über diese Links tätigst, bekommen wir eine Provision und du kannst unsere Arbeit aktiv unterstützen. Danke dafür ❤️
Für dich entstehen dadurch keine weiteren Kosten und du kannst dir sicher sein, dass wir nur Tools empfehlen, die wir auch wirklich für gut erachten.
- 22shares
- Facebook21
- Pinterest1
- Twitter0
- LinkedIn0