Bilder machen nicht nur auf WordPress-Webseiten einen erheblichen Anteil am Datentransfervolumen aus und sind damit einer der wichtigsten Parameter bei der Webseitengeschwindigkeit. Die WordPress Bildoptimierung ist ein geeigneter Ansatz, um die Bildgröße noch vor dem Upload in die Mediathek einer WordPress-Installation zu minimieren. Sind die Datenmengen aufgrund unkomprimierter Bilder sehr hoch, müssen Webserver und Browser-Client erst einmal enorme Datenmengen umschaufeln, bevor die Webseite vollständig geladen ist. Um die Webseitengeschwindigkeit nicht unnötig zu strapazieren, müssen wir also im Vorwege die in WordPress Webseiten eingesetzten Bilder optimieren – mit oder ohne Plugin. Und genau das ist Thema dieses Artikels.
Kennt fast jeder, macht kaum einer: WordPress Bildoptimierung
Warum die Bildoptimierung so wichtig ist, habe ich eingangs schon erwähnt. In unserem WordPress Performance Guide haben wir das Thema Webseiten-Geschwindigkeit im Detail auseinandergenommen und auch den wichtigsten Aspekt des Caching beschrieben.
Auch Bilder sind elementare Ressourcen, die beim Caching-Vorgang komprimiert und in statischen Dokumenten zusammengefasst werden. Damit können sie beim Request durch den Client viel schneller ausgeliefert werden und der Webserver muss nicht jedes PHP-Skript, CSS-Dateien und alle im HTML-Code eingebetteten Bilder bei jedem Aufruf erneut ausführen und laden.
Wo wir schon bei Komprimierung sind: Die WordPress Bildoptimierung meint eine gängige Form der Datei-Kompression – in diesem Fall die Bildkompression von JPG/JPEG und PNG-Dateien. Doch wie immer in der Technik, wäre es viel zu einfach, wenn Bildkompression gleich Bildkompression wäre.
Die Bildkompression hat dabei zwei wesentliche Ziele:
- Die ursprünglichen Bilddaten entweder in eine vollständig rekonstruierbare Form zu überführen, die weniger Speicherplatz auf dem physischen Speichermedium benötigt
- oder bestimmte Bildinformationen zu entfernen, deren Verlust visuell kaum wahrnehmbar ist.
In der Praxis existieren fast unüberschaubar viele Bildformate, die zum Teil veraltet sind oder nur zum Austausch unter Grafikprogrammen genutzt werden (z.B. Adobe Illustrator, Photoshop, GIMP etc.). Um unser tägliches Verständnis für diese Dinge aber nicht unnötig zu strapazieren, beschränken wir uns auf die Unterscheidung von verlustfreier und verlustbehafteter Bildkompression im Format JPEG und PNG. Das Prinzip ist in der Theorie aber auf beliebig viele (Bild-)Formate übertragbar.
Verlustfreie Bildkompression
Wie der Name schon fast vermuten lässt, geht die Kompression bei dieser Methode verlustfrei über die Bühne. Das ist nur möglich, weil die Daten (Bildinformationen) neu angeordnet und Redundanzen in den Informationen (die gleiche Bildinformation tritt an mehreren Stellen auf) erkannt und entfernt werden. Damit bleiben die ursprünglichen Bildinformationen erhalten, werden jedoch insgesamt deutlich komprimiert und verlieren so an Dateigröße.
Das PNG-Format verwendet Deflate als Komprimierungsmethode, also eine Kombination aus dem wörterbuchbasierten LZ77-Verfahren und der Huffman-Codierung. Die recht gute Komprimierung von PNG erklärt sich durch eine zusätzliche Anwendung von prädiktiver Kodierung (wird beim PNG-Format auch „Vorfilter“ genannt). Es existieren jedoch noch weitere verlustfreie Komprimierungsverfahren, die auch für ZIP-Archive, Audio-, Video- oder Textdateien angewendet werden können, an dieser Stelle aber nicht weiter interessieren. Geht ja schließlich um Bilder.
Verlustbehaftete Bildkompression
Die verlustbehaftete Kompression versucht, den Verlust von Informationen auf ein nicht wahrnehmbares Maß zu beschränken und kann für alle komprimierbaren Dateiformate angewendet werden. Hier wird also aktiv mit der menschlichen Wahrnehmung gespielt, die für gewisse Reizbereiche unempfindlich ist. So wird z.B. bei der MP3-Kodierung ein bestimmter Frequenzbereich aus den (Audio-) Tönen entfernt, der ohnehin von anderen Tönen überlagert wird und so nicht für das menschliche Ohr wahrnehmbar ist.
Ähnliches bei der Bildkompression: Ein Algorithmus versuch die Bildinformationen (Farbtöne) zu entfernen, die über unser Auge nicht mehr wahrgenommen werden können, weil z.B. Farbspektren und Farbübergänge zu nah beieinander liegen. So schrumpft die Dateigröße auf ein Minimalmaß an, ohne den visuellen Gesamteindruck des Bildes dabei wahrnehmbar zu verändern.
WordPress Bildoptimierung vor dem Upload
Besonders Hobby-Fotografen mit leistungsfähigen SLR-Kameras oder Stockphoto-User, die HD-Bilder mit Auflösungen jenseits einer Breite von 2000 Pixel herunterladen, sollten ihre Bilder bereits vor dem Upload auf die Webseite entsprechend verkleinern.
Deinen Webspace beeindruckt es nämlich überhaupt nicht, wenn du täglich die Landschaftsbilder deiner letzten Reise mit gigantischer Auflösung und Bildgröße in die Mediathek lädst. Im Gegenteil. Zu große Bilder können Frontend und Backend der WordPress-Seite erheblich verlangsamen und führen zur messbar längeren Ladezeiten, wenn zu große Bilder aktiv im Frontend (also dem Content der Webseite) eingebunden werden. Schließlich muss jedes der Bilder als zusätzliche Ressourcen beim Abruf der Website auch vom Webserver bereitgestellt werden.
Ausnahmsweise kommt es nämlich wirklich mal auf die Größe an. Aber was heißt eigentlich zu groß?
Diese Frage kann man nur in Relation zur Download-Geschwindigkeit beantworten. Während die konventionelle Nutzung von Bildern mit einer Größe von 1-2 MB und einer Breite bzw. Höhe von mehr als 1500 Pixeln auf einer normalen Webseite vor 20 Jahren noch undenkbar war, weil die Ladezeit für derartige Dateigrößen bis zu mehrere Minuten betragen konnte, sind es in Zeiten von LTE und VDSL nur noch wenige Millisekunden, die für den Download derartiger Ressourcen ins Land gehen.
Doch die immer komplexer werdenden Webseiten machen den „Geschwindigkeitsvorteil“ der Highspeed-Infrastruktur in der BRD (insbesondere im Osten des Landes) schnell zu Nichte. Unzählige Bilder, dynamische Skripte und immer mehr eingebundene CSS-Dokumente für spektakuläre Webseiten-Effekte verlängern die Ladezeiten einer Website erheblich. Zumindest dann, wenn ein Caching nicht aktiviert ist.
Deshalb sollten Bilder auch im Jahre 2018 nicht unbedingt größer als 2000 Pixel (als Limitierung für Breite oder Höhe) sein, es sei denn, eine größere Abmessung ist unverzichtbar. In der Praxis reichen die meisten Bilder aber auch mit einer Größe von 1200 oder 1400 Pixeln und einer (maximalen) Dateigröße von 1 MB, idealerweise deutlich darunter. Logischerweise hängt die Dateigröße auch von den darzustellenden Bild- und Farbinformationen sowie der jeweils gewählten Auflösung ab.
Ein Bild mit 1500x1000px kann also auch durchaus mehrere MB Dateigröße aufweisen. Je kleiner die Bilder im Content, desto schneller lassen sich die einzelnen Seiten aber laden. Und schließlich hat die Dateigröße der Bilder auch Einfluss auf die Größe fertig gecachter HTML-Files, die ebenfalls einen wichtigen Part bei der WordPress Bildoptimierung spielen.
Es ist also verdammt sinnvoll, schon vor dem Upload die verwendeten Bilder zu optimieren, damit unnötiges Datenvolumen gar nicht erst auf dem Webserver landet und wertvolle Ressourcen verschwendet.
Themes und Plugins bestimmen über Bildgröße bei WordPress
WordPress-Webseiten verwenden immer ein Theme zur Darstellung der Inhalte. Doch jedes Theme bringt i.d.R. eigene Funktionalitäten mit, die entweder direkt im Theme implementiert sind oder erst durch die Installation zusätzlicher Plugins aktiviert werden.
Das können Slideshows oder Slider sein, Formulare, Listen, Buttons aber auch Galerien, Content-Grids oder ähnliche Komponenten, die Seiten, Beiträge, HTML-Code und Bilder zusammen darstellen. Je nach Aufbau der WordPress Webseite entscheidet also das verwendetet Layout über die Maximalgröße der Bilder.
Kann ein Slider maximal 1500px breite und 430px hohe Bilder darstellen, macht es nur wenig Sinn, die im Slider verwendeten Bilder auch in größerer Abmessung hochzuladen. Ansonsten wird das Bild gestaucht, gestreckt, abgeschnitten oder ggf. von WordPress automatisch unnatürlich komprimiert. Um Speicherplatz zu sparen und die Performance nicht unnötig zu strapazieren, sollte man also direkt die richtige Bildgröße für den geplanten Einsatzzweck hochladen.
Ist ein Bild für den Einsatz in einem Slider mit dem Format „Featured Thin“ gedacht, können wir das Bild auch direkt in 1500×430 px hochladen (siehe Screenshot). Das spart zumindest einen weiteren Skalierungsvorgang im Webspace und sichert wertvollen Speicherplatz.
In der Mediathek können viele Standard-Formate des WordPress Themes direkt eingesehen und eingestellt werden. Bei größeren Bildern führt das jedoch zum Verlust von Bildinformationen durch einfaches Abschneiden der überflüssigen Bildinhalte. Wenn das Bild also nicht direkt für das jeweilige Format konzipiert wird, fehlt am Ende die Hälfte.
Bilder vor dem Upload komprimieren und zurechtschneiden
Womit wir auch schon beim nächsten Thema sind. Denn Bilder lassen sich schon auf Ebene des Betriebssystems adäquat komprimieren und so platzsparend in den Webspace hochladen. MacOS bietet eine geeignete Funktion über die systeminterne Vorschau-App, mit der Bilder direkt skaliert werden können. Das spart bis zu 70% der Dateigröße ein.
In der Größenkorrektur lässt sich eine neue Breite und Höhe in Pixeln (wahlweise auch cm, Zoll, Prozent etc.) festlegen, die zu einer Neuberechnung des Bildes führt.
In diesem Fall konnte durch die „werkseitige Kompression“ eines Bildes mit einer Größe von 3265×2449 Pixel und vielen Farbinformationen 50% Dateigröße eingespart werden.
Aber auch unter Windows oder Linux-Betriebssystemen gibt es geeignete Programme, mit denen die Kompression und das Zurechtschneiden (das Skalieren) von Bildern noch vor dem Upload erledigt werden kann. Neben dem nicht gerade kostenlosen Alleskönner Adobe Photoshop können auch GIMP oder Paint.net für die (kostenfreie) Bildbearbeitung eingesetzt werden.
Bilder nach dem Upload in der Mediathek komprimieren
WordPress wäre nicht WordPress, wenn es nicht ein geeignetes Hausmittel geben würde, mit dem sich die Bilder direkt nach dem Upload in der Mediathek komprimieren lassen. Allerdings ist Komprimierung in diesem Fall der falsche Begriff, denn das Bild wird nicht wirklich komprimiert. Schauen wir uns das mal in der Praxis an:
Nach dem Hochladen unseres schicken und unkomplizierten Panerai Luminor-Images im .jpg Format kontrollieren wir zunächst die Dateiinformationen:
Das Bild ist mit 3265×2449 Pixeln und rund 1 MB Dateigröße zwar gerade noch im Rahmen, für unsere Zwecke jedoch noch etwas zu groß. Wenn man keine Möglichkeit hat, das Bild im Vorwege und vor dem Upload zu verkleinern, können wir die Funktion „Bild bearbeiten“ nutzen.
Damit öffnen sich die Anhang-Details und wir können über die Funktion „Bild skalieren“ ein neues Format durch Angabe neuer Abmessungen festlegen. Beim Eintrag der Breite (in Pixeln) berechnet sich die Höhe automatisch.
Nach dem Skalieren und Speichern können wir zurück in die Mediathek navigieren und sehen in den Medien-Details nun die neu berechnete Dateigröße:
Anstelle der brachialen 1 MB haben wir das Bild in einer Auflösung von 1200×900 Pixeln mit nur noch 98 KB um fast 90% verkleinert. Doch diese Methode hat einen entscheidenden Haken: WordPress legt standardmäßig eine kryptische Erweiterung für den Dateinamen fest, was uns zum nächsten Aspekt bringt: Der Benennung von Bildern bzw. Bildernamen.
Benennung von Bildern in WordPress
Die eben beschriebene Methode hat einen wesentlichen Nachteil: Eigentlich wird das Bild nicht skaliert und komprimiert, sondern lediglich in skalierter Form neu abgespeichert. Das Original bleibt somit in vollständiger Größe erhalten, belastet den Webspace und wird lediglich in skalierter Form in der Mediathek angezeigt. Allerdings unter neuem Namen. Denn WordPress hängt systemseitig eine Erweiterung an den Dateinamen heran, der sehr kryptisch wirken kann (hier im Beispiel: Panerai-Luminor-e15095426…).
Das mag zunächst nicht besonders störend sein, hat aber aus Sicht der Suchmaschinenoptimierung entscheidende Nachteile. Wie in unseren SEO-Grundlagen für WordPress beschrieben, berücksichtigt Google bei der Relevanzbewertung von Bildern für die Bildersuche nur einen gewissen Teil der Bildbenennung als Keywords. Mehr als 2-3 Keywords sollten für die Dateinamen der Bilder vermieden werden, was automatisch bedeutet, dass der verfügbare Zeichenraum möglichst optimal genutzt werden muss. Kryptische Dateiendungen haben hier definitiv keinen Vorteil.
Aber auch sonst wird das Upload-Verzeichnis unter /wordpress/wp-content/uploads/… mit der Zeit sehr zugemüllt. Denn je nach installiertem Theme und verwendeten WordPress Plugins, wird von jedem Bild eine gewisse Anzahl an unterschiedlich skalierten Kopien angelegt, die beim Abruf einer Ressource (z.B. Galerie-Eintrag mit 600 x 600 Pixel) somit nicht erst neu und dynamisch erstellt werden müssen, sondern direkt vom Webserver abgerufen werden können. Dementsprechend umfangreich stellt sich das Verzeichnis dar:
WordPress Bildoptimierung mit Plugin
Wie immer bietet der Plugin-Store von WordPress einen Haufen an mehr oder weniger geeigneten Lösungen für ein bestimmtes „Problem“. So auch für die Bildkomprimierung direkt über das WordPress-Backend. Eine Suche nach „Kompression“, „compression“ oder „image optimization“ lässt einige Plugins erscheinen, die auf den ersten Blick für den Einsatzzweck geeignet sein könnten:
Die Erfahrung zeigt: Plugins kommen und gehen, manchmal sogar schneller als die Wochenendbekanntschaften aus der Hotelbar im Bankenviertel. Deshalb verzichten wir hier auf eine ausführliche Darstellung und Einführung in die WordPress Bildoptimierung via Plugin und komprimieren das Ganze auf drei bekannte Plugins.
Compress JPEG & PNG Images
Das Tool mit dem smarten Namen Compress JPEG & PNG images ist nichts anderes als die WordPress Plugin-Variante des bekannten Online-Bildoptimierers TinyJPG bzw. TinyPNG. Die Plattform ermöglicht die content-basierte Kompression der Bilder durch individuell agierende Komprimierungsalgorithmen. Oder anders: Die Kompression erfolgt in Abhängigkeit von den dargestellten Informationen und versucht das bestmögliche Kompressionsergebnis zu erzielen, ohne dabei wertvolle Bildinformationen zu verlieren.
Das Plugin nutzt die API der Plattform für die Kompression der JPG und PNG-Images. Der Nachteil: Das effektive Tool ist in seiner kostenlosen Variante auf die Kompression von 100 Bildern pro Monat beschränkt. Wer mehr will, muss auch mehr auf den Tisch legen.
Optimus WordPress Bildoptimierung
Diese kleine aber effektive Plugin unterstützt die automatische WordPress Bildoptimierung direkt vor bzw. beim Upload der Bilder. Ursprünglich wurde das Plugin von Sergej Müller entwickelt, der den WordPress-Kennern als Entwickler einer Palette an genialen WordPress Plugins bekannt sein sollte.
Inzwischen wurde Optimus von KeyCDN übernommen und der Funktionsumfang des Plugins drastisch erweitert. So werden nicht nur die Bilder, sondern auch die Thumbnails direkt beim Upload komprimiert. Als zusätzliches Feature kann das Plugin automatisch Bilder im WebP-Format bereitstellen, falls der Browser des Clients das Format unterstützt. Aber so viel „Usability“ hat seinen Preis. 29 EZB-Scheinchen pro Jahr werden für die automatische WordPress Bildoptimierung mit Optimus fällig.
Optimus selbst gibt als Hinweise zum Preismodell an:
- Optimus (Free) as base version with limitations (e.g. max of 100kb)
- Optimus HQ (Premium) with expanded functionality for personal projects
- Optimus HQ PRO (Premium) as professional solution for customer websites
Smush Image Compression and Optimization (WP Smush)
Das dritte Plugin ist das Kompressionstool WP Smash. Prinzipiell arbeitet das Plugin ähnlich wie Optimus und das Kompressionstool von TinyPNG. Eine Vielzahl an Kompressionsalgorithmen optimiert die Bilder automatisch beim Upload in Abhängigkeit von Bildinformationen und Kontext und versucht so das optimale Optimierungsergebnis zu erzielen. Eine Reihe an weiteren automatischen Kompressionstechniken garantiert dabei eine möglichst geringe Dateigröße für eine Schnelle Einbettung im Content der WordPress-Webseite.
Aber auch hier ist die kostenlose Variante des Tools arg beschränkt. Die Pro-Variante bietet noch einen deutlich größeren Funktionsumfang für die WordPress Bildoptimierung, wie z.B. die Kompression der Bilder in Originalgröße. Mit der kostenlosen Variante sind lediglich Kompressionen der Image-Crops möglich. Der Haken: WP Smush in seiner Pro Version ist nur nutzbar, wenn man gleichzeitig einen Account auf der WordPress Plattform WPMUDEV in seine digitalen Assets aufnimmt. Und der schlägt immerhin mit ca. 19 Dollar pro Monat in die Bilanz.
Hauptsache kleine Bilder
Die Zielsetzung sollte inzwischen klar sein. Ein großes Bild muss komprimiert werden, ohne viel Bildinformationen zu verlieren. Wenn das ein Plugin kann, kann es genug. Aber auch die (meisten) Plugin-Developer sind geldgeil (oder unternehmerisch eingestellt) und machen das nicht nur zum Spaß.
Lässt sich keine kostenpflichtige Premium-Funktion auf ein kostenloses Plugin aufschalten, wird die Hauptfunktion des Plugins eben kapazitiv begrenzt. Will heißen: Hat das Plugin 10, 50 oder 100 Bilder automatisch komprimiert, muss man eben für jedes weitere Bild bezahlen.Wirtschaftliche WordPress Bildoptimierung sieht anders aus.
Zudem zeigt die automatische Komprimierung in der Praxis immer mal wieder Schwächen, insbesondere, wenn die Bilder einen grafischen Darstellungszweck verfolgen und beispielsweise gewisse Details unbedingt darstellen müssen (z.B. bei Diagrammen). Eine automatische Kompression geht hier in den meisten Fällen in die Hose.
Wir empfehlen daher, die eigenen liquiden Mittel einfach in ein adäquates Bildbearbeitungsprogramm zu investieren oder die gängigen kostenlosen Tools für Windows, Mac und Co. zu nutzen. Das schont nicht nur das betriebliche Konto, sondern auch die Ressourcen des Webspace. Manchmal lohnt sich beispielsweise der Umstieg auf MacOS Hardware, auch wenn „überzogenen“ Kosten für die Hardware den hart kalkulierenden Unternehmer im Vorwege schnell abschrecken.
Der einfache und intuitive Workflow in der Bildoptimierung lässt den Mehrpreis für ein logisches Systemverhalten sehr schnell als amortisiert erscheinen. Wer viel mit Screenshots und umfangreichen Display-Aufnahmen arbeitet, diese komprimieren und zurechtschneiden muss und danach auf eine Webseite lädt, wird den Komfort von MacOS hier nur ungern missen wollen. Aber das nur am Rande.
[sibwp_form id=2]
