Bilder in WordPress optimieren und effektiv nutzen

Bilder optimieren = geringere Ladezeit = besseres Ranking

Bilder in WordPress optimierenDie Optimierung von Bildern in WordPress erledigt sich leider nicht von ganz alleine, sondern erfordert etwas Arbeit. Hier einige Tipps, wie Bilder optimiert werden können, damit sie in der korrekten Größe schnellstmöglich geladen werden können.

Bildgröße festlegen

Wenn du in WordPress ein Bild hochlädst, hast du verschiedene Möglichkeiten, die Bildgröße betreffend. Zur Auswahl stehen „Miniaturbild“, „Mittelgroß“ und „Vollständige Größe“. Diese können unter „Einstellungen -> Media“ verändert und angepasst werden.

Media-Einstellungen

In meinen Augen macht es Sinn, „Mittelgroß“ auf die maximale Breite des Contentbereiches einzustellen. Dieser ist allerdings bei unterschiedlichen Themens auch unterschiedlich groß. Du kannst die Breite entweder in der Datei „functions.php“ nachschauen (die Variable lautet „$content_width“), oder mit einem Measuring Tool am Monitor abmessen.

Vermeide, Bilder in „vollständiger Größe“ anzeigen zu lassen

Wenn du Bilder in „vollständiger Größe“ anzeigen lässt, skalieren dennoch die meisten Themens zu große Bilder automatisch per CSS herunter, damit sie in’s Layout passen. Dadurch merkst du selten, dass du gerade ein riesiges Bild hochgeladen hast. Da sich durch die CSS-Skalierung aber die Bildgröße nicht ändert, dauert das Laden solcher Bilder sehr viel länger, als wenn sie bereits im Vorfeld auf die benötigte Maximalgröße heruntergerechnet wurden. Verwende deshalb möglichst die Option „Mittelgroß“. Damit wird automatisch das von WordPress heruntergerechnete Bild in der entsprechenden Größe verwendet.

Eine weitere Möglichkeit ist die Nutzung des „JetPack„-Plugins. Hier kannst du das „Photon“-Modul aktivieren, und dieses sorgt dann dafür, dass die Bilder nicht größer verwendet werden, als es unbedingt sein muss.
Ein weiterer Vorteil von JetPack ist die Möglichkeit, deine Bilder über die Server von WordPress.com ausliefern zu lassen. Damit wird dein Webserver entlastet, was die Ladezeit deiner Website verbessert (und damit wieder deinem Ranking hilft).

Watch the little things; a small leak will sink a great ship - Benjamin Franklin Klick um zu Tweeten

Bilder / Thumbnails neu generieren

Wenn du dein Theme wechselst oder die Bildgrößen in den Media-Einstellungen geändert hast, musst du einmal alle Bildgrößen neu berechnen lassen, da die Bilder ansonsten nicht optimal dargestellt werden können (die Bilder werden bei einem Wechsel nicht automatisch neu berechnet). Um dies zu tun, gibt es zwei recht gute Plugins:

Regenerate Thumbnails“ und „AJAX Thumbnail Rebuild

Je nach Anzahl der Bilder auf deiner Website kann das etwas dauern, aber die Plugins bringen alle Bilder in die benötigte Größe (so lange das hochgeladene Originalbild die erforderliche Maximalgröße hat).

Beitrags-Bilder updaten

Die Plugins kümmern sich leider nicht um alle Bilder. Bilder, die du innerhalb der Beiträge verwendest, werden leider nicht berücksichtigt. Sollten also die Bilder in den Beiträge nicht mehr in das neue Layout passen, ist der einfachste Weg, sie zu löschen und neu hochzuladen. Wenn du sehr viele Bilder auf diese Art neu einfügen musst, kannst du auch das Plugin „Replace Content Image Size“ ausprobieren. Es funktioniert eigentlich ziemlich gut, wurde aber längere Zeit nicht upgedated. Deshalb solltest du, bevor du es ausprobierst, auf alle Fälle eine Sicherung deiner Daten und deiner Datenbank durchführen.

Lazy Load

Das Plugin „Lazy Load Images“ ist ein weitere Plugin, welches ich dir empfehlen möchte. Das Plugin verzögert das Laden der Bilder bis zu dem Zeitpunkt, an dem sie wirklich benötigt werden. Das bedeutet, dass Bilder, die weiter unten auf der Seite eingesetzt sind, erst dann geladen werden, wenn der User nach unten scrollt und die Bilder in den sichtbaren Bereich kommen. Dadurch wird die Ladezeit der Seite verringert (da die Bilder ja nicht alle geladen werden).

Auch „Lazy Load“ wurde schon längere Zeit nicht mehr upgedated, funktioniert aber mit der aktuellen Version problemlos. Dennoch empfehle ich auch hier eine Sicherung der Daten und der Datenbank.

Wichtig ist zu verstehen, dass Bilder grundsätzlich die Ladezeit der Website erhöhen. Natürlich sind Bilder wichtig und auch sinnvoll. Dennoch solltest du dir überlegen, ob du in einem Beitrag 10 Bilder posten muss – oder ob es vielleicht nicht auch weniger tun. Letztlich bedeutet jedes Bild weniger eine Verringerung der Ladezeit und damit eine Optimierung der Website – und damit auch ein besseres Ranking.

Zusammenfassung

  • Grundsätzlich gilt: Je größer die Bilder und je mehr Bilder, desto länger die Ladezeiten
  • Nutze keine Bilder in „vollständiger Größe“
  • Nutze für die gesamte Contentbreite die Bildgröße „Mittelgroß
  • Passe die Einstellung dafür in den Medien-Einstellungen an
  • Wenn du möchtest, nutze JetPack zur Optimierung der Bildgrößen und zur Auslieferung der Bilder über wordpress.com
  • Nach einem Wechsel des Themes oder der Einstellungen musst du ALLE verwendeten Bilder neu generieren, damit sie wieder optimal zum Layout passen
  • Nutze Lazy Load zur Verbesserung deiner Performance
2017-10-12T16:55:36+00:00 SEO|0 Kommentare

Hinterlasse einen Kommentar