Home Menü

WordPress – Bilder für das Web optimieren

Bilder auf Webseiten sind mitunter die speicherintensivsten Elemente und brauchen somit auch die längste Zeit bei der Übertragung vom Webserver zum Browser des Clients. Was manche nicht wissen: In den Bildern steckt ein unglaubliches Potential zur Verringerung der Dateigröße bei gleichzeitiger Erhaltung der Qualität. Geht nicht? Geht doch!

Dieser Artikel ist Teil der Guideline High-Performance Websites mit WordPress.

Im letzten Artikel der Guideline wurde bereits gezeigt, wie einfach und schnell die Größe von HTML, CSS oder JavaScript-Dateien um bis zu 70 Prozent reduziert werden kann. Im Artikel wurde auch erwähnt, dass es wenig Sinn macht die dort beschriebene Methode der serverseitigen Komprimierung auch zur Optimierung von Bildern anzuwenden. Doch warum?

Serverseitige Optimierung / Komprimierung von Bildern – Macht das Sinn?

Eine Erklärung zur Sinnhaftigkeit der serverseitigen Bildoptimierung via Komprimierung liefert Yahoo! in seinen Best Practices for Speeding Up Your Web Site:

It’s worthwhile to compress any text response including XML and JSON. Image and PDF files should not be gzipped because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes.

Laut dieser Empfehlung sollten sowohl Bilder als auch PDF-Dateien nicht via gzip oder deflate komprimiert werden, weil die entsprechenden Dateien bereits von Natur aus komprimiert sind. Ein kleiner Test verdeutlicht uns diese Aussage:

Keine KomprimierungMit gzip KomprimierungDifferenz
JPG Datei (groß)2043191 Byte2039150 Byte-0,20 %
JPG Datei (klein)1011071 Byte1004310 Byte-0,67 %
PNG Datei (groß)56792 Byte56820 Byte+0,05 %
PNG Datei (klein)2359 Byte2382 Byte+0,97 %

Wie sie erkennen können, liegt die Differenz zwischen aktivierter und deaktivierter Komprimierung von Bildern in einem Bereich, der fast unerheblich ist. Bei den PNG-Dateien wirkt sich die Optimierung via gzip sogar negativ auf die Dateigröße aus. Berücksichtigt man zusätzlich noch die Zeit, welche der Browser zum Entpacken der jeweiligen Dateien benötigt, macht eine serverseitige gzip Komprimierung keinen Sinn.

Bildkomprimierung durch Entfernen von Metadaten

Was allerdings durchaus Sinn macht, ist die Optimierung von Bildern für das Web mittels Methoden zur Entfernung von überflüssigen Metadaten wie:

  • EXIF Markierungen (Datum, Uhrzeit, GPS-Daten, Vorschaubild, etc.)
  • Dateiberechtigungen
  • Nicht benötigte Farbprofile

Diesen Metadaten benötigen Speicherplatz, sind aber für die Darstellung von Bildern im Web völlig unnötig. Das beste daran: Das Löschen dieser Metainformationen hat keinerlei Einfluss auf die Qualität der jeweiligen Bilder.

Damit auch Sie von dieser Methode zur Optimierung von Bildern profitieren können, gibt es unterschiedlichste Tools die dafür sorgen, dass Ihre Bilder im Schnitt um 10–40 Prozent verkleinert werden. Das erfreut nicht nur Ihre Festplatte sondern auch Ihre Besucher, die sich viel Zeit beim Laden der Seite sparen.

Im Folgenden stellen wir Ihnen drei verschiedene Möglichkeiten vor, wie Sie Ihre Bilder bestmöglich für das Web optimieren können. Angefangen von der lokalen Bildkomprimierung bis hin zur vollständig automatischen Optimierung von Bildern via WordPress-Plugin.

ImageOptim für die lokale Bildoptimierung

Die zeitintensivste Methode zur Reduzierung der Größe Ihrer Bilder ist die Nutzung des Mac OS X Tools ImageOptim, welches wir hier im Blog bereits ausführlich vorgestellt haben. Hierbei müssen Sie die Bilder jedoch bereits vor dem Upload in WordPress manuell mithilfe des Programms optimieren. Zudem werden von WordPress (WP) automatisch erzeugte Bildgrößen nicht berücksichtigt, was im schlechtesten Fall dazu führen kann, dass manche Bilder letztlich in der Originalgröße – ohne Optimierung – auf der Webseite angezeigt und ausgeliefert werden.

ImageOptim Vor- und Nachteile:

  • Höchste Komprimierung im Test
  • Keine Beschränkung der Dateigröße
  • Datenschutz
  • kostenlos
  • keine Optimierung von WP-Bildgrößen
  • keine Automatisierung via WP-Plugin
  • Nur für Mac OS X

Noch kurz ein paar Worte zur automatischen Erzeugung von Bildgrößen durch WordPress: Je nach Einstellung unter Einstellungen -> Medien erzeugt WordPress zusätzlich zu dem von Ihnen hochgeladenen Bild weitere Bildgrößen, z.B. 128×128 Pixel oder 250×300 Pixel, welche im Upload-Verzeichnis auf Ihrem Webspace abgelegt werden. Außerdem erzeugt WordPress ebenfalls ein neues Bild, wenn Sie beispielsweise im Editor von WordPress die Funktion zur Anpassung der Bildgröße nutzen.

Smush.it – kostenlose Bildoptimierung für das Web

Im Vergleich zu ImageOptim versucht das WordPress Plugin WP Smush.it den Prozess zur Verkleinerung der Bilder zu automatisieren, indem hochgeladene Bilder sowie die von WordPress erzeugten Bildgrößen automatisch optimiert werden.

Alternativ dazu können Sie Bilder auch direkt über die Weboberfläche von Smush.it verkleinern. Im Vergleich zum WordPress Plugin besteht bei Nutzung der Weboberfläche keine Limitierung der Dateigröße auf 1 MB.

Zur Freude der WordPress Gemeinde wird das Plugin für WordPress auch wieder weiterentwickelt. Moniert wird dagegen immer wieder die schlechte Erreichbarkeit des Smush.it-Services, wodurch man unter Umständen seine Bilder nicht gleich optimieren kann. Weiteres Manko: Der Datenschutz. Durch die Nutzungsbestimmung gewährt der Anwender Yahoo! auch die Rechte zur temporären Speicherung und Veränderung der Bilder:

However, by submitting your images to Yahoo, you hereby grant Yahoo and its affiliates the following worldwide, royalty-free, non-exclusive, sublicensable and transferable rights and licenses: To temporarily host, cache, store, or modify your images to appropriate media formats, standards or mediums as part of the Service.

Die Vor- und Nachteile von Smush.it auf einen Blick zusammengefasst:

  • Automatisierte Bildoptimierung durch WordPress-Plugin
  • Optimierung von WP-Bildgrößen
  • kostenlos
  • Beschränkung der Bildgröße via WordPress-Plugin auf 1 MB
  • Erreichbarkeit des Smush.it Services
  • Bedenken beim Datenschutz

Optimus HQ – Automatische und sichere Bildoptimierung

Genauso wie Smush.it hat sich der Dienst Optimus von Sergej Müller auf die automatische Optimierung von Bildern für das Web via WordPress Plugin spezialisiert. Auch hier – analog zum vorher genannten Dienst – ist die Dateigröße von JPEG auf 1 MB (in der Optimus HQ Version) beschränkt (PNG-Dateien bis maximal 512 KB). Auch die von WordPress erzeugten Bilder werden problemlos und grafisch übersichtlich optimiert.

Die große stärke des Plugins: Alle Bilder werden (nach vorgenommener Einstellung) in der HQ-Version via HTTPS übertragen, auf Servern innerhalb von Deutschland optimiert und anschließend sofort wieder gelöscht. Das wird vor allem die Freunde des Datenschutzes und Urheberrechts erfreuen. Auch können mit dem Dienst WebP-Bilddateien optimiert werden.

Einziger Nachteil: Für den Betrieb der Server fallen Kosten an, die der Entwickler nicht durch freiwillige Spenden kompensieren konnte, weshalb für die HQ-Version (Premium-Version) ein Jahresbetrag von 14,99 Euro fällig ist. Es gibt zwar auch eine kostenlose Version, diese ist aber aufgrund der zahlreichen Beschränkungen nur zu Testzwecken geeignet.

Zusammengefasst bietet Optimus HQ:

  • Automatisierte Bildoptimierung durch WordPress-Plugin
  • Optimierung von WP-Bildgrößen
  • keine Datenschutzproblematik
  • Komprimierung von WebP-Dateien
  • Beschränkung der Bildgröße (JPEG: 1 MB, PNG: 512 KB)
  • kostenpflichtig

ImageOptim vs. Smush.it vs. Optimus HQ

Abschließend möchten wir die drei vorgestellten Möglichkeiten zur Optimierung von Bildern fürs Web anhand Ihrer Optimierungsleistung und Praxistauglichkeit noch kurz vergleichen.

Optimierungsleistung

ImageOptimSmush.itOptimus HQ
JPG Datei (groß, > 1 MB)-6,83 %0,00 %0,00 %
JPG Datei (klein, < 1 MB)-11,21 %-10,29 %-10,61 %
JPG Datei von WordPress erzeugt0,00 %-7,47 %-7,71 %
PNG Datei (groß, < 100 KB)-5,01 %0,00 %0,00 %
PNG Datei (klein, 2 KB)-12,04 %0,00 %0,00 %

Praxistauglichkeit

Obwohl ImageOptim im Test die beste Optimierung der Testdateien zustande brachte, so gestaltet sich der Einsatz in der Praxis aus zwei Gründen recht schwierig: Zum einen ist die Optimierung via ImageOptim immer mit manuellem Aufwand und somit Zeit verbunden. Zeit, die man ansonsten vielleicht für einen neuen Artikel nutzen hätte können. Zum anderen werden die von WordPress erzeugten Bilder nicht optimiert, was vor allem dann problematisch ist, wenn das eigene Layout die von WordPress generierten Bilder in Artikeln oder auf Vorschauseiten aktiv nutzt. Wer hingegen in WordPress keine automatisch erzeugten Bildgrößen nutzt und den Zeitaufwand zur Optimierung nicht scheut, für den ist ImageOptim die richtige Lösung.

Im Gegensatz zu ImageOptim bieten sowohl Smush.it als auch Optimus HQ einen automatisierten Ansatz, wodurch sich der Webseitenbetreiber über die Optimierung von Bildern keine Gedanken mehr machen muss. Aus unserer Sicht ist allerdings der Einsatz von Smush.it aufgrund von datenschutzrechtlichen Bedenken mit Vorsicht zu genießen, denn alle Bilder werden in den USA optimiert und leider auch gespeichert.

Etwas enttäuscht waren wir sowohl bei Smush.it als auch Optimus HQ über die Kompressionsleistung speziell bei PNG-Dateien. Da wir für unsere Anleitungen sehr oft Screenshots verwenden, nutzen wir für diese Bilder bevorzugt PNG, da die Bildgröße ohne Qualitätsverlust im Vergleich zu JPG in der Regel geringer ist. Diese Bilder werden jedoch bei weitem nicht so gut optimiert wie durch ImageOptim.

Fazit

Bilder für das Web zu optimieren ist keine große Sache und beschert dem Webseitenbetreiber vielleicht den einen oder anderen glücklichen Besucher mehr, der den gewünschten Inhalt schneller angezeigt bekommt. Wer eine automatisierte und datenschutzfreundliche Lösung sucht, der ist bei Optimus HQ genau richtig. Wer seine Bilder hingegen eher manuell optimieren möchte oder überwiegend mit PNG-Dateien arbeitet, für den dürfte ImageOptim die richtige Lösung sein.

Danke an Sergej Müller für die Bereitstellung der Testlizenz für Optimus HQ.

Getestet unter WordPress 3.8(.1), WP Smush.it 1.6(.5) und Optimus 1.3

Veröffentlicht von Josef Seidl

Josef Seidl hat an der TU München und der Stanford University Wirtschaftsinformatik (M.Sc.) studiert. Er ist begeistert von Technik und schätzt performante Webseiten. In seiner Freizeit unternimmt er gerne Wandertouren und lässt sich von fremden Orten inspirieren. Zu finden ist er auch bei XING und privat bei Twitter.