Ein animiertes GIF von drei Sekunden wiegt schnell 3 MB. Dieselbe Sequenz als modernes Video liegt oft unter 200 KB. Das Format stammt aus dem Jahr 1989, kennt maximal 256 Farben und keine der Kompressionsverfahren, die Videocodecs seit Jahrzehnten selbstverständlich nutzen. Trotzdem ist das Datenvolumen beim GIF noch nicht einmal der teuerste Posten. Übertragung fällt einmal an. Das Rendern einer Animation läuft auf jedem Gerät, bei jedem Aufruf, so lange jemand hinsieht. Sustainable Web Design bewertet die Umweltwirkung dieser Guideline deshalb in allen Kategorien als hoch, und das ist im gesamten Kapitel zur Nutzererfahrung die Ausnahme.
Die vier Erfolgskriterien von Guideline 2.10
Bedarf an Animation: Setze Animation nur ein, wenn sie die Nutzererfahrung unterstützt oder Nutzern hilft, Inhalte oder Aktionen zu verstehen.
Überlastung vermeiden: Begrenze Anzahl und Häufigkeit von Animationen, um Ablenkung zu verringern, den Ressourcenverbrauch zu minimieren und die erwartete Geräteleistung zu erhalten. Lege eine maximale Anzahl von Wiederholungen fest.
Animation steuern: Lass Nutzer animierte und bewegte Inhalte starten, pausieren, stoppen oder anderweitig steuern.
Effiziente Animation: Halte interaktive und animierte Inhalte so leichtgewichtig wie möglich. Senke die Rendering-Kosten, indem Du Formate, Längen, Komplexität, Abmessungen, Qualität, Werkzeuge und Umsetzungsweise berücksichtigst. Wo mehrere Ansätze zur Verfügung stehen, wähle die nativen Animationsfähigkeiten von Browser oder Plattform und minimiere Arbeiten, die den Haupt-Thread belasten oder Layout-Berechnungen auslösen.
Meine Einordnung
Ich mache grundsätzlich keine Animationen. Nicht aus Prinzipienreiterei, sondern weil ich bei fast jeder, die ich in Projekten sehe, dieselbe Antwort auf die Frage nach dem Zweck bekomme: Es wirkt moderner. Das ist genau der Fall, den das erste Kriterium ausschließt. Bewegung zieht Aufmerksamkeit unwillkürlich an, das ist neurologisch angelegt und nicht abschaltbar. Wer etwas bewegt, das nichts erklärt, konkurriert mit dem eigenen Inhalt.
Zum GIF eine Beobachtung, die viele überrascht: Was auf Social-Media-Plattformen als GIF angeboten wird, ist technisch längst meist ein Video. Die Plattformen wandeln hochgeladene GIFs im Hintergrund um, weil sie sich die Bandbreite nicht leisten wollen. Das Etikett ist geblieben, das Format darunter nicht. Auch Googles Doodles sind heute in der Regel keine GIFs mehr, sondern CSS- oder JavaScript-Animationen. Wer also mit dem Verweis auf die großen Anbieter animierte GIFs verteidigt, argumentiert mit einer Praxis, die es dort so gar nicht mehr gibt.
Das vierte Kriterium ist neu und technisch das interessanteste. Es unterscheidet implizit zwischen billiger und teurer Bewegung. Animierst Du transform oder opacity, kann der Browser die Arbeit weitgehend an den Compositor abgeben. Animierst Du dagegen Breite, Höhe oder Position, muss er für jedes einzelne Bild das Layout neu berechnen und neu zeichnen. Dieselbe sichtbare Bewegung kostet je nach Umsetzung ein Vielfaches an Rechenzeit, und Rechenzeit auf Millionen fremder Geräte ist genau die Art Verbrauch, die in keiner Serverstatistik auftaucht.
Wo ich weiter gehe
Die verbreitete Empfehlung lautet, animierte GIFs durch automatisch abspielende Videos zu ersetzen. Das halte ich für eine halbe Lösung.
Meine Reihenfolge sieht deshalb so aus: Braucht es überhaupt Bewegung? Wenn ja, reicht ein Standbild mit Beschriftung? Wenn nein, gehört die Bewegung hinter einen Klick. Und wenn sie doch automatisch laufen muss, dann kurz, mit begrenzter Wiederholungszahl und ausschließlich über transform und opacity.
Es gibt Ausnahmen, und die will ich nicht kleinreden. Ein Ladeindikator, der Fortschritt zeigt, erklärt etwas, das ein Standbild nicht erklären kann. Ein Zustandswechsel, der sichtbar macht, dass ein Klick angekommen ist, verhindert einen zweiten Klick und damit einen zweiten Serveraufruf. Solche Animationen dauern Millisekunden und sparen unter dem Strich Ressourcen. Alles, was länger läuft als die Handlung, die es begleitet, ist Dekoration.
Und es gibt eine Einstellung im Betriebssystem, die Dir die Entscheidung teilweise abnimmt. Wer „Bewegung reduzieren“ aktiviert hat, teilt Dir das mit. Diesen Wunsch zu ignorieren ist kein Geschmacksfehler, sondern ein Zugänglichkeitsfehler.
Dein erster Schritt heute
Zwei Dinge, beide in unter zwanzig Minuten erledigt.
Nimm diesen Block in Dein Stylesheet auf, dann respektiert Deine Seite die Systemeinstellung Deiner Besucher:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
Durchsuche anschließend Dein Projektverzeichnis nach Dateien mit der Endung .gif. Jede einzelne ist ein Kandidat: entweder als Standbild ersetzen oder in ein modernes Videoformat wandeln.
Wenn Du danach noch etwas tun willst: Schau Dir Deine Startseite an und zähle, wie viele Elemente sich bewegen, ohne dass Du etwas anklickst. Jede Zahl über null verlangt eine Begründung.
Eine Animation muss etwas erklären, das ein Standbild nicht erklären kann. Alles andere ist Rechenzeit auf fremden Geräten.
Quelle: W3C-Fassung von Guideline 2.10