Zwischenzeitlich waren *animated GIFs* als Klickibunti verpönt. WhatsApp, Facebook (aka *„Insta für alte Leute“*) und Twitter haben ihnen eine Renaissance verschafft. <h2 id="alternativen">Alternativen heute</h2> 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten) entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard. [^1]: Wikipedia: [Graphics Interchange Format](https://de.wikipedia.org/wiki/Graphics_Interchange_Format) Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue [**WebP**](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials) erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit [CSS animiert](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren) und verlustfrei und immer gestochen scharf skaliert werden. [^2] [^2]: [](/images/4ad1d258-acd7-11ec-bde6-b42e9947ef30.gif)Bei einem GIF wie [hier](https://wiki.selfhtml.org/wiki/Datei:Wait.gif) sieht man das Problem. Die Rastergafik ist pixelig. Eine Änderung von Farbe, Geschwindigkeit, etc kann nur mit einem Grafik-Programm vorgenommen werden. <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> 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] [^3]: SELF-Blog: [Multimedia- Wie viel ist zu viel?](https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel) vom 01.08.2021 Eine solche Media Query kann im CSS, aber auch direkt im [picture](https://wiki.selfhtml.org/wiki/HTML/Elemente/picture)-Element verwendet werden: ~~~ HTML <picture> <source srcset="CG_Heart.gif" media="(prefers-reduced-motion: no-preference)"> <img src="Heart-screenshot.png" alt="Herz, Computergenerierter Querschnitt"> </picture> ~~~ <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html" width="800" height="420"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html</a> </p> </iframe> 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](https://upload.wikimedia.org/wikipedia/commons/3/3f/CG_heart_90fps.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] [^4]: dev.to [Pausing GIF animations on dev.to for those who `prefer-reduced-motion` [hack 1] ](https://dev.to/inhuofficial/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg) 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.

Zwischenzeitlich waren *animated GIFs* als Klickibunti verpönt. WhatsApp, Facebook (aka *„Insta für alte Leute“*) und Twitter haben ihnen eine Renaissance verschafft. <h2 id="alternativen">Alternativen heute</h2> 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten) entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard. [^1]: Wikipedia: [Graphics Interchange Format](https://de.wikipedia.org/wiki/Graphics_Interchange_Format) Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue [**WebP**](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials) erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit [CSS animiert](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren) und verlustfrei und immer gestochen scharf skaliert werden. <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> 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. [^2] [^2]: SELF-Blog: [Multimedia- Wie viel ist zu viel?](https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel) vom 01.08.2021 Eine solche Media Query kann im CSS, aber auch direkt im [picture](https://wiki.selfhtml.org/wiki/HTML/Elemente/picture)-Element verwendet werden: ~~~ HTML <picture> <source srcset="CG_Heart.gif" media="(prefers-reduced-motion: no-preference)"> <img src="Heart-screenshot.png" alt="Herz, Computergenerierter Querschnitt"> </picture> ~~~ <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html" width="800" height="420"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html</a> </p> </iframe> 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](https://upload.wikimedia.org/wikipedia/commons/3/3f/CG_heart_90fps.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! [^3] [^3]: dev.to [Pausing GIF animations on dev.to for those who `prefer-reduced-motion` [hack 1] ](https://dev.to/inhuofficial/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg) 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.

Zwischenzeitlich waren *animated GIFs* als Klickibunti verpönt. WhatsApp, Facebook (aka *„Insta für alte Leute“*) und Twitter haben ihnen eine Renaissance verschafft. <h2 id="alternativen">Alternativen heute</h2> 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten) entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard. [^1]: Wikipedia: [Graphics Interchange Format](https://de.wikipedia.org/wiki/Graphics_Interchange_Format) Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue [**WebP**](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials) erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit [CSS animiert](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren) und verlustfrei und immer gestochen scharf skaliert werden. <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> 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. [^2] [^2]: SELF-Blog: [Multimedia- Wie viel ist zu viel?](https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel) vom 01.08.2021 Eine solche Media Query kann im CSS, aber auch direkt im picture-Element verwendet werden: ~~~ HTML <picture> <source srcset="CG_Heart.gif" media="(prefers-reduced-motion: no-preference)"> <img src="Heart-screenshot.png" alt="Computergenerierter Querschnitt eines 3D-Modell des Herzen"> </picture> ~~~ <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html" width="800" height="420"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html</a> </p> </iframe> 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](https://upload.wikimedia.org/wikipedia/commons/3/3f/CG_heart_90fps.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! [^3] [^3]: dev.to [Pausing GIF animations on dev.to for those who `prefer-reduced-motion` [hack 1] ](https://dev.to/inhuofficial/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg) 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.

Zwischenzeitlich waren *animated GIFs* als Klickibunti verpönt. WhatsApp, Facebook (aka *„Insta für alte Leute“*) und Twitter haben ihnen eine Renaissance verschafft. <h2 id="alternativen">Alternativen heute</h2> 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten) entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard. [^1]: Wikipedia: [Graphics Interchange Format](https://de.wikipedia.org/wiki/Graphics_Interchange_Format) Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue [**WebP**](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials) erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit [CSS animiert](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren) und verlustfrei und immer gestochen scharf skaliert werden. <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> 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. [^2] [^2]: SELF-Blog: [Multimedia- Wie viel ist zu viel?](https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel) vom 01.08.2021 Eine solche Media Query kann im CSS, aber auch direkt im picture-Element verwendet werden: ~~~ HTML <picture> <source srcset="Heart-screenshot.png" media="(prefers-reduced-motion: reduce)"> <img src="CG_Heart.gif" alt="Herz, Computergenerierter Querschnitt"> </picture> ~~~ <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html" width="800" height="420"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html</a> </p> </iframe> In diesem Beispiel wird abgefragt, ob der Nutzer Animationen wünscht. Falls nicht, wird ein statischer Screenshot gezeigt. Noch besser wäre eine Einbindung als Film (siehe [Datei als webm](https://upload.wikimedia.org/wikipedia/commons/3/3f/CG_heart_90fps.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! [^3] [^3]: dev.to [Pausing GIF animations on dev.to for those who `prefer-reduced-motion` [hack 1] ](https://dev.to/inhuofficial/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg) 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.

Zwischenzeitlich waren *animated GIFs* als Klickibunti verpönt. WhatsApp, Facebook (aka *„Insta für alte Leute“*) und Twitter haben ihnen eine Renaissance verschafft. <h2 id="alternativen">Alternativen heute</h2> 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten) entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard. [^1]: Wikipedia: [Graphics Interchange Format](https://de.wikipedia.org/wiki/Graphics_Interchange_Format) Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue [**WebP**](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials) erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit [CSS animiert](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren) und verlustfrei und immer gestochen scharf skaliert werden. <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> 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. [^2] [^2]: SELF-Blog: [Multimedia- Wie viel ist zu viel?](https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel) vom 01.08.2021 Eine solche Media Query kann im CSS, aber auch direkt im picture-Element verwendet werden: ~~~ HTML <picture> <source srcset="Heart-screenshot.png" media="(prefers-reduced-motion: reduce)"> <img src="CG_Heart.gif" alt="Herz, Computergenerierter Querschnitt"> </picture> ~~~ <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html" width="800" height="700"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-picture-prefers-reduced-motion.html</a> </p> </iframe> Auf dev.to habe ich ein JavaScript gefunden, das gif aufsplittet, in WebP verwandelt und bei prefers-reduced-motion das eben unbeweglich darstellt. Aber selbst der Artikel warnt vor einem Einsatz! [^3] [^3]: dev.to [Pausing GIF animations on dev.to for those who `prefer-reduced-motion` [hack 1] ](https://dev.to/inhuofficial/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg) Andere machen einen Screenshot des gifs und geben den wieder. **Fazit**: Für

Zwischenzeitlich waren *animated GIFs* als Klickibunti verpönt. WhatsApp, Facebook (aka *„Insta für alte Leute“*) und Twitter haben ihnen eine Renaissance verschafft. <h2 id="alternativen">Alternativen heute</h2> 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten) entwickelt, das ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard. [^1]: Wikipedia: [Graphics Interchange Format](https://de.wikipedia.org/wiki/Graphics_Interchange_Format) Mittlerweile gibt es neben GIF, JPEG und PNG noch das neue [**WebP**](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials) erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit [CSS animiert](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren) und verlustfrei und immer gestochen scharf skaliert werden. <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> 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. [^2] [^2]: SELF-Blog: [Multimedia- Wie viel ist zu viel?](https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel) vom 01.08.2021 Auf dev.to habe ich ein JavaScript gefunden, das gif aufsplittet, in WebP verwandelt und bei prefers-reduced-motion das eben unbeweglich darstellt. Aber selbst der Artikel warnt vor einem Einsatz! [^3] [^3]: dev.to [Pausing GIF animations on dev.to for those who `prefer-reduced-motion` [hack 1] ](https://dev.to/inhuofficial/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg) Andere machen einen Screenshot des gifs und geben den wieder. **Fazit**: Für

Zwischenzeitlich waren *animated GIFs* als Klickibunti verpönt. WhatsApp, Facebook (aka *„Insta für alte Leute“*) und Twitter haben ihnen eine Renaissance verschafft. <h2 id="alternativen">Alternativen heute</h2> 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](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten) entwickelt, dass ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard. [^1]: Wikipedia: [Graphics Interchange Format](https://de.wikipedia.org/wiki/Graphics_Interchange_Format) Mittlerwiele gibt es neben GIF, JPEG und PNG noch das neue [**WebP**](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#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**](https://wiki.selfhtml.org/wiki/SVG/Tutorials) erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit [CSS animiert](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren) und verlustfrei und immer gestochen scharf skaliert werden. <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> 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. [^2] [^2]: SELF-Blog: [Multimedia- Wie viel ist zu viel?](https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel) vom 01.08.2021 Ich würde eben zeigen wie man mehrfache Bildquellen einbindet, aber evtl. auch eine CSS-Animation, gerade vom Loading Spinner. Auf dev.to habe ich ein JavaScript gefunden, das gif aufsplittet, in WebP verwandelt und bei prefers-reduced-motiondas eben unbeweglich darstellt. Aber selbst der Artikel warnt vor einem Einsatz! 😀 Andere machen einen Screenshot des gifs und geben den wieder. Ich würde das gerne als Aufhänger für einen Blog-Artikel nehmen, der dann auf WebP und Avif überleitet. Mit <img srcset="" alt=""> und <picture> kann man ja auch Fallbacks für ältere Browser anbieten.

Zwischenzeitlich waren *animated GIFs* als Klickibunti verpönt. WhatsApp, Facebook (aka *„Insta für alte Leute“*) und Twitter haben ihnen eine Renaissance verschafft. <h2 id="alternativen">Alternativen heute</h2> 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. Deshalb wurde 1994 das rechtefreie [**PNG**-Format](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen#PNG_-_Grafiken_mit_Texten) entwickelt, dass ebenfalls Transparenzen, aber keine Animationen erlaubt. Für Rastergrafiken mit Text ist es heute der Standard. Andererseits werden heute viele Grafiken [direkt in **SVG**](https://wiki.selfhtml.org/wiki/SVG/Tutorials) erstellt. Text in SVG kann von Suchmaschinen und Screenreadern gelesen und mit CSS gestaltet werden. Objekte in SVG können mit [CSS animiert](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/SVG_mit_CSS_animieren) und verlustfrei und immer gestochen scharf skaliert werden. <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html" width="800" height="300"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-CSS-animation-3.html</a> </p> </iframe> <h2 id="barrierefrei">Barrierefreiheit</h2> 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. [^1] [^1]: SELF-Blog: [Multimedia- Wie viel ist zu viel?](https://blog.selfhtml.org/2021/aug/01/multimedia-wie-viel-ist-zu-viel) vom 01.08.2021 Ich würde eben zeigen wie man mehrfache Bildquellen einbindet, aber evtl. auch eine CSS-Animation, gerade vom Loading Spinner. Auf dev.to habe ich ein JavaScript gefunden, das gif aufsplittet, in WebP verwandelt und bei prefers-reduced-motiondas eben unbeweglich darstellt. Aber selbst der Artikel warnt vor einem Einsatz! 😀 Andere machen einen Screenshot des gifs und geben den wieder. Ich würde das gerne als Aufhänger für einen Blog-Artikel nehmen, der dann auf WebP und Avif überleitet. Mit <img srcset="" alt=""> und <picture> kann man ja auch Fallbacks für ältere Browser anbieten.