Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Bilder & Vektorgrafiken bearbeiten » Animierte GIFs richtig erstellen – mit Cloudinary

Animierte GIFs richtig erstellen – mit Cloudinary

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 5 Minuten
  • von Denis Potschien
  • 27. August 2016
Bookmarke mich
Share on pocket

NETZhelfer GmbH

SEO-Sicht

Webtronix Media GmbH

Carmen Hurst | Webdesign

Wee Media | Webdesign Agentur

Dunkel Design | Webdesign Grafikdesign Logodesign

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
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
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
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
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
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)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

Trendmarke GmbH

Stuttgart

SEOfolgreich – Local SEO Agentur München

München

SEO-Sicht

Berlin

Evergreen Media

Innsbruck

design andrea becker

Frankfurt am Main

Alle Agenturpartner

Jobs

Google Ads Kampagnen­betreuer

Salzburg

Frontend-Entwickler Angular, React

Bonn

Texter / Junior Content Marketing Manager

Innsbruck

Assistent/in der Geschäfts­führung

Innsbruck

Junior Online Marketing Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign: Die Basics guter Informations­architektur

Lineare Informationsarchitektur bezeichnet eine Konstruktion, in der es stets nur einen vordefinierten Weg zum Ziel gibt. Nutzer in linearen Systemen arbeiten Aufgaben entlang der vorgegebenen Pfade ab und können nur so und nicht anders zum Ziel zu gelangen. Diese Vorgehensweise ist aus Sicht des Designers nicht uninteressant.

 →   

Webdesign-Agentur gründen: 10 Tipps, wie der Start gelingt

Eine Webdesign-Agentur zu gründen ist keine einfache Aufgabe, denn du musst eine ganze Reihe Fähigkeiten mitbringen, um erfolgreich im harten Markt bestehen zu können.

 →   

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.