Cloudinary

Copyright © Shutterstock / Postmodern Studio

Was ist Cloudinary?

Überblick und Allgemeines

Die korrekte Einbindung von Bildern und Videos kann in komplexeren Webseiten zu einer Herausforderung werden. Verschiedene Geräte stellen unterschiedliche Anforderungen an die Dateien. Dies betrifft beispielsweise die Pixeldichte oder die Auflösungen.

Meist sind daher mehr als nur eine Bilddatei zu referenzieren. Die korrekte Ausgabe einer Webseite und ihrer Bilder auf verschiedenen Endgeräten nennt sich Responsivität. Cloudinary trägt dazu bei, dass das Bild- und Video-Management responsiven Anforderungen genügt.

Gleichermaßen ist es erforderlich, dass Dateien trotz hochauflösender Displays möglichst klein gehalten werden, da das Datenvolumen begrenzt ist. Auch diese Herausforderung will der Cloud-Dienst lösen. Cloudinary ermöglicht es Webseiten-Betreibern, Bilder und Videos in verschiedenen Auflösungen und -qualitäten hochzuladen und in unterschiedliche Arten von Webseiten oder Blogs einzubinden.

Funktionsweise und Eigenschaften

Bilder lassen sich unmittelbar in Cloudinary hochladen und über deren Oberfläche bearbeiten und modifizieren. Cloudinary ermöglicht es Anwendern, die Bilder mit zahlreichen Effekten zu versehen. Nutzer können etwa Sättigung, Kontrast oder Helligkeit sofort bei Cloudinary anpassen.

Ergänzt werden die Bearbeitungsmöglichkeiten durch Bildeffekte wie Unschärfen oder Vignetten. Nach Abschluss der Bearbeitung lassen sich die Bilder über eine zu diesem Zweck generierte URL in die Internetseite oder das Blog einbinden.

In dieser URL sind sämtliche relevanten Angaben wie etwa die Bildauflösung bereits integriert. Auch das Format sowie die vom Nutzer angewandten Effekte sind in der URL enthalten. Weiterhin ist es möglich, weitere Modifikationen und Anpassungen direkt über die URL vorzunehmen.

Als umfangreicher Cloud-Dienst leistet Cloudinary damit Unterstützung bei der Optimierung für Bilder für den Webeinsatz. Hilfreich ist der Dienst insbesondere für Anwender, die kein Content Management System einsetzen, da sich Bilder auf einfache Weise bearbeiten und komprimieren lassen. Von Vorteil ist die schnelle Ausführungsgeschwindigkeit beim Erstellen und Laden der Bilder.

Performance und Responsivität

Cloudinary ist darauf ausgelegt, beim Einsatz von Bildern uneingeschränkt responsiv zu sein. So empfehlen sich etwa auf kleineren oder weniger stark auflösenden Displays kleinere Bilddateien. Dies senkt die Dateigröße und trägt damit zu einer besseren Performance bei. Mit dem Element bietet Cloudinary die Möglichkeit, unterschiedliche Bilddateien für verschiedene Auflösungen auf einfache Weise einzubinden.

Eine Herausforderung besteht darin, dass Bilder nicht immer in statischen Breiten dargestellt werden, sondern sich der durch den Anzeigebereich vorgegebenen Breite anpassen. In Zusammenspiel mit jQuery lässt sich für die je dargestellte Bildgröße stets ein passendes Bild ausgeben.

Wird die Bilddatei aufgerufen und die Klasse cld-responsive vergeben, lässt sich mit w_auto eine automatische Breite erzeugen. Dies führt dazu, dass das jQuery-Plug-in automatisch dafür sorgt, dass die Bilddatei an die jeweilige Darstellungsgröße angepasst wird. Dies ist etwa bei der Darstellung mehrspaltiger Galerien von Vorteil, die sich damit an der Gesamtbreite des Fensters im Browser orientieren können.

Hat ein Bild eine bestimmte Pixelanzahl in der Breite, so generiert Cloudinary Bilder in genau dieser Breite und gibt sie aus. Somit lässt sich verhindern, dass es zur Einbindung zu großer Bilddateien kommt. Die Webseite wird auf diese Weise schlanker und schneller.

Neben der Breite (w_auto) lässt sich auch die Pixeldichte berücksichtigen und automatisieren. Über die Option dpr_auto wird die korrekte Pixeldichte automatisch bei der Erstellung der Bilddateien berücksichtigt.

Auch wenn es zur Vergrößerung oder Verkleinerung des Browserfensters kommt, lädt Cloudinary passgenaue Bilder nach. In der Standardeinstellungen berücksichtigt der Dienst hierbei Veränderungen der Fenstergröße ab 10 Pixel.

Automatisierte Bildqualitäten und -formate

Neben der passgenauen Größe der Bilder sind weiterhin die Qualität sowie das Format von Bedeutung, wenn es um eine ressourcensparende Darstellung der Bilder geht.

Zu den beliebtesten Formaten zur Bilddarstellung im Internet gehören JPEG, GIF und PNG. In Abhängigkeit des Browsers sind weitere Bildformate relevant. Beispielsweise bedient sich Google Chrome des Formats WebP, wenn es um die Darstellung kleinerer Dateien geht. Microsoft verfügt mit JPEG-XR ebenso über ein eigenes Format, das auf Komprimierung ausgelegt ist.

Diese Formate haben ihre spezifischen Vor- und Nachteile sowie Verwendungszwecke. Während JPEG für großformatige Bilder und Fotos geeignet ist, kommt PNG bei Grafiken zum Einsatz. Geht es darum, Ressourcen zu sparen, sind komprimierte Formate zu bevorzugen.

Cloudinary kann dafür sorgen, für jeden Anwendungsbereich das passende Format zu verwenden. Die Option f_auto wählt automatisch das für den jeweiligen Einsatzzweck passende Format aus. Soll das Bild etwa in Google Chrome ausgegeben werden, kann der Dienst automatisch das WebP-Format wählen. Auch die Bildqualität lässt sich in einem Wertebereich von 10 bis 100 anpassen (beispielsweise q_60). Je nach Bildinhalt kann eine stärkere oder geringere Komprimierung vorteilhaft sein.