Responsive Webdesign ist inzwischen für viele Internetseiten zum Standard geworden. Denn der Anteil der Nutzer, die Websites mit dem Smartphone bzw. Tablet besucht, ist stark gestiegen. Und „mobile-friendly“ ist mittlerweile auch ein Kriterium beim Ranking in den Suchmaschinen wie Google und Co. Doch nicht nur eine optimierte Darstellung des Seitenlayouts ist für mobile Nutzer wichtig, sondern auch die Performance einer Website.
Internetseiten werden heute in unterschiedlichsten Bildschirmgrößen und Pixeldichten aufgerufen. Um dem Nutzer eine bestmögliche Performance zu bieten, sollten Bilder und Videos an die verschiedenen Endgeräte angepasst sein. Und besonders Nutzer mit langsamen mobilen Datenverbindungen möchten keine Größen Bild- und Videodaten laden. Cloudinary hat sich als Cloud-Dienstleister auf Bilderverwaltung und Bildoptimierung spezialisiert. Der Dienst ermöglicht eine hohe Flexibilität für den responsiven Bildeinsatz. Was steckt hinter Cloudinary und wie könnt ihr es auf eure Projekte anwenden?
Bildanpassungen on-the-fly
Cloudinary bietet die Möglichkeit, Bilder und Videos in der Cloud zu verwalten und zu bearbeiten. Zusätzlich bietet Cloudinary ein Bildbearbeitungstool, um Bilder je nach Wunsch in Auflösung, Größe und Qualität zu verändern. Damit ist es ein sehr praktisches Tool für die Umsetzung von Responsive Webdesign. Außerdem können zahlreiche Effekte wie Tilt-Shift oder Farbkorrekturen über das Tools mit nur wenigen Klicks realisiert werden. Cloudinary stellt mehr als 30 Bildeffekte zu Verfügung und bietet für Webdesigner damit eine interessante Alternative zur Bildbearbeitung in z.B. Photoshop.
Änderungen werden nicht wie gewohnt mit dem Bild abgespeichert, sondern über eine generierte URL dem Bild zugewiesen. Dabei arbeitet das Bildbearbeitungstool wie ein Generator. Sobald Änderungen am Bild vorgenommen werden, generiert das Tool die passende URL für die hinzugefügten/geänderten Eigenschaften. Eine URL eines unveränderten Bildes sieht folgendermaßen aus:
Als Beispiel haben wir hier unser Agentur-Logo über den Editor in Größe und Qualität verändert. Die neue URL sieht nun folgendermaßen aus:
Schaut ihr euch die neu generierte URL genauer an, fällt euch auf, dass die rot geschriebenen Einträge zusätzliche Parameter an unser Bild übergeben. Diese beinhalten die neuen Informationen für das Bild. Folgende Bedeutung steckt hinter den Parametern:
- h_146: Die Höhe unseres Bildes wurde auf 146 Pixel gesetzt (engl. height).
- w_350: Die Breite unseres Bildes wurde auf 350 Pixel gesetzt (engl. width).
- q_100: Die Qualität unseres Bildes wurde auf 100% gesetzt (engl. quality).
Ein Vorteil dieser Parameterschreibweise ist, dass ihr eure Grafiken auch mit neuen Eigenschaften versehen könnt, ohne auf die Benutzeroberfläche von Cloudinary wechseln zu müssen.
Dateiformate ändern
Nicht nur Eigenschaften des Bildes können spielend einfach verändert und angepasst werden, sondern auch das Dateiformat. Wenn ihr in ein anderes Dateiformat konvertieren möchtet, müsst ihr es normalerweise in einem Bildkonverter öffnen oder z.B. über Photoshop mit dem neuen Dateiformat abgespeichern. Dieser Schritt bei der Konvertierung von Dateiformaten entfällt nun komplett.
Über das Auswahlfeld „Format“ im Bildeditor kann einfach das gewünschte Dateiformat ausgewählt werden. Oder ihr tragt in der Bild-URL den gewünschten Dateityp einfach ein. Soll Cloudinary selbst entscheiden welches Dateiformat gewählt werden soll, kann als Parameter „f_auto“ in die URL geschrieben werden.
Cloudinary unterstützt die gängigen Formate .jpg, .png und .gif aber auch viele andere Formate wie WebP oder JPEG XR. Das Dateiformat WebP wird bislang ausschließlich von Google Chrome unterstützt, bietet jedoch nochmals eine deutliche besser Konvertierung der Daten. Das Format JPEG XR ist ähnlich wie WebP aus dem Hause Microsoft und kann nur im Internet Explorer ab 9 sowie Edge verwendet werden.
Pixeldichte berücksichtigen
Mittlerweile werden Internetseiten nicht nur mit unterschiedlichen Bildschirmgrößen aufgerufen, sondern auch mit unterschiedlicher Pixeldichte. Eine höhere Pixeldichte weißen beispielweise die Retina-Bildschirme von Apple sowie Smartphones mit hochauflösenden Bildschirmen auf. Um auch für diese Bildschirme bestens optimierte Bilder zur Verfügung zu stellen, bietet Cloudinary die Möglichkeit, Bilder mit unterschiedlichen Pixeldichten hinzuzufügen. Über das <img>-Element können die unterschiedlichen Bildversionen per „srcset“ eingebunden werden. Der Code dazu könnte folgendermaßen aussehen:
Code:
<img src="http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425/demo.jpg"
srcset="http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425/demo.jpg,
http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425,dpr_2/demo.jpg 2x,
http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425,dpr_3/demo.jpg 3x"
/>
Mit dem Parameter „dpr“ kann die Pixeldichte verändert werden. In dem oben gezeigten Beispiel werden drei Bilder mit unterschiedlicher Pixeldichte generiert. „dpr“ berechnet das Bild über den angegebenen Wert dann neu.
In unserem Beispiel hat das Ausgangsbild eine Größe von 640×425 Pixel. Wird wie in der letzten Zeile eine „dpr“ von 3 eingetragen, wird die Größe des Bildes um das dreifache multipliziert. In diesem Fall beträgt die neue Bildgröße dann 1920×1275 Pixel.
Bilder oder Grafiken, die nicht für hochauflösende Bildschirme optimiert wurden, weisen hierdurch natürlich eine Unschärfe aus. Besonders bei Icons ist es wichtig darauf zu achten, dass die Ausgangsbilder eine genügend hohe Auflösung besitzen.
Kosten von Cloudinary
Cloudinary kann derzeit von Nutzern, denen 75.000 Bild, 7.500 Transformationen, 2GB Speicher und ein monatlicher Traffic von 5 GB ausreichen, kostenlos genutzt werden. Für größere Volumen bietet Cloudinary mehrere Tarife von 44$ bis 224$ an. Sollte selbst der höchste Tarif nicht ausreichend sein, kann Cloudinary direkt kontaktiert und ein gesonderter Tarif verhandelt werden.
Die aktuelle Tarifübersicht findet ihr hier.
Zurück zur Übersicht