Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Redaktion Dr. Web 26. April 2016

Responsiver Bildeinsatz und Performanceoptimierung mit Cloudinary

Die richtige Verwendung von Bildern in zeitgemäßen Websites ist keine ganz so einfache Sache. Unterschiedliche Geräte mit unterschiedlichen Auflösungen und Pixeldichten erfordern mittlerweile mehr als nur eine zu referenzierende Bilddatei. Dabei müssen trotz hochauflösender Displays, die größere Bilder erfordern, Dateien aufgrund eingeschränkten Datenvolumens immer möglichst klein gehalten werden. Das ist kein leichtes Unterfangen. Der Clouddienst Cloudinary macht es jedoch zu einem. Heute erfährst du, wie einfach Bild- und Performanceoptimierung mit Cloudinary sein kann.

Bild- und Performanceoptimierung mit Cloudinary

Cloudbasierte Managementlösung für Bilder

Unter den vielen Clouddiensten hat sich Cloudinary auf die Bildverwaltung und -optimierung spezialisiert. Der Dienst ermöglicht es dir, Bilder hochzuladen und in unterschiedlichen Auflösungen, Bildformaten und -qualitäten in deine Website oder dein Blog einzubinden.

Außerdem fügst du zahlreiche Effekte wie Vignetten und Unschärfen hinzu und änderst Kontrast, Helligkeit und Sättigung on-the-fly. Dabei kannst du Bilder direkt über die Oberfläche von Cloudinary bearbeiten und anschließend über eine generierte URL in dein Webprojekt einbinden.

cloudinary_einstellungen
Umfangreiche Möglichkeiten, Bilder zu verändern und zu optimieren

Die URL enthält alle Angaben wie Bildauflösung und -format sowie etwaige Effekte, die du angewendet hast. Du kannst also auch direkt über die URL Anpassungen vornehmen.

http://res.cloudinary.com/demo/image/upload/c_fill,e_sepia,q_80,h_425,r_30,w_640/demo.jpg

Das Beispiel zeigt, wie die Bildeinstellungen per URL übergeben werden. „c_fill“ („c“ für „crop“) gibt an, dass das Bild so beschnitten werden soll, dass es immer den ganzen Bildbereich ausfüllt und gegebenenfalls Bereiche des Bildes beschnitten werden. „e_sepia“ („e“ für „effect“) sorgt für eine Sepiadarstellung des Bildes. Es gibt über 30 Effekte, die es ähnlich auch in Photoshop und anderen Bildbearbeitungsanwendungen gibt.

„q_80“ („q“ für „quality“) gibt die Bildqualität an und die Werte „h_425“ und „w_640“ („h“ für „height“ und „w“ für „width“) geben die Breite und Höhe des Bildes an.

cloudinary_beispiel1
Beispiel für ein manipuliertes Bild

Auf diese Weise erstellst du ganz ohne die Bedienoberfläche von Cloudinary entsprechende Bildversionen. Du kannst aber auch per PHP oder jQuery Bilder generieren.

$.cloudinary.image("demo.jpg", {effect: "sepia", height: 425, quality: 10, radius: 30, width: 640, crop: "fill"})

Das jQuery-Beispiel generiert dieselbe Bilddatei wie das Beispiel mit der URL. Wer lieber mit PHP arbeitet, für den gibt es eine entsprechende PHP-Klasse, die ganz ähnlich funktioniert wie das jQuery-Beispiel.

Pixeldichte berücksichtigen

Moderne Displays und Monitore verfügen über eine höhere Pixeldichte und können Bilder deutlich schärfer darstellen als gewöhnliche Monitore. Auch im modernen Webdesign lassen sich hochauflösende Bilder angeben. Hierzu wurde das „srcset“-Attribut eingefügt, mit dem du Bilder für verschiedene Pixeldichten hinterlegen kannst.

Bild- und Performanceoptimierung mit Cloudinary
Bild für unterschiedliche Pixeldichten

Da aktuelle Smartphones und Tablets in der Regel mit hochauflösenden Displays ausgestattet sind, ist es mehr als sinnvoll, entsprechende Bilddateien für hohe Pixeldichten auszugeben. Auch hier unterstützt dich Cloudinary, weil es dir ohne großen Aufwand für jedes Bild entsprechende Dateien in verschiedenen Pixeldichten ausgibt. Dazu wird einfach per „dpr_x“ eine Pixeldichte an die Bild-URL übergeben.

http://res.cloudinary.com/demo/image/upload/c_fill,h_640,w_425,dpr_2/demo.jpg

Im Beispiel wird ein Bild mit doppelter Pixeldichte ausgeben. Die eigentliche Auflösung des Bildes entspricht daher nicht 640 mal 425 Pixel, sondern 1280 mal 850 Pixel.

Im „<img>“-Element sollten die unterschiedlichen Bildversionen entsprechend per „srcset“ eingebunden werden.

<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
" />

Bild- und Performanceoptimierung mit Cloudinary: uneingeschränkte Responsivität

Wer beim Webdesign auf großformatige Bilder setzt, sollte auf kleineren Displays auch auf kleinere Bilddateien setzen, um unnötig große Dateien zu verhindern. Dank des „<picture>“-Elementes können verschiedene Bilddateien für unterschiedliche Auflösungen recht einfach eingebunden werden.

Mit Cloudinary erstellst du im Handumdrehen unterschiedliche Auflösungen für deine Bilder und bindest sie anschließend in deine Website ein.

Häufig werden Bilder jedoch nicht nur in festen Breiten dargestellt, sondern passen sich immer der Breite des Anzeigebereiches an. Zusammen mit jQuery kannst du immer ein passgenaues Bild für die jeweils dargestellte Größe deines Bildes ausgeben lassen.

Dazu rufst du eine Bilddatei zunächst per „data“-Attribut in einem „<img>“-Element auf, vergibst aber zusätzlich die Klasse „cld-respnsive“. Auf die Angabe einer Breite verzichtest du hierbei. Stattdessen wird „w_auto“ für eine automatische Breite übergeben.

<img data-src="http://res.cloudinary.com/demo/image/upload/w_auto/demo.jpg" class="cld-responsive">

Anschließend wird per jQuery ein Plugin geladen.

$.cloudinary.responsive();

Das Plugin sorgt dafür, dass immer eine Bilddatei für die aktuelle Darstellungsgröße des Bildes generiert wird. So kannst du beispielsweise mehrspaltige Galerien anlegen, die sich immer an die gesamte Breite des Browserfensters orientieren.

cloudinary_beispiel3
Bilder in Galerien immer passgenau ausgeben lassen

Wird ein Bild dabei beispielsweise mit 200 Pixel Breite angezeigt, werden die Bilder mit genau dieser Breite generiert und von Cloudinary ausgegeben. So verhinderst du, dass zu große Dateien eingebunden werden und machst deine Seite auf diese Weise schlanker und schneller.

Wer zusätzlich auch noch die Pixeldichte berücksichtigen möchte, gibt neben „w_auto“ für die automatische Breite zusätzlich „dpr_auto“ an, um auch die richtige Pixeldichte beim Generieren von Bilddateien zu berücksichtigen.

<img data-src="http://res.cloudinary.com/demo/image/upload/w_auto,dpr_auto/demo.jpg" class="cld-responsive">

Im Übrigen lädt Cloudinary auch beim Vergrößern oder Verkleinern des Browserfensters passende Bilder nach. Dabei werden standardmäßig Veränderungen der Browsergröße ab 10 Pixel berücksichtigt.

Bildqualität und -format

Die passgenaue Ausgabe von Bilddateien, ohne Bilder im Browser herunter skalieren zu müssen, ist schon einmal ein wichtiger Schritt für eine möglichst optimale und ressourcensparende Bilddarstellung. Aber es gibt noch zwei weitere wichtige Stellschrauben für kleine Dateigrößen.

Da ist zum einen das Bildformat. JPEG- und PNG-Dateien sind neben dem nach wie vor beliebten GIF die gängigsten Formate. Jedes hat seine Vorteile. JPEGs eignen sich vor allem für Fotos und großformatige Bilder und PNGs für Grafiken sowie für alles, was einen Alphakanal benötigt.

Je nach Browser stehen dir jedoch noch weitere Bildformate zur Verfügung. So unterstützt Google Chrome zum Beispiel das WebP-Format, welches deutlich kleinere Dateien erzeugt als das JPEG- und PNG-Format.

Auch Microsoft hat mit JPEG-XR ein eigenes Bildformat, welches mit einer deutlich besseren Komprimierung ausgestattet ist und nur im Internet Explorer ab Version 9 und Edge angezeigt wird. Mit Cloudinary musst du dir keine Gedanken über das richtige Dateiformat machen. Mit „f_auto“ überlässt du dem Dienst die Entscheidung darüber, welches Format das Beste ist.

http://res.cloudinary.com/demo/image/upload/f_auto/demo.jpg

Trotz der Dateiendung „jpg“ wird im Beispiel gegebenenfalls ein andere Format wiedergeben. Im Chrome wird das Bild dann beispielsweise als WebP ausgegeben, im Internet Explorer als JPEG-XR.

Zusätzlich zum Format kannst du auch die Qualität eines Bildes definieren. Dazu steht dir ein Wert zwischen 10 und 100 zur Verfügung (zum Beispiel „q_80“). Je nach Inhalt des Bildes ist mal eine stärkere Komprimierung möglich, mal eine geringere sinnvoll.

cloudinary_jpegmini
„JPEGmini“ für immer optimale Ergebnisse

Mit dem Plug-in „JPEGmini“, welches bei mehr als 100 Komprimierungen kostenpflichtig wird, werden die Bilder optimal komprimiert. Das Plug-in entscheidet also selbst, welche Komprimierung die Beste für jedes Bild ist. Ein manuelles Ausprobieren, welche Qualität sinnvoll ist, ist dann nicht notwendig.

Bild- und Performanceoptimierung mit Cloudinary: Fazit und Preise

Cloudinary ist ein umfangreicher Clouddienst, der dir bei der Optimierung von Bildern für das Web mehr als behilflich ist. Gerade wer ohne Content-Management-System arbeitet, wird in Cloudinary einen wertvollen Helfer finden, der automatisch Bilder komprimiert, beschneidet und in andere Formate bringt.

Zusätzliche Effekte, Texteinblendungen und Spielereien runden den Dienst ab. Außerdem ist sowohl das Generieren als auch das Laden von Bildern sehr schnell. Das ist ein wichtiger Aspekt – gerade bei Bildern.

Unterschiedliche Gerätetypen, Auflösungen und Pixeldichten machen es mittlerweile erforderlich, ein Bild in teils unüberschaubarer Anzahl unterschiedlicher Versionen anzulegen und auszugeben. Cloudinary leistet hier gute Arbeit und ist sehr einfach zu bedienen.

Dabei ist der Dienst für die meisten Websites kostenlos nutzbar. Denn wer bis zu 75.000 Bilder hostet und dabei maximal 7.500 Umwandlungen im Monat vornimmt, kann den Dienst kostenlos verwenden. 2 Gigabyte Speicher und 5 Gigabyte monatliche Bandbreite sind eingeschlossen.

Wer mehr benötigt, kann aus einem von vier Angeboten für 44 bis 224 Dollar im Monat wählen. Einschränkungen im Funktionsumfang gibt es bei keinem der Pläne.

Ein Hinweis zum Schluss: Der Beitrag wurde von Cloudinary gesponsort. Der Anbieter hat aber in keiner Weise Einfluss auf den Inhalt genommen.

(dpe)

Redaktion Dr. Web

Unter der Bezeichnung "Redaktion Dr. Web" findest du Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträge von Gastautoren sind hier zu finden. Beachte dann bitte die zusätzlichen Informationen zum Autor oder zur Autorin im Beitrag selbst.

5 Kommentare

  1. Schöner Bericht und sehr interessanter Cloud-Dienst, den ich bald mal testen werde. Das Problem mit den Bildern in einem Blog ist, dass man froh ist sie einfach mal komprimiert und richtig getitelt zu haben, was schon enorme Arbeit verursacht, aber dann sind sie in einem Dokument platziert, aber lassen sich nicht mehr global verwalten. Deshalb hört sich Cloudinary ziemlich cool an; nach meinem Softwaretest werde ich hier nochmal einen Kommentar schreiben. Grüße Iris

  2. Das klingt wirklich überzeugend einfach. Für mich ergeben sich aber noch ein paar Fragen: Wie sieht es mit Datenschutz und Urheberrecht aus? Räumt sich cloudinary ein Nutzungsrecht an den Fotos ein? Und kann man die bearbeiteten Fotos auf dem eigenen Server oder PC speichern?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.