Резервные варианты для видео/изображений

Резервные варианты для видео/изображений

От автора: 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.

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree