Blog-Bilder optimieren – Kurze Ladezeit für WordPress

Ein wichtiger Faktor für eine gute Sichtbarkeit in Suchmaschinen ist die Ladezeit der Webseite. Hierbei wird ermittelt wie lange es dauert, bis die Seite vollständig beim Nutzer im Browser geladen ist.

Seit 2009 ist die Geschwindigkeit Ranking-Faktor bei Google. Und sie ist nicht nur für Google, sondern für alle Nutzer wichtig. Der User nimmt bewusst oder unbewusst die Ladezeit wahr und klickt weiter, wenn es zu lange dauert.

Untersuchungen haben ergeben, daß eine zu lange Ladezeit sich negativ auf die Verkäufe der Seite auswirkt. Pro Sekunde, die die Internetseite lädt, nimmt die Besucher-Zufriedenheit ab. Der Leser klickt beim Warten einfach weg.

Da wir mit unseren Blogs und Shops aber eine größtmögliche Zufriedenheit unserer Besucher erreichen wollen, sollten wir einen großen Augenmerk auf die Ladezeit legen.  Anhand von Online-Diensten wie z. B.

lässt sich die Ladezeit sehr schnell ermitteln.

Ladezeiten für Bilder verringern

Ein erster Schritt für die Optimierung ist die Ladezeit der Bilder zu verringern.

Vielen WordPress-Bloggern ist der Zusammenhang zwischen hochauflösenden Bildern und Ladezeiten nicht klar. Gerade zu Beginn, wenn die ersten Schritte mit WordPress gemacht werden, ist die Verwendung von hochauflösenden Bildern oft ein Problem. Aber auch bei erfahrenen Bloggern kann sich der ein oder andere Flüchtigkeitsfehler einschleichen.

Auf keinen Fall sollte man die Bilder direkt aus der Kamera auf den Blog hochladen.

Bilder verlustfrei komprimieren

Bilder für die Anzeige im Internet lassen sich problemlos komprimieren. Die Bildqualität wird dabei nur unwesentlich geringer. Im Gegensatz zu Printmedien kann die Auflösung eines Fotos für das Web deutlich geringer ausfallen.

vorher: unkomprimiert Bild 50 KB groß

nachher: komprimiert Bild 37 KB groß

Optimierungspotential ermitteln

Der schnellste und auch einfachste Weg um zu prüfen, wie viel man optimieren kann, ist ein Test mit Google Page Speed Insights. Hierzu rufen wir die Webseite auf und geben unsere Seitenadresse ein. Ein Klick auf „ANALYSIEREN“ führt die Prüfung aus.

In kurzer Zeit wird die Seite von Google analysiert und das Ergebnis der Prüfung angezeigt. Google unterscheidet hierbei zwischen mobiler Nutzung und Anzeige auf einem Desktop-Computer.

Unter der Sektion „Bilder optimieren“ wir die mögliche verlustfreie Reduzierung angezeigt.

Optimierung mit Google Page Speed Insights

Wie man auf den ersten Blick erkennen kann, ist reichlich Optimierungspotenzial vorhanden! Der größte Stolperstein für eine schnelle Seite sind (fast immer) zu große Bilder.

Optimierte Bilder von Google herunterladen

Nach der Analyse können wir die verlustfrei komprimierten Bilder direkt herunterladen. Hierzu sind keine weiteren Tools notwendig.

Am Ende der Seite (Google Page Speed Insights) befindet sich der Download-Link. In einer ZIP-Datei können wir die komprimierten Bilder als Paket herunterladen.

Komprimierte Bilder von Google herunterladen

Die Bilder auf unserer Webseite können wir im Anschluss gegen die optimierten Bilder tauschen.

Wie ersetze ich ein Bild?

Um ein Bild zu ersetzen kann man es über die WordPress-Medienbibliothek einfügen und im Beitrag einbinden. Dabei sollte man das alte Bild aus der Mediathek löschen, wenn man es nicht mehr benötigt.

Leichter und einfacher geht es mit dem Plugin: Enable Media ReplaceEs löscht das vorhandene Bild und fügt das neue Bild an seiner Stelle ein. Alle Verlinkungen werden dabei automatisch aktualisiert. Das ist praktisch und geht deutlich besser, als jedes Bild einzeln zu ersetzen.

Nach der Installation des Plugins können wir die Funktion „Eine neue Datei hochladen“ in den Bildeigenschaften finden.

Neue Datei nochladen nach Komprimierung WordPress

Online-Dienste für die Optimierung von Bildern

Wenn ich meine Beiträge schreibe optimiere ich die Bilder bevor ich sie in einen Beitrag einfüge.

Hierzu nutze ich fast ausschließlich den kostenlosen Dienst von TinyPNG. Auf der Internetseite kann man bis zu 20 Bilder gleichzeitig hochladen und optimieren.

Zur Optimierung sind nur die Bilddateien unter https://tinypng.com hochzuladen. Der Dienst wählt automatisch die passende Optimierung aus. Dies funktioniert für JPGs und PNGs.  Als Benutzer braucht man keine weiteren Einstellungen vornehmen. Die Optimierung ist innerhalb 1 – 2 Sekunden durchgeführt.

Dieses Tool ist auch als WordPress-Plugin verfügbar. Mit der kostenlosen Version kann man nur eine begrenzte Anzahl Bilder pro Monat optimieren. Wer sehr viele Blogbeiträge schreibt und eine Menge Bilder optimiert möchte kann auf das kostenpflichtige Plugin zurückgreifen.

Neben TinyPNG sind weitere Dienste gratis die einen ähnlichen Funktionsumfang bieten:

Welches Bildformat ist das richtige?

Bereits beim Speichern des Bildes sollte man auf das richtige Format achten. Fotos speichert man als JPG, Grafiken als PNG. Das hält die Dateigröße klein und erleichtert die Komprimierung.  Wer sich mehr über Bildformate informieren will findet einen ausführlichen Artikel bei Pixx.io.

Bildgröße in Pixel – Höhe und Breite

Je nach Verwendungszweck sollten alle unsere Bilder nur so groß wie nötig sein. Die Optimierung beginnt beim Speichern der richtigen Bildgröße.

Bilder für das Beitragsbild (featured Image) sollten den Abmessungen des Themes entsprechen. Auskunft bietet die Dokumentation, sie sollte angeben in welcher Größe man die Bilder bereitstellt. Fehlt diese Information kann der Autor des Themes sicherlich Auskunft geben.

Die Bilder innerhalb eines Beitrages sind in der Regel kleiner. Auch hier ist die maximale Breite der Anzeige wichtig. Bei Themes mit Seitenleiste sollte sie zwischen 750 – 1.000 Pixel liegen.

Beispiel: Bildoptimierung mit TinyPNG

Zur Optimierung ruft man die Seite von TinyPNG auf. Es ist kein Login oder ein Benutzerkonto erforderlich.

Das Bild zur Optimierung zieht man in das Browserfenster. Sobald es vollständig hochgeladen ist, wird es automatisch komprimiert. Den Erfolg der Komprimierung kann man an der deutlich kleineren Bildgröße erkennen. TinyPNG zeigt an, wie viele KB eingespart wurden. Über einen Rechtsklick auf „download“ lädt man das nun kleinere optimierte Bild herunter.

SEO Optimierung mit Tinypng

Standardbild

Bettina

Hi, ich bin Bettina Müller und freue mich über Deinen Besuch. Ich bin Freelancer für Social-Media, Wordpress, SEO und berate Blogger und Unternehmen.

Schreibe einen Kommentar