WordPress Media Experiments – Spannende Aussichten für den WordPress-Editor
Am Kickoff-Event der Basel WordPress Meetup Group durften die Teilnehmenden einem tollen Vortrag lauschen, der sich mit Verbesserungen für den Block-Editor von WordPress beschäftigte. Pascal Birchler, Core-Commiter für WordPress und WP-CLI, präsentierte spannende Ideen, wie das Handling von Medien im Block-Editor verbessert werden kann.
Wobei das Wort «Ideen» in diesem Fall fast schon zu kurz greift. Aus den Ideen sind bereits handfeste, experimentelle Funktionen geworden, die du sogar selbst in deinen WordPress-Installationen testen kannst. Dazu aber später mehr.
Dein Browser als mächtiges Werkzeug
Pascal hat bereits eine ganze Liste an Funktionen umgesetzt. Gemeinsam ist den Funktionen, dass sie allesamt auf modernen Webtechnologien aufbauen, allen voran WebAssembly. WebAssembly macht die Ausführung von Code im Browser möglich, der bisher nativen oder serverseitigen Programmen vorbehalten war. Das eröffnet grandiose Möglichkeiten, die Pascal mit seinem WordPress-Plugin Media Experiments in den Block-Editor einbaut.
Lokale Bildoptimierung anstatt auf dem Server
Mit deinem heutigen Desktop-Gerät, Laptop oder Smartphone hast du so viel Rechenpower unter den Fingern, von der du vor ein paar Jahren nur träumen konntest. Warum sollte also die Optimierung deiner Bilder in der WordPress-Medienbibliothek erst auf dem Server stattfinden? Genau das hat sich Pascal auch gedacht. Herausgekommen sind Funktionen wie «Optimize Existing Media», «Client-Side Image Downsizing» oder auch «Client-Side Thumbnail Generation». Die Funktionen machen genau das, was du von ihrer Beschreibung erwarten kannst.
Optimize Existing Media
Vergleiche die beiden Bildversionen direkt im Browser.
Dank Optimize Existing Media kannst du bereits vorhandene Medienelemente eines Beitrags in ein moderneres Format konvertieren. Und zwar einzeln oder direkt in einem Batch. Nach der Konvertierung kannst du optional die alte und die neue Version mit einem Schieberegler vergleichen. Die Einsparung der Dateigrösse in Prozent wird dir ebenfalls angezeigt.
Client-Side Image Downsizing
Lädst du ein neues Bild in den Editor, erkennt WordPress, ob es sich um ein «grosses» Bild handelt. Dabei wird geprüft, ob das Bild einen bestimmten Schwellenwert überschreitet (derzeit 2560px Breite). Bilder, die diese Schwelle überschreiten, werden normalerweise nach dem Upload auf dem Server verkleinert, um zu verhindern, dass Benutzer*innen unnötig grosse Bilder in ihren Inhalten verwenden. Die Originaldatei bleibt jedoch für den Fall der Fälle erhalten. Die serverseitige Verkleinerung ist zwar sinnvoll, aber das Hochladen des gesamten Originalbildes ist eine Verschwendung. Die dank der neuen Funktion clientseitige Verkleinerung verbessert die Uploadzeit und reduziert den Bandbreitenverbrauch.
Client-Side Thumbnail Generation
Beim Hochladen eines Bildes in WordPress werden viele Thumbnail-Versionen des Bildes erzeugt. Dies führt oft zu sehr langsamen Upload-Prozessen, so dass WordPress einen Workaround entwickeln musste, um die fehlgeschlagenen Versuche fortzusetzen. Neben dem Performance-Problem würden die Thumbnails auch nicht von den gleichen clientseitigen Bildoptimierungen profitieren.
Aus diesem Grund erfolgt die Thumbnail-Generierung dank «Client-Side Thumbnail Generation» nun ebenfalls vollständig clientseitig. Das führt zu weniger Serverlast, zu weniger fehlgeschlagenen Uploads und ausserdem zu Thumbnails, die die gleichen Eigenschaften wie das Original haben.
Nifty Features mit Wow-Effekt
Während Performance-Optimierungen ein grosser Treiber für Pascals Experimente sind, findest du in den WordPress Media Experiments auch Funktionen, die nicht direkt etwas mit Performance zu tun haben. Sie sind dadurch aber nicht weniger cool. Ganz im Gegenteil, wie ich finde.
Upload from another device
Dank QR-Code lädst du ganz einfach ein Foto von deinem Smartphone hoch.
Pascal hat am Basel WordPress Meetup mit der Demonstration dieser Funktion für staunende Gesichter gesorgt. Die Funktion ermöglicht es dir, mit einem Zweitgerät eine Mediendatei in den aktuell auf deinem Erstgerät offenen Editor bzw. in die Mediathek zu schicken. Superpraktisch, wenn du zum Beispiel ein Foto, das nur auf deinem Smartphone vorhanden ist, in einen Beitrag einfügen möchtest. Das manuelle Rüberschicken auf dein Erstgerät entfällt. Du musst nur den im Editor angezeigten Upload-Link auf deinem Zweitgerät öffnen und dein Bild dann hochladen. Schon erscheint wie aus Geisterhand das gewünschten Bild im Editor. Selbstverständlich hat Pascal direkt eine QR-Code-Option eingebaut, damit du die URL nicht mühsam auf deinem Smartphone eintippen musst.
Saliency Detection
WebAssembly macht Vieles möglich. So auch zum Beispiel, dass du Machine Learning direkt in deinem Browser nutzen kannst. Die Funktion «Saliency Detection» macht sich das zu Nutze und erkennt so den relevantesten Teil auf einem Bild. Beim Zuschneiden der Thumbnails wird dann auf diesen Teil fokussiert.
Generate video captions for videos
Ebenfalls basierend auf KI generiert dir die Funktion «Generate video captions for videos», du ahnst es, Untertitel für Videos, die du in den Editor lädst. Alles in deinem Browser, basierend auf einem grossen Sprachmodell (Large Language Model, LLM), das die Funktion zuvor in deinen Browser lädt. Damit wandern keine Daten zu AI-Tools, die dir solche Funktionen im Web anbieten.
Probiere es selbst
Die gezeigten Funktionen sind nur ein kleiner Teil des aktuellen Umfangs der WordPress Media Experiments. Das Aufzählen aller Funktionen würde den Rahmen dieses Beitrags sprengen. Umso schöner, dass du sämtliche Funktionen direkt in deiner eigenen WordPress-Installation testen kannst. Eine Anleitung dazu sowie alle weiteren wichtigen Informationen findest du im passenden GitHub-Repo.
Pascal freut sich über Feedbacks und Bugreports als Issue bei GitHub. Oder du hinterlässt hier einen Kommentar. Wir leiten deine Inputs dann gerne an Pascal weiter, falls er hier nicht sowieso bereits mitliest. 😉
Titelbild: Girl with red hat/Unsplash