Matthias Scharwies: GIF - heute noch aktuell?

Vor wenigen Tagen starb Stephen E. Wilhite an Covid. Er wurde als Erfinder des GIF-Grafikformats berühmt. Das Graphics Interchange Format, kurz GIF ist ein Grafikformat für Bilder mit einer Farbpalette von max. 256 Farben, inkl. einer „Transparenzfarbe“. Es erlaubt eine verlustfreie Kompression der Bilder.

Besonders interessant: Es können mehrere (übereinanderliegende) Einzelbilder in einer Datei abgespeichert werden, die dann als Animationen interpretiert werden.

Zwischenzeitlich waren animated GIFs als Klickibunti verpönt. WhatsApp, Facebook (aka „Insta für alte Leute“) und Twitter haben ihnen eine Renaissance verschafft.

Alternativen heute

Im Webdesign ist gibt es heute mehrere Alternativen: Da Wilhite und seine Firma Compuserve den Lempel-Ziv-Welch-Algorithmus zur Komprimierung verwendeten, klagte der ursprüngliche Rechteinhaber Unisys auf Lizenzgebühren. [1] Deshalb wurde 1994 das rechtefreie PNG-Format entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard.

Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue WebP, das bereits von allen Brwosern unterstützt wird, sowie AVIF, die beide eine noch bessere Komprimierung aufweisen.

Andererseits werden heute viele Grafiken direkt in SVG erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit CSS animiert und verlustfrei und immer gestochen scharf skaliert werden. [2]

Barrierefreiheit

Grundlegendes Problem von animierten GIFs ist die mangelnde Steuerbarkeit durch den Benutzer. Während dies bei einer drehenden Erdkugel nur unbequem ist, vertragen manche Nutzer aus gesundheitlichen Gründen keine Animationen. Um hier auf Benutzerwünsche einzugehen, wurde die prefers-reduced-motion-Medienabfrage geschaffen. [3]

Eine solche Media Query kann im CSS, aber auch direkt im picture-Element verwendet werden:

<picture>
  <source srcset="CG_Heart.gif" 
          media="(prefers-reduced-motion: no-preference)">
  <img src="Heart-screenshot.png" 
       alt="Herz, Computergenerierter Querschnitt">
</picture>

In diesem Beispiel wird abgefragt, welche Nutzereinstellungen zu Animationen vorhanden sind. Falls keine Festlegung getroffen wurde, wird das animated GIF gezeigt. Falls der Wert reduce gesetzt wurde, wird ein statischer Screenshot gezeigt.

Noch besser wäre eine Einbindung als Film (siehe Datei als webm), da dieser dann vom Nutzer gestartet und beliebig gestoppt werden kann.

Im Netz gibt es weitere Vorschläge, dies auch durch Skripte zu realisieren. Auf dev.to habe ich einen Artikel gefunden, der zeigt, wie man das GIF aufsplittet, in WebP verwandelt und bei prefers-reduced-motion=reduce eben unbeweglich darstellt. Aber der Artikel selbst warnt vor einem Einsatz im wirklichen Leben! [4]

Andere schlagen vor mit canvas oder PHP einen Screenshot des GIFs zu machen und diesen dann wiederzugeben.

tl;dr:

Für komplexe Infografiken und Animationen sind entweder Videos oder SVGs empfehlenswert, die vom Benutzer gesteuert werden können.

Ist ein animated GIF bereits vorhanden, kann man mit einem Screenshot als fallback Nutzerwünsche berücksichtigen.


  1. Wikipedia: Graphics Interchange Format ↩︎

  2. Bei einem GIF wie hier sieht man das Problem. Die Rastergafik ist pixelig. Eine Änderung von Farbe, Geschwindigkeit, etc kann nur mit einem Grafik-Programm vorgenommen werden. ↩︎

  3. SELF-Blog: Multimedia- Wie viel ist zu viel? vom 01.08.2021 ↩︎

  4. dev.to Pausing GIF animations on dev.to for those who prefer-reduced-motion [hack 1] ↩︎

  1. @@Matthias Scharwies

    <picture>
      <source srcset="Heart-screenshot.png" 
              media="(prefers-reduced-motion: reduce)">
      <img src="CG_Heart.gif" 
           alt="Herz, Computergenerierter Querschnitt">
    </picture>
    

    Damit stellen alte Browser, die picture oder prefers-reduced-motion nicht verstehen, die animierte Variante dar. Besser dürfte es andersrum sein: das statische Bild als Grundlage, die Animation als progressive enhancement.

    <picture>
      <source srcset="CG_Heart.gif"
              media="(prefers-reduced-motion: no-preference)">
      <img src="Heart-screenshot.png"
           alt="Herz, Computergenerierter Querschnitt">
    </picture>
    

    🖖 Живіть довго і процвітайте

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
    1. Servus!

      @@Matthias Scharwies

      <picture>
        <source srcset="Heart-screenshot.png" 
                media="(prefers-reduced-motion: reduce)">
        <img src="CG_Heart.gif" 
             alt="Herz, Computergenerierter Querschnitt">
      </picture>
      

      Damit stellen alte Browser, die picture oder prefers-reduced-motion nicht verstehen, die animierte Variante dar. Besser dürfte es andersrum sein: das statische Bild als Grundlage, die Animation als progressive enhancement.

      <picture>
        <source srcset="CG_Heart.gif"
                media="(prefers-reduced-motion: no-preference)">
        <img src="Heart-screenshot.png"
             alt="Herz, Computergenerierter Querschnitt">
      </picture>
      

      🖖 Живіть довго і процвітайте

      coole Idee! Danke!

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  2. @@Matthias Scharwies

    "Heart-screenshot.png"

    Hm, dafür dürfte bei diesem Bild JPEG das bessere Grafikformat sein.

    🖖 Живіть довго і процвітайте

    --
    When the power of love overcomes the love of power the world will know peace.
    — Jimi Hendrix
    1. Servus!

      @@Matthias Scharwies

      "Heart-screenshot.png"

      Hm, dafür dürfte bei diesem Bild JPEG das bessere Grafikformat sein.

      Oder webp - dafür habe ich aber noch kein Grafikprogramm 😟

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. @@Matthias Scharwies

        Oder webp - dafür habe ich aber noch kein Grafikprogramm 😟

        Als Grundlage auch für alte Browser ist WebP vielleicht nicht die beste Wahl? 😏

        Dann müsste man das so machen:

        <picture>
          <source srcset="CG_Heart.gif" 
                  media="(prefers-reduced-motion: no-preference)">
          <source srcset="Heart-screenshot.webp" type="image/webp">
          <img src="Heart-screenshot.jpg"
               alt="Herz, Computergenerierter Querschnitt">
        </picture>
        

        🖖 Живіть довго і процвітайте

        --
        When the power of love overcomes the love of power the world will know peace.
        — Jimi Hendrix
      2. Hello,

        Hm, dafür dürfte bei diesem Bild JPEG das bessere Grafikformat sein.

        Oder webp - dafür habe ich aber noch kein Grafikprogramm 😟

        Genau das war eben mein erster Gedanke, warum sich alte Formate so lange halten. Man hat einfach noch kein neues Programm dafür, bzw. die alten (die die neuen Formate noch nicht kannten) haben andere wichtige Vorzüge, die man schätzen gelernt hat.

        Und neue Programme kosten (im Allgemeinen) jedesmal Geld.

        Im Sinne der Erhaltung von Dokumentationen sollten neue Browser und andere Programme aber auch in den nächsten 1000 Jahren GIF immer unterstützen, mindestens lesen können!

        Glück Auf
        Tom vom Berg

        --
        Es gibt nichts Gutes, außer man tut es!
        Das Leben selbst ist der Sinn.
        1. Oder webp - dafür habe ich aber noch kein Grafikprogramm 😟

          Genau das war eben mein erster Gedanke, warum sich alte Formate so lange halten. Man hat einfach noch kein neues Programm dafür, bzw. die alten (die die neuen Formate noch nicht kannten) haben andere wichtige Vorzüge, die man schätzen gelernt hat.

          Ich sehe da keinen Widerspruch. Man kann und sollte IMHO weiter seine PNG/JPG erzeugen und den Webserver sich drum kümmern lassen, das passende WebP zu erzeugen und auszuliefern. Zum einen gibt es noch IE11 und Nutzer älterer macOS-Versionen, die mit WebP nix anfangen können. Zum anderen wird es ja bei WebP nicht bleiben. AVIF ist ja noch doller und wird bereits vom Chrome unterstützt. Im FF aktuell noch nur via Config.

          Dann kommt das nächste dolle Format und die Sache wird sehr unübersichtlich. Es gibt da jeweils Accept-Header seitens des anfordernden Clients. Die sollte man auswerten und dem Server die restliche Arbeit überlassen.

        2. Im Sinne der Erhaltung von Dokumentationen sollten neue Browser und andere Programme aber auch in den nächsten 1000 Jahren GIF immer unterstützen, mindestens lesen können!

          Wegen mir soll und darf es in 1000 Jahren noch Wege geben, GIF auszulesen. Das sollte dann aber mit einem Konverter erledigt sein. Alle denkbaren Tools und Clients mit dem Code dazu aber auf ewig zu belasten? Das erscheint mir mehr als fragwürdig.

          1. GIF auszulesen. Das sollte dann aber mit einem Konverter erledigt sein.

            Denken wir das mal durch: Der Konverter müsste das Bild dekomprimieren und dann neu komprimieren.

            Resultat: Das gif-Bild wird dekomprimiert, neu komprimiert und dann dekomprimiert bevor es im Browser angezeigt wird.

            Effektiver wäre es, Putins Völkermord in der Ukraine direkt und ohne notlose Erderwärmung zu finanzieren.

            1. GIF auszulesen. Das sollte dann aber mit einem Konverter erledigt sein.

              Denken wir das mal durch: Der Konverter müsste das Bild dekomprimieren und dann neu komprimieren.

              Resultat: Das gif-Bild wird dekomprimiert, neu komprimiert und dann dekomprimiert bevor es im Browser angezeigt wird.

              Hab was vergessen. Das gif-Bild wird dekomprimiert, neu komprimiert und dann dekomprimiert. Auf diese Weise werden die Nachteile aller beteiligten Komprimierungsalgorithmen in idealer Weise vereinigt.

      3. Oder webp - dafür habe ich aber noch kein Grafikprogramm 😟

        Bist Du sicher? „Mein“ Gimp2 kann es.

        1. Hi,

          Oder webp - dafür habe ich aber noch kein Grafikprogramm 😟

          Bist Du sicher? „Mein“ Gimp2 kann es.

          Zumindest für Basis-Verarbeitung (Ausschnitt, Größenänderung, Farb-Anpassungen usw.) unter Windows: IrfanView.

          cu,
          Andreas a/k/a MudGuard