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

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

От автора: Safari 11.1 представил странную, но очень полезную функцию, которая даёт возможность использовать источник видеоинформации в тэге img. Идея заключается в том, что он проделывает ту же работу, что и GIF (повторяющееся автопроигрывание), но с повышенной производительностью. Насколько повышенной? «в 20 раз быстрее и декодирование происходит в 7 раз быстрее, чем в GIF», — говорит Колин Бэнделл.

Но это поддерживают не все браузеры, так что для того, чтобы сделать резервный вариант, нужен элемент picture. Брюс Лоусон демонстрирует, насколько легко это сделать:

Симе Видас напоминает, что нужно обеспечить более широкую поддержку браузеров, используя тэг 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree