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:
- Bildkomprimierung durch Entfernen von Metadaten
- WordPress JPG Kompression anpassen
- Bildgröße und JPG Kompression für Web Bilder
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).
Inhaltsverzeichnis
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 Funktionsprinzip von Optimus
Während dem Upload der Bilder in die Mediathek schickt das Optimus–Plugin 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. Stattdessen 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.
Danke für deinen Bericht.
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 😉
@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
Um mehr Nutzer zu überzeugen wäre ev. eine Testversion sinnvoll!
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!
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 https://www.msr-support.de/…loads/bildformate-21-580×387.jpg könnten 12,8 KB (22 %) eingespart werden.
Durch die Komprimierung von https://www.msr-support.de/…loads/bildformate-23-580×387.jpg könnten 12,8 KB (22 %) eingespart werden.
Durch die Komprimierung von https://www.msr-support.de/…wp-content/uploads/exif-iptc-150×150.jpg könnten 11,1 KB (56 %) eingespart werden.
Durch die Komprimierung von https://www.msr-support.de/…ess/wp-content/uploads/header-msr-02.jpg könnten 7,9 KB (19 %) eingespart werden.
Durch die Komprimierung von https://www.msr-support.de/…dpress/wp-content/uploads/optimus-01.jpg könnten 7,1 KB (25 %) eingespart werden.
Durch die Komprimierung von https://www.msr-support.de/…oads/wp-mediathek-08-150×150.jpg könnten 5,1 KB (50 %) eingespart werden.
Durch die Komprimierung von https://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!
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.
Sie können Ihre Bilder mit dem <a href="https://gowebp.com" GoWebP – Plugin optimieren, da das beste Plugin Bilder komprimiert, ohne die ursprüngliche Bildqualität zu beeinträchtigen.