search

sparkbox / bouncy-ball

:red_circle: Compare web animation techniques by bouncing a ball with each one.
https://sparkbox.github.io/bouncy-ball
MIT License
605 stars 66 forks source link

Update <img> example to also use MP4? #58

Closed tigt closed 5 years ago

tigt commented 5 years ago

Safari recently allowed the use of .mp4 video in <img> and CSS images. With the <picture> source selection that bouncy-ball is already using, this could be as simple as:

<picture>
  <source srcset="image.mp4" type="video/mp4"> <!-- ✨ -->
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.apng" type="image/apng">
  <img src="image.gif" alt="Bouncy ball">
</picture>
tigt commented 5 years ago

While I’m here, I noticed that the APNG version is about 20 kB smaller than the WEBP one. Their <source>s should be swapped so that Firefox gets the smaller version, now that Firefox supports both WEBP and APNG.

bryanbraun commented 5 years ago

This was fixed in #59. Closing.