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