Image Widgetvergleich Titelbild

Verschiedene Image-Widgets für WordPress – ein Vergleich

Es mag trivial klingen, aber tatsächlich ist es mit WordPress-Bordmitteln gar nicht so simpel ein einfaches Bild aus der Medienbibliothek von WordPress in ein Widget einzufügen. Deshalb vergleiche ich heute 3 Widgets, die das einfach bewerkstelligen sollen.

 

Der klassische Weg wäre:

  1. Das Bild in der Medienbibliothek heraussuchen und die URL kopieren.
  2. Ein Textwidget in die Seite einfügen und das Bild dort per URL einbetten.

Das hat zwar einerseits den Vorteil, dass keinerlei Anpassungen einer WordPress-Installation nötig sind, andererseits aber den Nachteil, dass das Bild nicht „richtig“ responsive ist. Das heißt, dass für jede Bildschirmauflösung das gleiche Bild dargestellt wird. Gerade ein nicht optimiertes Riesenbild kann schnell mal ein paar Megabyte groß sein und damit die Seitenladezeit erheblich erhöhen. Vor allem seitdem WordPress mit Version 4.4 die Möglichkeit bietet für unterschiedliche Bildschirmauflösungen unterschiedliche Bilder auszuliefern scheidet der klassische Weg also aus.
Außerdem wählen viele Kunden lieber eine Datei direkt aus, als sich mit Copy und Paste zu belasten.

Simple Image Widget

Das Simple-Image Widget bietet das, was es verspricht. Widget in den gewünschten Widgetbereich ziehen, Datei aus der Bibliothek auswählen und speichern. Das war’s auch schon. Das Widget erlaubt es außerdem noch das Bild mit einem Link zu versehen. Auch die Größe kann definiert werden – hier gibt es die WordPress Standardgrößen: Thumbnail, Medium, Large und Full Size.
Daneben gibt es die üblichen Textmöglichkeiten für Titel und Linktext.

Der Browser erhält das Bild, samt  Titel und Alternativtext. Das Bild sitzt in einem <img>-Tag und liefert mittels srcset-Attribut auch verschiedene Bildgrößen, je nach Bildschirmbreite. Besonders also für mobile Endgeräte mit begrenzter Bandbreite sinnvoll.

Simple Image Widget Pluginseite im WordPress Directory
Simple Image Widget Pluginseite im WordPress Directory

 

Der Simple-Image-Widget-Dialog
Der Simple-Image-Widget-Dialog

HW Image Widget

Auch das HW Image-Widget erlaubt es einfach und schnell ein Widget mit Bildinhalt zu erstellen. Es erlaubt sogar, das HTML-Template anzupassen und man kann dem Bild ein Textfeld hinzufügen, dessen Inhalt über den WYSIWYG-Editor von WordPress gestaltbar ist. Man kann das Bild mit einem Link versehen, samt Linktext. Ebenso darf man die Zielgröße des Bildes in Pixeln angeben – sie wird aber lediglich als CSS-Stil auf das Bild angewendet.
Das Bild wird dann als <img>-Tag an den Browser gesendet – leider ohne die Möglichkeit verschiedene Größen mittels srcset-Attribut auszuliefern.

Die HW image-Widget Pluginseite im WordPress Directory
Die HW image-Widget Pluginseite im WordPress Directory
Der HW image-Widget Dialog
Der HW image-Widget Dialog
Der HW image-Widget Texteditor
Der HW image-Widget Textboxeditor

Image Widget

Zu guter Letzt habe ich noch das Image Widget Plugin getestet. Auch hier stehen wie bei den anderen Plugins Linkmöglichkeit und verschiedene Textmöglichkeiten zur Verfügung. Wiederum besteht die Möglichkeit per Template die HTML-Ausgabe zu beeinflussen – das Template ist etwas simpler aufgebaut als bei HW image widget.
Leider fehlt auch bei diesem beliebten Widget die srcset-Attribut Ausgabe und somit bekommen alle Endgeräte das gleiche Bild geliefert.

Image Widget Pluginseite im WordPress Repository
Image Widget Pluginseite im WordPress Repository
Image Widget Dialog
Image Widget Dialog

Fazit

So simpel es erscheinen mag, ein Bild als Widget in WordPress einzubinden.  Jeder macht es ein wenig anders. Mein Favorit ist eindeutig das simple Image widget, da es die verschiedenen Bildschirmauflösungen von Mobilgeräten mit unterschiedlichen Bildgrößen versorgt und damit der begrenzten Bandbreite der Mobilfunkverbindung am besten Rechnung trägt.