От автора: Safari 11.1 представил странную, но очень полезную функцию, которая даёт возможность использовать источник видеоинформации в тэге img. Идея заключается в том, что он проделывает ту же работу, что и GIF (повторяющееся автопроигрывание), но с повышенной производительностью. Насколько повышенной? «в 20 раз быстрее и декодирование происходит в 7 раз быстрее, чем в GIF», — говорит Колин Бэнделл.
Но это поддерживают не все браузеры, так что для того, чтобы сделать резервный вариант, нужен элемент picture. Брюс Лоусон демонстрирует, насколько легко это сделать:
<picture> <source type="video/mp4" srcset="adorable-cat.mp4"> <!-- perhaps even an animated WebP fallback here as well --> <img src="adorable-cat.gif" alt="adorable cat tears throat out of owner and eats his eyeballs"> </picture>
Симе Видас напоминает, что нужно обеспечить более широкую поддержку браузеров, используя тэг video.
<video src="https://media.giphy.com/media/klIaoXlnH9TMY/giphy.mp4" muted autoplay loop playsinline></video>
Но, как заметил Бэнделл, преимущества производительности не связаны с видео, фактически, прелоадер не получает видео. Грустно, но video на данном этапе это всё, что мы можем, поскольку:
в Safari есть этот отвратительный баг с WebKit, который стал причиной того, что прелоадер загружает первый source, независимо от mimetype объявления. Основной загрузчик DOM находит ошибку и выбирает нужный элемент. Однако, потери уже неизбежны. Прелоадер растрачивает свои возможности раньше загрузки изображения и, плюс ко всему, загружает некорректную версию, проматывая байты. Хорошая новость заключается в том, что я исправил этот баг, и он должен пропасть в Safari TP 45.
Короче говоря, использование picture и source type для mime-type выбора не рекомендуется до тех пор, пока следующей версией Safari не начнут пользоваться 90%+ пользователей. Но всё же, это вам пригодится.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.