Ein Blick auf das Cloudinary WordPress Plugin

Cloudinary (der Medienspeicher- und Optimierungsdienst) hat eine brandneue Version (v3) seines WordPress-Plugins, die es wirklich draufhat. Zuerst ein Überblick über die wichtigsten Dinge, die dieses Plugin tut

• Es übernimmt die Handhabung Ihrer Medien. Bilder und Videos werden von Cloudinary statt von Ihrem eigenen Server ausgeliefert, was aus einer Vielzahl von Gründen gut ist. Aber keine Sorge, Ihre Assets sind auch auf Ihrem eigenen Server, sodass kein Lock-in besteht.
• Es liefert Ihre Bilder und Videos so performant wie möglich aus. Alles ist optimiert, im besten Format ausgeliefert und nutzt Techniken wie responsive Bilder und Lazy Loading, während gleichzeitig ein gutes Ladeerlebnis geboten wird. All diese Dinge sind enorm wichtig für die Performance.
• Es bietet einen Bildgalerie-Block mit vielen Funktionen.

Die Einrichtung ist so einfach wie das Kopieren und Einfügen aus Ihrem Cloudinary-Konto.

Ja, Sie benötigen ein Cloudinary-Konto. Hier können Sie sich die programmierbaren Medienpläne ansehen. Es gibt eine kostenlose Stufe, die wahrscheinlich für viele Websites ausreicht, und kostenpflichtige Pläne, die Websites mit hohem Medienbedarf abdecken. Die Preise dürften für Sie annehmbar sein. Sobald Sie Ihr Konto haben, fügen Sie den Verbindungstring (von Ihrem Dashboard) in diesen schnellen Onboarding-Assistenten ein, und Sie sind im Grunde fertig. Die Standardeinstellungen sind gut.

Sie könnten buchstäblich nichts weiter tun und das Plugin würde seine Magie wirken, aber es macht Spaß, sich all die Einstellungen anzusehen.

Hier sind die allgemeinen Einstellungen

Diese beiden (Standard-)Einstellungen sind wichtig. Auto-Sync ist praktisch, da alle Ihre Bilder (einschließlich Ihrer gesamten bestehenden Mediathek) mit Cloudinary synchronisiert werden und synchron bleiben. Dies ist notwendig, um Ihre Bilder zu hosten (und optionale schicke Dinge wie "Transformationen" durchzuführen), aber ansonsten könnten Sie es als Backup betrachten. Wenn Sie "Cloudinary und WordPress" als Speicher-Einstellung verwenden, bedeutet dies, dass Medien sowohl auf Ihrem eigenen Server als auch auf Cloudinary hochgeladen werden. Das würde ich sehr empfehlen, aber wenn Sie beispielsweise sehr wenig oder gar keinen Speicherplatz auf Ihrem WordPress-Host haben, könnten die Bilder auch nur direkt an Cloudinary gesendet werden.

In den Bild-Einstellungen sehen Sie zwei der mächtigsten Waffen von Cloudinary: f_auto und q_auto, was für "automatische Bildformatierung" und "automatische Qualitätskomprimierung" steht. Das sind Standardeinstellungen, die ich dringend empfehlen würde, unverändert zu lassen. Das bedeutet, dass jeder Browser auf jedem Gerät das bestmögliche Bildformat erhält, und Cloudinary passt die Qualität entsprechend dem Bild an. Cloudinary verfügt über sehr gute Technologien dafür, also lassen Sie es machen.

Die Checkliste "Bilder richtig machen" gibt es.

Denken Sie daran, wir haben kürzlich darüber gebloggt. Hosten Sie sie auf einem CDN. Optimieren Sie sie. Liefern Sie sie im bestmöglichen Format für den anfragenden Browser aus. Verwenden Sie responsive Bilder. Laden Sie sie verzögert. Nichts davon ist trivial, und das ist nur eine teilweise Liste. Die gute Nachricht ist: dieses Plugin erledigt all das für Sie, macht es gut und das, ohne dass Sie zu viel darüber nachdenken müssen.

Ich sehe gerne die Ausgabe. Hier trifft das Eisen auf die Straße. Daraus kann ich sehen, dass responsive Bilder korrekt implementiert sind und viele verschiedene Größen verfügbar sind. Ich sehe, dass die Bildquellen auf das Cloudinary CDN verweisen. Ich sehe, dass Lazy Loading implementiert ist und funktioniert. Ich sehe, dass die Attribute width und height vorhanden sind, wie sie sein sollten, um sicherzustellen, dass beim Laden Platz für die Bilder reserviert wird. Das ist alles.

Es geht die Extrameile, indem es auch die vom Theme verwendeten Bilder hostet.

Verdammt, es ersetzt sogar CSS background-images in der Stylesheet Ihres Themes durch von Cloudinary gehostete Versionen. Das ist... erstaunlich. Da muss wirklich cleverer WordPress-Filter-Kram am Werk sein.

Der Galerie-Block ist nur "Sahnehäubchen".

Ich sehe es gerne darin

Warum? Es zeigt, dass dieses Plugin Teil des modernen WordPress ist. Block-Editor-WordPress. Der Block selbst ist einfach, aber nützlich. Er zeigt Bilder in einer Vielzahl nützlicher Layouts mit einem "Lightbox"-ähnlichen Effekt (wow, es ist lange her, seit ich das Wort Lightbox geschrieben habe). Hey, manchmal braucht man einfach eine verdammte Bildergalerie, und man könnte genauso gut eine verwenden, die gut gemacht ist.

Wer bin ich, das zu sagen?

Nur ein einfacher Blogger, nehme ich an. Aber ich kann Ihnen sagen, ich beobachte das schon eine ganze Weile. Vor einiger Zeit habe ich eine selbstgemachte Cloudinary-Integration hier auf CSS-Tricks implementiert, weil ich all diesen Kram wollte. Ich musste sie letztendlich aufgeben, da sie mehr technische Schulden verursachte, als ich aufrechterhalten konnte.

Die früheren Versionen des WordPress-Plugins waren besser, aber erst jetzt, mit v3, ist diese Integration wirklich perfektioniert.

Kurz nach der Zeit, als ich meine benutzerdefinierte Integration abgerissen habe, bloggte ich "Workflow Considerations for Using an Image Management Service" und legte dar, was meiner Meinung nach die (ziemlich hohe) Messlatte für die Integration eines Drittanbieter-Bild-Hosts sein würde. Es war viel verlangt, und ich war mir nicht wirklich sicher, ob irgendjemand den Anreiz und die Motivation finden würde, all das zu tun. Nun, Cloudinary hat es hier getan. Dies ist ein so perfektes Medienmanagement-Plugin, wie ich es mir vorstellen konnte.