Icon des Plugin Optimus

WordPress -Bilder optimieren für das Web

Icon des Plugin Optimus Baut sich eine Webseite zu langsam auf wird man abgestraft, der Nutzer verlässt die Seite und das Google Ranking wird verschlechtert. Ein wichtiger Ansatz zur Verbesserung der Ladezeit ist, die Bilder einer Webseite richtig zu optimieren. Hat man die Bilder nicht optimiert oder in einem ungeeigneten Format eingebunden, kann dies zu langen Ladezeiten führen. Wichtig dabei ist, dass die Größe der Bilder ohne einen merkbaren Qualitätsverlust reduziert werden.

In den letzten drei Berichten habe ich bereits verschiedene Lösungsansätze beschrieben:

In diesem Bericht möchte ich nun zum Abschluss der Serie die aus meiner Sicht, optimale Lösung vorstellen. Ich gehe dabei davon aus, dass das Web Bild (Original) bereits richtig aufbereitet wurde (siehe Pos.3).

Zusätzlich verwende ich nicht die WordPress Standard JPG Kompression von 90% sondern 80% (siehe Pos. 2).

Bilder optimieren durch JPG Kompressionen

Beispiel Kompression 90% und 80%

Optimus, ein Plugin von großem Nutzen

Als dritten und letzten Schritt setzte ich ab sofort das Plugin Optimus HQ von Sergej Müller ein. Wichtig ist, die ab Version 1.3.6 verfügbare Option, Originalbilder mit ihren Metadaten unverändert zu belassen. Für alle anderen Vorschaubilder werden die Metadaten entfernt.

Das Funtionsprinzip von Optimus

Während dem Upload der Bilder in die Mediathek schickt das OptimusPlugin die jeweiligen Bilder parallel an den Optimus-Server, der das eingegangene Material bearbeitet und in optimierter Form zurückgibt. Danach speichert Optimus die in der Größe reduzierte Version des Bildes in der Mediathek ab.

Anders als gängige Optimierungstools rührt Optimus die Qualität der Fotos nicht an. Statt dessen werden aus Bilddateien überflüssige Informationen extrahiert, die von Bildprogrammen (mit)gespeichert werden und zur Darstellung nicht notwendig sind. Auf diese Art bleibt die Qualität der Grafiken erhalten, die Dateigröße kann aber um ein Vielfaches verkleinert werden.

Für die Datenreduzierung eminent wichtig ist, dass die Metadaten der Vorschaubilder entfernt werden, nicht jedoch die Metadaten des Originalbildes. Dadurch stehen die Metainformationen weiter in der WP Datenbank zur Verfügung.

Test verschiedener Konfigurationsmöglichkeiten

Verwendetes Testbild: 6000x 4000px, per ACDSee Pro 8 mit einer JPG Kompression von Q=60%, reduziert auf 1000x 666px unter Beibehaltung der Metadaten. Dieses Bild mit 150.880 Bit wird im folgenden Original (Full) bezeichnet.

Anhand der Übersichtstabelle ist zu erkennen, das je nach Bildgröße teilweise drastische Reduzierungen möglich sind. Der Metadateneinfluss auf kleine Bilder ist erheblich größer, entsprechend höher ist die Reduzierung der Datenmenge.

Beispiel: Dateigrößen in Abhängigkeit der verwendeten Komponenten

Größe

WP Standard

Q=90%

WP Standard nach löschen der Meta

WP Standard mit Plugin Optimus

WP Korrektur auf Q=80% mit Plugin Optimus

Full (Original)

1000×666

150.880

Large

580×386

121.280

67.821

61.131

42.317

Medium

280×186

77.069

23.610

18.530

13.082

Minibild 1:1

150×150

67.580

14.121

9.499

6.787

Minibild 3:2

135×90

64.041

10.582

6.163

4.535

Thumbnail

100×75

62.236

8.777

4.465

3.312

Optimus zusammen mit einer reduzierten JPG Kompression ist einfach super.

Einziges Manko ist, dass nur die Bezahlversionen HQ für 29 € oder HQ PRO für 149 € brauchbar sind. Das Limit von 25 KB für die Freeware würde in meinem Beispiel nur wirken wenn vorher die Metadaten entfernt werden. Bei Bilder von einfachen Kompaktkameras, mit wenig Metadaten, kann dies ev. unproblematischer sein. Der Trend geht aber zu immer mehr Metadaten. Es wäre schön, wenn Sergej das Limit erhöhen könnte oder den Preis nicht als Jahresgebühr erheben würde.siehe Ergänzung

Limits der Optimusvarianten

Optimus HQ PRO
Optimus HQ
Optimus
Erlaubte Bildformate JPEG, PNG JPEG, PNG JPEG, PNG
Maximale Dateigröße JPEG: 5 MB JPEG: 5 MB JPEG: 100 KB

Ergänzung: Gegenüber der Erstausgabe vom 10.1.15 gibt es inzwischen einige positive Änderungen:

  • Das Bildformat PNG wird auch in der Basisversion unterstützt
  • Die Maximale Dateigröße der Basisversion wurde von 25 auf 100KB und für die anderen Versionen auf 5MB vergrößert
  • Mit der HQ Variante können alle Bilder in der WordPress Mediathek optimiert werden. Bereits optimierte Bilder werden ignoriert.

Nachteil von Optimus:

Bestehende bereits hochgeladene Bilder können nicht optimiert werden.

Wer dafür eine Lösung sucht kann das Plugin Smush.it , eine kostenlose Bildoptimierung für das Web einsetzten. Mit diesem Plugin können selbst alle bereits hochgeladenen Bilder nachträglich optimiert werden. Da die Metadaten aber nicht entfernt werden ist der Nutzen nicht so groß wie mit Optimus.

5 Gedanken zu „WordPress -Bilder optimieren für das Web“

  1. Danke für deinen Bericht.

    Es wäre schön, wenn Sergej das Limit erhöhen könnte…

    Sicherlich könnte ich die Grenze von 25 KB für JPEGs anheben oder gar das Plugin vollständig kostenfrei machen. Doch jemand muss auch die Server- und Administrationskosten (nix Low-Cost, sondern in DE-gehostet wegen Datenschutz) bezahlen – von Spenden und Unterstützung kann nicht die Rede sein, hatten wir alles schon https://plus.google.com/b/114450218898660299759/110569673423509816572/posts/XEoHhEi5uJw

    Wie soll ich deiner Meinung nach den Service finanzieren? Indem ich Limits lockere, noch mehr Nutzer den Dienst kostenlos nutzen und ich somit mehr Geld in die Kasse gespült bekomme? Eher nicht 😉

    Ich kann unmöglich alle Plugins von mir kostenlos und werbefrei anbieten (dazu noch – nicht unbedingt kleine – Nebenkosten selbst tragen) und dann auch noch mit vollem Support und permanenter Weiterentwicklung. Das geht einfach nicht. Egal wie ich mich drehe, ich schaffe es einfach nicht.

    Auch ich muss schauen, dass ich mein WordPress-Fanatismus nicht noch weitere 10 Jahre aus meiner eigenen Tasche zahle. Sicherlich kostet alles Geld und in letzter Zeit auch immer mehr. Doch glaub mir, so viel Geld wie ich in meine WordPress-Projekte reinstecke (damit die Community sie kostenlos, werbefrei, zuverlässig und bedenkenlos nutzen kann), könnte man locker einen Kleinwagen finanzieren.

    Diese künstlich gesetzte Grenze ist bewusst da, sonst kann ich mir die Premium-Features auch sparen. Klartext: Ohne Einnahmen kein Optimus. Vom Gewinn spreche ich hier gar nicht 😉

    Sorry, musste jetzt einfach raus. Der Support heute war schlimmer als sonst 😉

    1. @Sergej
      Ich kann voll und ganz verstehen, dass man nicht alles umsonst zur Verfügung stellt.
      Das Problem dürfte aber darin bestehen, dass man in vielen Fällen den Nutzen erst nach dem Kauf erkennt.;)

      siehe dazu meine Bemerkung

      Das Limit von 25 KB für die Freeware würde in meinem Beispiel nur wirken wenn vorher die Metadaten entfernt werden. Bei Bilder von einfachen Kompaktkameras, mit wenig Metadaten, kann dies ev. unproblematischer sein. Der Trend geht aber zu immer mehr Metadaten.

      Um mehr Nutzer zu überzeugen wäre ev. eine Testversion sinnvoll!

  2. Moin zusammen,

    ich muss da ganz klar Sergej zustimmen und kann – auch als WP-Nichtentwickler, eher Poweruser.

    Sergej kalkuliert hier schon sehr gut und gehört sicherlich zu denen, die ein faires Angebot machen!

  3. Hallo,
    ja, das Plugin habe ich installiert und ich finde es überhaupt nicht gut. Ich weiß nicht, was ihr hier den Leuten erzählt, weil deine Seite hier, ist gar nicht so optimiert und die Bilder erst recht nicht.
    68 / 100Übersicht über die Vorschläge
    Behebung erforderlich:
    JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen
    Behebung empfohlen:
    Bilder optimieren
    Durch eine korrekte Formatierung und Komprimierung von Bildern können viele Datenbytes gespart werden.
    Optimieren Sie die folgenden Bilder, um ihre Größe um 79,6 KB (30 %) zu reduzieren.

    Durch die Komprimierung von https://tpc.googlesyndication.com/simgad/3375162606608273096 könnten 16,7 KB (81 %) eingespart werden.
    Durch die Komprimierung von http://www.msr-support.de/…loads/2014/12/bildformate-21-580×387.jpg könnten 12,8 KB (22 %) eingespart werden.
    Durch die Komprimierung von http://www.msr-support.de/…loads/2014/12/bildformate-23-580×387.jpg könnten 12,8 KB (22 %) eingespart werden.
    Durch die Komprimierung von http://www.msr-support.de/…wp-content/uploads/exif-iptc-150×150.jpg könnten 11,1 KB (56 %) eingespart werden.
    Durch die Komprimierung von http://www.msr-support.de/…ess/wp-content/uploads/header-msr-02.jpg könnten 7,9 KB (19 %) eingespart werden.
    Durch die Komprimierung von http://www.msr-support.de/…dpress/wp-content/uploads/optimus-01.jpg könnten 7,1 KB (25 %) eingespart werden.
    Durch die Komprimierung von http://www.msr-support.de/…oads/2011/04/wp-mediathek-08-150×150.jpg könnten 5,1 KB (50 %) eingespart werden.
    Durch die Komprimierung von http://www.msr-support.de/…p-content/uploads/optimus-01-345×372.jpg könnten 4,4 KB (17 %) eingespart werden.
    Durch die Komprimierung von http://2.gravatar.com/…db258771e78d84341c03103f36?s=68&d=mm&r=g könnten 647 Byte (25 %) eingespart werden.
    Durch die Komprimierung von http://0.gravatar.com/…a021a5571205ef7e30de3cbce3?s=68&d=mm&r=g könnten 634 Byte (25 %) eingespart werden.
    Durch die Komprimierung von http://1.gravatar.com/…6a672a4d4d67b498e522fc8bcb?s=68&d=mm&r=g könnten 592 Byte (28 %) eingespart werden.

    Leute, das hier ist die Realität!

    1. Hallo Scharlotte, JavaScript, CSS usw war nicht das Thema des Berichtes.
      Sicher gibt es immer was zu verbessern, ohne das Plugin würden die Bilder jedoch erheblich größer sein.
      Es wäre schön wenn Du uns erzählen könntest was Dein Vorschlag wäre, mit welchem Toll, ich bin neugierig.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*