Im nun vierten Teil meiner Reihe über WordPress Plugins setze ich mich nun einmal mit Tools für Bilder auf der Webseite auseinander. Bilder sind in nahezu jedem Content Management System (CMS) ein Grauen. WordPress ist hierbei keine Ausnahme. Um eine größtmögliche Performance bieten zu können, werden von allen Bildern zum Zeitpunkt des Einbindens mehrere Kopien in unterschiedlicher Größe abgelegt. Hierdurch wird enorm viel Festplattenspeicher belegt und eine ganze Reihe an Dateileichen bleiben nach Designanpassungen zurück.

Bilder austauschen (Enable Media Replace)

Irgendwann möchte man einmal ein bereits integriertes Bild austauschen. Dies kann erforderlich werden, wenn ein hochauflösenderes Bild erforderlich wird, oder auch einfach ein passenderes Motiv verfügbar ist. Die Standardmethode bei WordPress sieht vor, dass ein neues Bild hochgeladen wird (mit neuem Namen) und anschließend alle Vorkommen des alten Bildes von Hand ausgetauscht werden müssen. Viel eleganter geht dies allerdings mit dem WordPress Plugin Enable Media Replace von Måns Jonasson. Der Schwede hat hier eine Funktionalität in WordPress integriert, die so auch im Kern des Content Management Systems hätte realisiert werden können.

Mit dem WordPress Plugin kann eine neue Bilddatei auf den Server geladen werden, die ein bereits bestehendes Bild ersetzt. Dabei hat man die Möglichkeit den alten Dateinamen beizubehalten wodurch keine Anpassungen im Content erforderlich werden, oder den neuen Dateinamen zu übernehmen und automatisch alle Vorkommen der alten Datei durch die neue ersetzen zu lassen. Letzteres ist allerdings mit Vorsicht zu genießen, denn wurde das Bild in Erweiterungen oder hart als HTML Code eingebunden, kann das Plugin diese Änderungen nicht vornehmen. Es lohnt sich also immer schon vorher genau zu überlegen, wie man eine Datei benennt um spätere Namensänderungen zu vermeiden.

Das WordPress Plugin klinkt sich in die Medienbibliothek ein und ein Austausch eines Bildes ist anschließend an vielen Stellen durch ein einfaches Formular sauber möglich.

• Sprache: Englisch, Deutsch
• Preis: kostenfrei

Bildersammlung (Huge IT Image Gallery)

Auf meiner Suche nach einem WordPress Plugin für eine Bildersammlung bin ich auf das Plugin Huge IT Image Gallery (Plugin Homepage) von Huge-IT gestoßen. Auch dieses WordPress Plugin ist in einer kostenfreien und kostenpflichtigen Version mit deutlich mehr Funktionen erhältlich. Die kostenlose Fassung ist allerdings bereits äußerst gut ausgestattet und für den regulären Bedarf mehr als ausreichend.

Die Bildergallerien sind mit zahlreichen Optionen konfigurierbar. Das Design kann von einfachen Übersichten bis hin zu sehr ansprechenden Kollagen reichen.

• Sprache: Englisch
• Preis: kostenfrei, Pro Version ab 30$

Slideshows (Meta Slider)

Wer seine Bilder lieber in einer Slideshow präsentiert, ist mit dem WordPress Plugin Meta Slider (Projekt Homepage) von Matcha Labs gut bedient. Vier verschiedene Diashow Arten sind enthalten, die alle wiederum einzeln konfiguriert und den individuellen Bedürfnissen angepasst werden können. Die Handhabung ist äußerst einfach und die Slideshows werden durch sogenannte Tags in den Content eingebunden.

• Sprache: Englisch, Deutsch
• Preis: kostenfrei, Pro Version ab 19$

Schnellere Ladezeiten durch Faulheit (BJ Lazy Load)

Viele Bilder, vor allem in guter Qualität bringen einen erheblichen Nachteil mit sich: Die Ladezeit erhöht sich durch die Bildgröße erheblich. Um diesem Effekt entgegenzuwirken bleiben nur zwei Möglichkeiten: Bilder komprimieren und damit die Dateigröße zu reduzieren, oder durch einen Trick für den Besucher der Seite schneller Resultate zu präsentieren. Den zweiten Ansatz verfolgt das WordPress Plugin BJ Lazy Load von Bjørn Johansen.

Durch ein wenig JavaScript werden Bilder außerhalb des sichtbaren Bereichs erst später geladen. Für den Besucher der Seite ist damit schon nach kurzer Zeit die Webseite sichtbar, während die restlichen Bilder erst dann übertragen werden, wenn sie angezeigt werden sollen. Das WordPress Plugin kommt mit marginaler, allerdings nützlicher Konfiguration aus, braucht allerdings lediglich installiert und aktiviert werden um voll einsatzfähig zu sein. Über die Einstellungen des Plugins kann festgelegt werden, welche ob Bilder von der Lazy Load Technologie ausgenommen werden sollen.

• Sprache: Englisch
• Preis: kostenfrei

Bilder Komprimieren (WP Smush)

Den Ansatz der Kompression von Bildern um die Dateigröße zu reduzieren und damit eine schnellere Ladezeit zu erzielen, verfolgt das WordPress Plugin WP Smush von WPMU DEV. Auch dieses Plugin kommt ohne relevante Einstellungen in der kostenfreien Version aus. Wer das WordPress Plugin nachträglich installiert, kann alle bereits vorhandenen Bilder durch einen Job überarbeiten lassen. Die Einstellungen und der Aufruf des Jobs finden sich als neuer Menüpunkt unterhalb der Medien. Alternativ kann auch ein Bild einzeln in der Medienübersicht durch WP Smush bearbeitet werden.

Die Kompression wird durch eine gröbere Abtastrate bei den Bildern erzielt. Üblicherweise ist bei den meisten Bildern eine Verschlechterung erst ab einer Kompression von unter 50% bei einem direkten Vergleich deutlich zu erkennen. Der Effekt auf die Dateigröße ist dann allerdings enorm.

Die beiden Bilder rechts sollen dies verdeutlichen: Das linke obere Viertel ist im Ursprungszustand, rechts oben wurde ein Qualitätsfaktor von 75%, unten links 50% und unten rechts sogar nur 25% angegeben. Erst in der Ausschnittsvergrößerung auf dem zweiten Bild werden die Qualitätsverluste sichtbar. Die Dateigrößen der vier Einzelbilder schwanken dafür aber von 288 KB bei der besten Auflösung bis zu gerade einmal 55 KB bei der Qualitätsstufe von 25%. Allerdings ist bereits bei 75% die Dateigröße auf unter 30% des ursprünglichen Wertes reduziert, danach sind weitere Einsparungen nur noch in kleinen Schritten zu erzielen.

Weitere Maßnahmen wie das entfernen nicht genutzer Farben, etc. wendet das Plugin ebenfalls intelligent an um eine maximale Kompression bei möglichst guter Bildqualität zu erzielen.

Eine kostenpflichtige (Abo) Pro Version fügt noch einige überschaubare Zusatzfunktionalitäten hinzu.

• Sprache: Englisch
• Preis: kostenfrei, Pro Version ab 19$ pro Jahr

Hochauflösende Grafiken (WP Retina 2x)

Für die immer mehr zum Einsatz kommenden Geräte mit hochauflösenden Displays stellen die komprimierten Bilder ein Manko dar. Hier springt das WordPress Plugin WP Retina 2x (Plugin Homepage) von Jordy Meow in die Bresche und legt für die in Frage kommenden Auflösungen zusätzliche Bilddateien in besserer Qualität an. WP Retina 2x arbeitet mit WP Smush Hand in Hand. Durch dieses WordPress Plugin wird mehr Festplattenspeicher für die hochauflösenden Bilder benötigt. Auch kann es nur dann passende Bilder generieren, wenn ein entsprechend hochauflösendes Ursprungsbild vorliegt. Das Ausgangsbild sollte idealerweise mindestens eine Auflösung von 1600×1600 Pixeln haben. Eine nachträgliche Erzeugung von Retina Bildern ist ebenfalls per Job möglich.

Faktisch macht dieses WordPress Plugin allerdings nur Sinn, wenn die Webseite wirklich einen Fokus auf brillante Bilder Anzeigen auf sogenannten Retina Displays legt. In der Pro Version werden auch von den Vollbildern entsprechende Retina Bilder generiert.

• Sprache: Englisch
• Preis: kostenfrei, Pro Version ab 15$ pro Jahr oder 30$ einmalig

Bilder aufräumen (Regenerate Thumbnails und Force Regenerate Thumbnails)

Hat man in WordPress einige Designänderungen vorgenommen oder die Größe der Bildformate unter den Einstellungen angepasst, sind die Bilder alle noch in den alten Formaten auf der Festplatte des Webservers vorhanden. So können sich über die Jahre Unmengen an Bilderleichen ergeben, die manuell zu sortieren ob der Unübersichtlichkeit äußerst mühselig ist. Hilfe kommt hier durch die beiden Plugins Regenerate Thumbnails (Plugin Homepage) von Alex Mills und Force Regenerate Thumbnails (Plugin Homepage) von Pedro Elsner.

Inhaltlich machen beide Plugins das gleiche: Sie arbeiten alle Bilder ab, erzeugen neue Versionen entsprechend der aktuellen Formatvorgaben durch das Template und den Einstellungen und löschen ggf. nicht mehr benötigte Dateien. Das Plugin Force Regenerate Thumbnails geht dabei etwas radikaler zu Werke und sollte nur dann genutzt werden, wenn die sanfte Methode nicht funktioniert hat.

Auch ist bei beiden Plugins Vorsicht walten zu lassen, denn Bilder, die auf unkonventionelle Weise in Content, Themes oder in Plugins verlinkt wurden, könnten fälschlicherweise als überflüssig angesehen und damit gelöscht werden. Ein Backup vor Anwendung dieser Plugins ist auf jeden Fall angeraten.

Aufgerufen werden die Plugins über entsprechende Unterpunkte unter dem Menü Medien oder auf der Detailseite eines spezifischen Bildes.

• Sprache: Englisch
• Preis: kostenfrei

CC0 Bildagentur (Pixabay Images)

Letztlich bleibt noch die Frage, woher man Bilder für seine Webseite erhalten kann, ohne Gefahr einer Abmahnung hinsichtlich einer Urheberrechtsverletzung zu laufen. Sogenannte CC0 (Creative Commons Zero) lizensierte Bilder bietet die Plattform Pixabay kostenfrei an. Mit dem passenden WordPress Plugin Pixabay Images (Plugin Homepage) von Simon Steinberger lässt sich die Bilderdatenbank leicht online durchforsten und passende Bilder auch direkt in das Content Management System (CMS) WordPress importieren.

Sowohl in der Mediendatenbank, also auch über jeden Beitrag befindet sich nach der Installation ein Button “Pixabay”, der das erforderliche Formular zur Suche von Bildern öffnet.

Hinweis: Pixabay garantiert leider nicht, dass wirklich alle Bilder unter CC0 Lizenz verfügbar sind und empfiehlt einen Screenshot des Bildes und der zugehörigen Angaben auf der Pixabay Seite zu erstellen und aufzubewahren. Den Bildautoren kann man darüber hinaus auf Pixabay auch ein Dankeschön für die Bilder, die gemäß CC0 Lizenz auch ohne Namensnennung verwendet werden dürfen, zukommen lassen.

• Sprache: Englisch, Deutsch
• Preis: kostenfrei