Website PageSpeed Optimierung – Bilder richtig bereitstellen

Wir zeigen Ihnen, wie Sie Bilder und Grafiken richtig bereitstellen können, damit Ihre Website sehr schnell lädt und Nutzer nicht minutenlang warten müssen.

Warum sollten Sie Bilder immer optimieren?

Sie öffnen eine Website und die Seite lädt und lädt… Achtung: Je länger der Ladevorgang, desto höher ist der Anteil an Nutzern, die die Seite wieder verlassen, bevor Sie überhaupt geladen wurde. Ein Grund dafür sind immer wieder unkomprimierte Bilddateien. Oft werden beim Ladevorgang einer Website mehrere MegaByte Bilder geladen, die der Nutzer nie zu Gesicht bekommt, weil Sie beispielsweise im unteren Bereich einer Website benötigt werden.

Egal ob die Bilder mit einer professionellen Kamera erstellt wurden oder über ein aktuelles Smartphone – die Dateigröße ist in beiden Fällen mitunter sehr groß. Gerade bei Fotos die mit Kameras oder Handys erstellt wurden, kommen sehr schnell 4-8 MB pro Bilddatei zusammen. Nach oben gibt es je nach Auflösung keine Grenze. Um Ihren Nutzern die beste User Experience bieten zu können, sollten Ihre Bilder entsprechend optimiert werden. So können schnell einige Sekunden Ladezeit eingespart werden.

Google bevorzugt schnelle Websites. Seiten die langsam laden, haben es schwieriger, auf der ersten Suchergebnisseite gelistet zu werden.

Bilder mit WordPress verkleinern

34% aller Webseiten weltweit laufen mit WordPress. Um Inhalte ansprechender zu visualisieren, sollten auf jeden Fall immer auch Bilder eingesetzt werden. Diese können viel schneller wahrgenommen werden als lange Textwüsten.

WordPress erzeugt ein Set von vorher festgelegten Bildgrößen direkt beim Upload (bitte nur tatsächlich verwendete Bildgrößen registrieren), allerdings haben diese dynamisch erzeugten Bildgrößen noch viel Optimierungspotenzial. Hier gibt es zahlreiche Plugins, die diese Aufgabe übernehmen können.

ShortPixel Image Optimizer

Der ShortPixel Image Optimizer ist ein leicht bedienbares, umfassendes und kontinuierlich weiterentwickeltes Freemium-Plugin zur Bildoptimierung. Das Plugin optimiert automatisch im Hintergrund Bilder und sogar PDF-Dokumente. Positiv fällt auf, dass es auch Bilder optimiert, die garnicht über die WordPress-Mediathek hochgeladen wurden. So können auch Bilder von anderen Plugins wie NextGEN oder Modula optimiert werden. Allerdings müssen Credits erworben werden.

EWWW Image Optimizer

Auch das Plugin EWWW Image Optimizer verbessert die Ladezeit der eigenen Website durch die Optimierung vorhandener Bilder. Dadurch kann die Position bei Suchmaschinen verbessert und gleichzeitig Bandbreite (Netzwerklast) und Speicherplatz reduziert werden. Neue Bilder werden direkt beim Hochladen optimiert. Auf Wunsch können auch alle Bilder angepasst werden, die bereits hochgeladen wurden. Bei der Kompression kann zwischen Verlustfrei und Verlustlos gewählt werden. Das Plugin unterstützt JPG-, PNG- und PDF-Dateien und hat keine Dateigrößenbeschränkung.

reSmush.it Image Optimizer

Mit dem reSmush.it Image Optimizer können ebenfalls JPG, PNG und GIF-Dateien mit einer maximalen Größe von 5 MB optimiert werden. Seit April 2015 wurden über 6 Milliarden Bilddaten optimiert. Das Plugin zeigt im WordPress-Adminbereich genau an, wie viele Bilder vorhanden sind die noch nicht optimiert wurden. Außerdem gibt es übersichtliche Statistiken zur Dateigröße die eingespart werden konnte durch die Optimierung der Bilder.

UNSERE EMPFEHLUNG:
Imagify – WebP & Image Compression and Optimization

Imagify reduziert die Dateigröße Ihrer Bilder ohne sichtbaren Qualitätsverlust. Nach der Plugin-Installation und Aktivierung werden automatisch alle Bilder und Vorschaubilder (Thumbnails) im Hintergrund optimiert. Positiv ist neben der Unterstützung von WooCommerce und der NextGen Gallery auch die Unterstützung für das WebP-Format. Imagify ist kostenlos, wenn man nicht mehr als 25MB pro Monat konvertiert. Imagify konvertiert Ihre Bilder ins WebP Format und setzt automatisch den <picture> Tag oder verwendet rewrite rules in der .htaccess.

Obwohl die Bildgröße schon sehr gut optimiert wurde, geht immer noch mehr. Über das Bildformat WebP kann das Foto zusätzlich optimiert und die Dateigröße verringert werden.

Bilder verkleinern bedeutet die Ladezeit zu optimieren und somit die User Experience zu verbessern. Imagify wurden von WP-Media, den Machern von WP-Rocket programmiert. Imagify ist der absolute Preis/Leistungs Gewinner da neben den Abos auch einzelne Pakete erworben werden können und so für einmalig 10€ die gesamte Website optimiert werden kann!

Sie haben Fragen oder Anregungen zum Thema Bildkomprimierung? Wir freuen uns auf Ihr Feedback.