Animierte GIFs richtig erstellen – mit Cloudinary

Trotz HTML5-Video und CSS- sowie JavaScript-Animationsmöglichkeiten erfreut sich das animierte GIF nach wie vor großer Beliebtheit. Vor allem kurze Videosequenzen werden sehr häufig im GIF-Format erstellt und in sozialen Netzwerken geteilt. Mit dem Bilder-Clouddienst Cloudinary erstellst du animierte GIFs im Handumdrehen selbst. Dabei hilft dir Cloudinary, GIFs zu optimieren und auch in Videoformate zur konvertieren.

Optimale Dateigröße und Bildqualität

Da sich das GIF-Format auf maximal 256 Farben beschränkt, ist es für fotografische Inhalte eigentlich nur bedingt geeignet. Dazu kommt, dass das GIF-Format – vor allem, wenn es Animationen enthält –, schnell zu recht großen Dateigrößen führt. Wer also eine Videosequenz in ein animiertes GIF umwandelt, muss immer zwischen Videoqualität und Dateigröße abwägen.

Cloudinary bietet dir für animierte GIFs eine einfache Kompression an, die du ganz einfach über die Bild-URL auf beliebige dort gehostete GIF-Dateien anwenden kannst. Auch wenn es es sich dabei um eine verlustbehaftete Kompression handelt, bleiben – wie bei Cloudinary üblich – die Originaldateien unberührt. Stattdessen wird on-the-fly eine entsprechend optimierte Version angefertigt.

http://res.cloudinary.com/demo/image/upload/fl_lossy/bild.gif

Um die Kompression anzuwenden, gibst du in der URL des Bildes einfach „fl_lossy“ mit an und du erhältst eine entsprechend auf Bildqualität und Dateigröße optimierte Version deiner GIF-Animation.

Nicht komprimiertes und komprimiertes animiertes GIF

Zwischen unkomprimierten und per „fl_lossy“ optimiertem GIF sparst du je nach Animation bis zu 40 Prozent der Dateigröße. Da es sich um eine verlustbehaftete Kompression handelt, wirst du auch einen mehr oder wenigen deutlichen Unterschied in der Bildqualität erkennen. Aber insgesamt kann sich das Ergebnis sehr gut sehen lassen.

Drei Kompressionsstufen: 25, 50 und 75 Prozent

Mit dem zusätzlichen Parameter „q“ hast du zudem noch die Möglichkeit, die Qualität des GIFs und somit die Dateigröße zu beeinflussen. Je höher der Wert für „q“ ist, desto besser ist die Bildqualität. Erlaubt sind Werte zwischen 0 und 100, wobei der Wert von 100 der besten Qualität entspricht – wenngleich diese nicht ganz an die Qualität eines nicht komprimierten Bildes ran kommt.

Animierte GIFs manipulieren

Wer Cloudinary kennt, weiß, dass der Dienst zahlreiche Möglichkeiten zur Verfügung stellt, um Bilder zu manipulieren. So beschneidest und skalierst du Bilder und fügst ihnen diverse Filter hinzu, um Bildern beispielsweise eine Unschärfe mitzugeben.

Du kannst all diese Möglichkeiten auch bei animierten GIFs anwenden. So wendest du beispielsweise den Unschärfefilter „e_blur“ auf ein animiertes GIF an. Der Effekt wirkt sich auf die gesamte Animation aus. Das Erstellen der entsprechenden Datei dauert möglicherweise etwas länger, als man es sonst von Cloudinary gewöhnt ist.

http://res.cloudinary.com/demo/image/upload/e_blur:300/bild.gif

Aber dafür hast du eine sehr einfache und vergleichsweise schnelle Möglichkeit, Animationen zu skalieren und mit diversen Effekten zu versehen.

GIF mit und ohne Unschärfe

Speziell für Animationen gibt es zwei zusätzliche Features. So erlaubt dir der Parameter „pg“ (steht für „page“) die Darstellung eines bestimmten Frames aus der Animation.

http://res.cloudinary.com/demo/image/upload/pg_8/bild.gif

Im Beispiel wird also der achte Frame einer Animation als Einzelbild ausgegeben. Der Parameter „dl“ steht für „delay“ und gibt dir die Möglichkeit, eine Verzögerung zwischen den Frames der Animation einzurichten.

http://res.cloudinary.com/demo/image/upload/dl_200/bild.gif

Im Beispiel wird zwischen jedem Einzelbild eine kurze Verzögerung von 200 Millisekunden hinzugefügt. So realisierst du die Wiedergabe mit Zeitlupeneffekt.

Animierte GIFs in Videoformate konvertieren – und umgekehrt

Falls du deine GIF-Animationen doch einmal in einem Videoformat benötigst, hat Cloudinary hierfür eine schnelle Lösung für dich. So musst du schlicht und einfach die Dateiendung von „.gif“ auf „.mp4“ ändern und schon wird deine Animation als HTML5-Video im MP4-Format ausgegeben.

Auch hierbei hast du natürlich die Möglichkeit, andere Parameter zur Manipulation von Bildern hinzuzufügen. Diese werden bei den modernen Videoformaten ebenfalls berücksichtigt.

Animation als HTML5-Video

Gerade bei der Konvertierung in „echte“ Videoformate wird schnell die Schwäche animierter GIFs deutlich – nämlich die Dateigröße. Ins MP4-Format konvertierte GIFs besitzen nur einen Bruchteil der Dateigröße animierter GIFs. Gerade bei Videosequenzen wird dieser Unterschied sehr deutlich.

Cloudinary unterstützt zudem das WebM-Format. Die Konvertierung funktioniert ebenso einfach, indem du als Dateiendung einfach „.webm“ angibst.

Da die Browser bei der Unterstützung von HTML5-Videos nach wie vor unterschiedliche Formate unterstützen, solltest du deine Videos immer im MP4- und WebM-Format einbinden. Dank Cloudinary sind beide Formate im Handumdrehen erstellt.

Natürlich ist mit Cloudinary ebenso der umgekehrte Weg möglich. Hast du beispielsweise ein MP4-Video, konvertierst du dieses ins animierte GIF-Format. Auch die verlustbehaftete Komprimierung wendest du an.

Animierte GIFs aus Einzeldateien erstellen

Mit Cloudinary gelingt es nicht nur, aus einer Videosequenz ein animiertes GIF zu erstellen. Du kannst überdies aus einer Vielzahl von Einzelbildern ein animiertes GIF generieren.

Dazu lädst du einfach alle Bilder, die zu einer GIF-Animation zusammengeführt werden sollen, bei Cloudinary hoch und vergibst ihnen denselben Tag. Anhand des Tags wird ermittelt, welche Dateien zum animierten GIF hinzugefügt werden sollen.

Hochgeladene Datei mit vergebenem Tag

Anschließend ist es mit der Cloudinary-API möglich, alle Bilder mit demselben Tag zu einer Animation zusammenzuführen. Es wird unter anderem eine PHP-Bibliothek angeboten, mit der du sehr unkompliziert eine solche Animation erstellst.

$ergebnis = \Cloudinary\Uploader::multi("animation");

Im Beispiel wird per PHP auf die Cloudinary-API zugegriffen und aus allen Bildern mit dem Tag „animation“ ein animiertes GIF erstellt. Dieses ist anschließend abrufbar.

http://res.cloudinary.com/demo/image/multi/animation.gif

Wichtig ist, dass der Dateiname aus dem Tag, also „animation“ besteht und davor der Parameter „multi“ gesetzt ist. Wer sich ein wenig mit der API vertraut macht, erstellt auch komplexere Animationen. So kannst du Bilder übereinander legen und durchs Bild animieren lassen.

Fazit

Wer schon mal mit Photoshop oder anderen Programmen GIF-Animationen erstellt hat, weiß um die Besonderheiten des Formates und die Schwierigkeiten gerade im Umgang mit Videosequenzen. Cloudinary zeigt mit seinem Clouddienst sehr eindrucksvoll, wie einfach sich on-the-fly animierte GIFs erstellen, manipulieren und in andere Formate umwandeln lassen.

Wer Cloudinary noch nicht kennt, sollte einen Blick auf den Dienst werfen, der nicht nur blitzschnell ist, sondern eine Vielzahl an Features zur Manipulation und Wiedergabe von Bildern und Videos anbietet.

(dpe)