Никогда бы не подумала, что видео будет занимать меньше места чем гифка. На практике же оказалось, что исходная гифка занимает 1.2 Мегабайта, та же гифка, но с уменьшенным, до 1200 пикселей по ширине, разрешением, весит уже 936 Килобайт, а оригинальная гифка, преобразованная в WebM — 527 Килобайт. В итоге мы имеем экономию в 2,33 раза, не потеряв в качестве!
Заставить WebM отображаться как Gif — не сложно. Достаточно вставить нашу WebM таким образом:
<video style="pointer-events: none;" src="расположение файла" autoplay="autoplay" loop="loop" controls="none"></video>Правда, способ не идеален. В Internet Explorer, данный метод не заработает и вместо видео, пользователь увидит ошибку.
Также у меня странно повела себя опера, хотя подобного с ней случаться не должно.
Зато в нормальных браузерах, видео будет неотличимо от GIF анимации, что позволит сэкономить целую кучу трафика.
Кстати говоря, вот вам наглядный пример. Попробуйте определить, где здесь видео, а где гифка, только без читерства 🤡
