Как сделать фон в сайте html: Как сделать фон в html: порядок действий

Лучшие практики для оптимизации фонового видео HTML

Вы видели их повсюду: большие полноразмерные фоновые видео на веб-сайтах. Обычно расположенные в верхней части страницы, они привносят жизнь и движение в то, что в противном случае могло бы быть еще одним скучным ценностным предложением. Нельзя отрицать, что хорошо сделанное фоновое видео действительно может задать тон вашему веб-сайту и добавить эффект вашей странице и сообщению. Проблема в том, что эти видео могут быть большими и ухудшать работу пользователей, если они не оптимизированы должным образом.

В этом посте я расскажу об основных моментах, которые необходимо знать при создании фонового видео для веб-сайта.

Короткое фоновое видео

Никто не будет сидеть и смотреть 60-секундное фоновое видео. Не льсти себе. Ваша команда обедает, ваш офис, люди разбрасывают стикеры туда и сюда — вспышка новостей: ваш пользователь, вероятно, уже прочитал ваше ценностное предложение и либо хотел продолжить прокрутку, либо щелкнул дальше, либо закрыл вкладку.

Помните, что это фоновое видео, а не продукт или обучающее видео. Видео не должно быть длиннее 15 или 20 секунд. Клип меньшей продолжительности сохраняет разумный размер и может начать потоковую передачу быстрее. Если вам нужно показать 60-секундный контент, возможно, вам нужно настоящее рекламное или маркетинговое видео!

Уменьшить движение и скорость

Вы не хотите, чтобы посетитель чувствовал головокружение при посещении вашего сайта, если есть быстрое движение. Кроме того, на видео может быть текст или ссылка с призывом к действию, а большое количество движений затруднит просмотр и взаимодействие с ним.

Оптимизация видеофайла

Здесь нужно сделать три основных действия:

1) Сохранить размеры Standard HD

Ваше видео может быть HD (высокой четкости), то есть видео 720p (1280 x 720 пикселей). На самом деле нет причин экспортировать фоновое видео в формате Full HD (1920 x 1080) — это просто излишество и потеря пропускной способности.

2) Низкая частота кадров

Частота кадров 24 или 25 кадров в секунду достаточна. В конце концов, мы не продюсируем голливудский фильм! Меньшее количество кадров означает меньший размер файла.

3) Удалить аудиоканал

Фоновые видео все равно не будут автоматически воспроизводиться со звуком, поэтому аудиоканал не нужен. При экспорте видео не забудьте пропустить аудиоканал.

Что касается оптимизации видео, мы используем бесплатное приложение для Mac под названием Handbrake, которое существует уже много лет и имеет ряд предустановок и настроек, которые дают вам большой контроль. Если вы более техничны, вы можете оптимизировать видео с помощью командной строки, используя ffmpeg. Есть даже онлайн-сервисы, которые оптимизируют видео. Поиск в гугле выдаст десятки.

Оптимизация изображения афиши

Изображение афиши — это изображение, которое отображается во время загрузки видео. Обычно он совпадает с первым кадром видео, поэтому загрузка видео выглядит бесшовной. Не забывайте, что это изображение должно быть оптимизировано, как и любое другое изображение.

Поддержка нескольких форматов видео

Если вы хотите работать с различными браузерами, экспортируйте видео в формате mp4 и webm. Размеры сжатых файлов этих видео, вероятно, будут очень похожими. Вот простой пример того, как код может выглядеть на веб-странице:

 <видеопостер="/bg-video-posterimage.jpg">
  
  
 

Мы предоставляем несколько форматов, поскольку не все браузеры поддерживают одни и те же форматы видео. Используя «исходные» элементы, браузер будет использовать первый из них, который он понимает (например, Safari будет использовать mp4, а Chrome — webm).

Теперь, когда видео готово для отображения на вашей странице, обратите внимание на следующие моменты:

Обеспечьте контрастность

Если у вас есть текст или другой элемент поверх вашего видео, убедитесь, что он достаточно контрастен, чтобы его можно было прочитать. Часто поверх видео помещается полупрозрачное цветное наложение, чтобы текст над ним выделялся. Наложение также помогает скрыть незначительные артефакты, которые могут быть в видео после сжатия.

Добавить кнопку паузы

Некоторые пользователи просто не хотят, чтобы их беспокоили навороты (или движения) на веб-сайте, и это нормально. Для фоновых видео вы можете добавить кнопку паузы с помощью JavaScript. Еще одна вещь, которую следует учитывать, это то, что видео, установленное на цикл, будет продолжать повторяться, пока у этого пользователя открыта вкладка, поэтому снова можно использовать JavaScript для приостановки видео через определенное время.

Пример оптимизации фонового видео: Tesla

На момент написания этой статьи у Tesla есть фоновое видео на странице модели Y: https://www.tesla.com/modely

Это видео выглядит великолепно и демонстрирует их продукт в действие, похожее на рекламу. Несколько фактов об этом видео:

• Оно длится всего 14 секунд
• Звук отсутствует (хотя в этом видео есть стереофонические аудиоканалы без звука. Возможно, их удаление может еще больше уменьшить размер файла)
• Циклы видео
• Есть элементы управления видео, если вы наводите курсор на видео, что позволяет пользователю приостановить его
• Достаточный контраст, чтобы прочитать текст над видео
• Он в формате mp4 (они даже не обслуживаются webm в качестве альтернативного источника на рабочем столе)
• Размеры 1254 × 1080 (нечетные размеры, но ближе к квадрату, чтобы соответствовать дизайну их страницы)
• Размер всего 2,9 МБ
• Частота кадров 25 FPS
• Битрейт составляет 1,68 Мбит/с
• Они предоставляют альтернативную веб-версию для мобильных устройств

В целом, это хороший пример оптимизации фонового видео.

Окончательная оптимизация: мобильная версия

В зависимости от проекта может возникнуть необходимость показывать меньшее видео на мобильных устройствах или вообще не показывать видео (вместо этого использовать изображение) для экономии трафика ваших пользователей.

Мы уделяем большое внимание Google Page Speed ​​Insights и Core Web Vitals, о которых я говорил в своем посте «Улучшение работы с Google Page с помощью Core Web Vitals». Это очень важно, если вы хотите, чтобы ваш сайт отображал страницы быстро.

Изучая Web Vitals в проектах с фоновыми видео, которые должны отображать изображение на мобильных устройствах, мы заметили, что даже несмотря на то, что видео не показывалось на мобильных устройствах (потому что мы скрывали его с помощью медиа-запросов CSS), оно все равно продолжало отображаться. загружаться в фоновом режиме, как и постер к видео. Мы не хотели, чтобы

какая-либо часть видеоэлемента загружалась (мы хотели показать совершенно отдельное мобильное изображение, над которым у нас было больше контроля с помощью CSS, чем это позволяло изображение постера), поэтому нам пришлось сделать еще один шаг. Это было легче сказать, чем сделать — при поиске в Интернете было не так много информации о ленивой загрузке изображения видеопостера.

Для этого нам понадобилась помощь JavaScript. Мы уже использовали Lazy Sizes для отложенной загрузки изображений (это означает, что изображения не загружаются на страницу до тех пор, пока пользователь не прокрутит изображение, что позволяет страницам загружаться быстрее). Мы поняли, что существует плагин/расширение Lazy Sizes под названием Openhooks, которое расширяет lazySizes для дополнительной ленивой загрузки вещей, отличных от изображений, включая скрипты/виджеты, фоновые изображения, стили и видео/аудио элементы.

Вот пример того, как мы реализовали это для элемента видео. Пример кода находится в Twig, а рассматриваемый сайт был построен на Craft CMS, хотя этот метод также будет работать с другими языками шаблонов и другими системами:

 {# Обратите внимание на атрибуты 'data-' и пустое автовоспроизведение для плагина lazysizes servehooks, поэтому ничего из этого не загружается на мобильных устройствах. #}
 

Если этот элемент видео не виден на странице (т. е. мы просматриваем страницу на мобильном телефоне), хуки открытия оставят это в покое, и на странице как будто нет тега видео. Если видео видно на странице (например, на рабочем столе), обработчики открытия включат автовоспроизведение и позволят загрузить изображение постера.

Чтобы убедиться, что фоновое видео хорошо оптимизировано, нужно выполнить не так уж много действий. В начале вы можете запутаться на этапе оптимизации с частотой кадров и выходными размерами, но как только вы оптимизируете несколько видео, становится довольно легко узнать, достигли ли вы хорошего баланса между размером файла и качеством видео. .

Надеюсь, вы сможете использовать эту статью в качестве справочного материала, если кому-то нужно создать видео и он задает такие вопросы, как «Как долго должна выполняться анимация, прежде чем она зациклится? Существуют ли технические параметры, которые должен знать аниматор, чтобы сделать файл « light’, чтобы сократить время загрузки? Какой формат файла предпочтительнее?» — именно те вопросы, которые вызвали этот пост.

Удачи с фоновыми видео!

html — Как определить цвет фона сайта?

Как определить цвет фона сайта (чтобы использовать этот цвет в Photoshop)? Я просмотрел исходный код, но я недостаточно хорошо знаю код, чтобы понять, что к чему…

• html
• css

Щелкните правой кнопкой мыши на веб-странице и выберите «Проверить элемент» . Затем посмотрите вправо на вкладке «Стили» (при условии, что вы используете Chrome), а затем под тем местом, где написано:

 .сайт {
цвет фона: #f8f3ef;
 

Это цвет (#f8f3ef). Для справки в будущем вам, возможно, придется немного поискать в Inspect Element в следующий раз и просто найти «background-color», а затем цветовой код.

1. Просмотр исходного кода с помощью таких инструментов, как Firebug или Chrome Developer Tools, упростит эту задачу. Вы можете проверить элемент, в данном случае фон, и увидеть применимые к нему правила CSS.

2. Используйте расширение для браузера, например Colorzilla, чтобы щелкнуть и сказать, какой цвет.

1

Это #f8f3ef , иногда я просто делаю копию экрана печати в Photoshop, а затем беру цвет. Но этот метод является самым ленивым для Firebug.

В большинстве браузеров вы можете нажать F12, чтобы открыть набор инструментов разработчика для проверки страницы. Оттуда вы можете щелкнуть значок поиска и щелкнуть элемент, для которого вы хотите увидеть цвет фона, а затем найти background-color 9.0152 свойство css:

Или, если вы часто делаете это, вы можете использовать расширение для браузера (например, ColorZilla в Chrome), чтобы упростить поиск точных цветов на веб-страницах:

Ищите :

 цвет фона:
 

Это верный признак того, что цвет (в шестнадцатеричном формате) устанавливается для фона элемента. Я только что посмотрел на код, и оба значения одинаковы.

 #ece7e3
 

Значение имеет формат # и 2 шестнадцатеричных символа для количества красного, 2 шестнадцатеричных символа для количества зеленого и 2 шестнадцатеричных символа для количества синего, все вместе образуют один цвет. отдельные значения должны быть от 00 до FF.

Более простой способ попытаться сопоставить цвет изображения с цветом чего-либо на странице — использовать кнопку экрана печати в Windows. Просто откройте одну программу рисования вместе с вашим веб-браузером. MsPaint должен работать.

Посетите веб-сайт, который вы указали в своем браузере.

После загрузки нажмите кнопку печати экрана, чтобы сделать снимок экрана, затем вставьте содержимое в программу рисования. Используйте инструмент выбора цвета, чтобы щелкнуть ту часть снимка, цвет которой вы хотите узнать.

В Firefox есть инструмент выбора цвета, который вы можете легко использовать. Инструменты> Веб-разработчик> Инспектор

Это показано на рисунке ниже. Вы можете указать в любом месте на странице, и у вас будет цвет.

Почему бы просто не использовать палитру цветов? Вы можете использовать это, а затем просто перейти в область, в которой хотите точно скопировать цвет. У вас будет он в шестнадцатеричном формате и RGB, поэтому вы можете использовать его в фотошопе.