Как оптимизировать видео для сайта – База знаний Timeweb Community
Видео – мощный инструмент для привлечения и вовлечения пользователей. Видеоформат уже сейчас называют одним из трендов настоящего и будущего, его популярность в рекламе постоянно растет. Уже сейчас на видео приходится более 70% всего потребительского интернет-трафика. Чуть меньше половины пользователей (43%) хотели бы получать еще больше контента в видеоформате. Да и самим маркетологам выгодно использовать видео: 4 из 5 пользователей принимают решение о покупке на основе просмотренного видео. Кроме того, компании, которые используют видео в рекламе, имеют на 27% выше CTR и на 34% выше уровень конверсии.
В общем, есть множество причин использовать видео, в том числе и на своем сайте. Однако тут встает вопрос об оптимизации: как использовать видео не во вред своему сайту? Об этом и пойдет речь в статье.
Выбираем формат видео для сайта
Для платформ YouTube и Vimeo стандартными форматами являются MP4 и WebM.
MP4 поддерживают все браузеры, в то время как WebM сейчас поддерживают только Chrome и Firefox. Видеоролики в формате WebM, как правило, весят меньше, чем MP4-файлы, однако MP4 смотрятся чуть лучше на портативных девайсах.
Далее оптимизация разделяется на два пути:
- оптимизация видео для сайта,
- оптимизация сайта под видео.
Рассмотрим оба типа работ.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться
Оптимизация видео для сайта
Что нужно сделать для того, чтобы видео на сайте грузилось быстро.
Уменьшение веса видеофайлаСпециальные программы вроде Blazemp или HandBrake позволяют уменьшить размер файла без ухудшения его качества. Более легкие файлы загружаются быстрее, а это значит, что сжатие файлов поможет сэкономить время, требующееся на загрузку страницы.
Главное, не переборщить и не сделать сильное сжатие в ущерб качеству; все-таки видеоролики с высоким разрешением выглядят более интересно и профессионально, а видео низкого качества может оставить у пользователей плохое впечатление от посещения сайта.
Используйте онлайн-конвертер для того, чтобы переконвертировать видео в форматы MP4 или WebM.
Удаление звука (если он не используется)Даже если у вас видео без звука, в нем все равно можно убрать данные об аудио, чтобы уменьшить размер файла. Это можно сделать либо на этапе экспортирования видео (если вы делаете его самостоятельно), либо при помощи простого редактора, например, FFmpeg.
Оптимизация сайта под видео
Что нужно сделать, чтобы видео отображалось корректно.
Точный размер видеоОбязательно укажите в HTML или CSS размеры видео по вертикали и горизонтали – так браузеру будет проще определиться с пропускной способностью.
Загрузка видео после загрузки страницы (Lazy Load)Если у вас есть видео, которое начинает проигрываться автоматически после того, как пользователь зашел на страницу, отложите его загрузку до того момента, когда загрузятся все остальные элементы на странице.
Так у пользователей сложится более приятное впечатление от сайта.
Все больше людей выходят в сеть через портативные девайсы, поэтому сайты, не оптимизированные под мобильные устройства, изначально проигрывают оптимизированным сайтам.
Следуйте принципам адаптивного дизайна: ваш сайт должен нормально отображаться на дисплеях с разным разрешением и разных размеров; также сайт должен понимать ориентацию устройства для того, чтобы корректно проигрывать видеоролики.
Сделать так, чтобы сайт нормально отображался на разных устройствах, будет непростой даже для опытного фронтендщика. Да, можно сделать отдельную версию сайта специально для мобильных устройств, но есть более простой способ приспособить сайт под портативные нужды.
Допустим, на главной странице сайта есть видео, которое на мобильных устройствах выглядит не очень хорошо. Тогда можно просто запретить видео грузиться на портативных девайсах с небольшими экранами.
Надо добавить в CSS такой код:
@media screen and (max-width: 650px) {
#hero-video {
display: none;
}
}Советы для SEO-специалистов
И несколько советов, которые касаются SEO.
Да, сейчас есть популярные площадки для размещения видео – тот же YouTube. Однако если вы хотите продвинуть сайт в Google, размещать видео нужно на своем ресурсе. Если вы разместите видео на YouTube и дадите ссылку на свой сайт, то поисковые системы отдадут предпочтение YouTube, и в результате кто-то, кто ищет вашу компанию в Google, попадет на YouTube, а не на ваш сайт.
Другие советы:
- Пишите метаданные для видеороликов (чтобы они проще индексировались).
- Придумывайте видеороликам описательные (а не общие) названия. При этом название не должно быть длинным; также советую использовать ключевые слова.
- Подбор ключевых слов может потребовать некоторых усилий (и времени), зато это повысит шансы вашего видео появиться в поисковой выдаче.
- Выберите подходящую миниатюру (это важно).
Заключение
Если перед добавлением роликов на сайт вы их оптимизируете, то появление видео на сайте окажет минимальное влияние на производительность – в отличие от конверсии, которая может значительно вырасти.
Экспериментируйте с видео: ставьте его в разные места сайта, анализируйте, что больше нравится вашим пользователям.
В конце концов, оптимизировать видео не так сложно, как сделать по-настоящему интересный ролик. Удачи!
Как создать фоновое видео для главной страницы сайта
Clipchamp — бесплатный онлайн-редактор видеоПопробуй бесплатно
Поделиться этой публикацией
На этой странице
- Что такое фоновое видео?
- Примеры видеофонов
- Как создать фоновое видео для главной страницы сайта
- Мало?
Статичные домашние страницы постепенно уходят в прошлое, уступая дорогу красивым видеофонам, которые набирают популярность по всему интернету.
Правильно подобранный видеофон разогреет интерес посетителей и задаст настроение всему сайту. Видеофон также может повысить показатели конверсии. По данным журнала Forbes, видео на целевой странице способно увеличить конверсию на 80%.
Ну кто откажется попробовать видеофон при такой статистике? В этой статье мы делимся советами по выбору и созданию фонового видео для главной страницы сайта.
Что такое фоновое видео?
Собственно, название говорит само за себя: это видео, которое проигрывается на фоне вашего сайта. Так как видео способно красноречиво описать характер и рассказать историю бренда, чаще всего оно помещается на фоне главной страницы сайта. В отличие от руководств и презентаций товаров, фоновое видео создается с целью передать стиль и настроение, а не информацию. Фоновые ролики, как правило, короткие (не больше 30 секунд) и сопровождаются субтитрами или содержат минимум текста (либо текст отсутствует вовсе).
Примеры видеофонов
Чтобы вдохновить вас перед созданием видеофона, мы составили небольшую подборку с отличными примерами сайтов, где используется фоновое видео.
Mediaboom
Агентство цифрового маркетинга Mediaboom разместило на главной странице своего сайта фоновое видео с кратким экскурсом в рабочие будни компании. Видео выполнено в черно-белых тонах, и поэтому текст поверх ролика не теряется и легко читается. Видео, где показаны разные аспекты работы агентства, располагает к себе зрителя на более глубоком уровне, нежели типичная страница «О компании». В ролике отключен звук и показаны клиент и сотрудник компании, рабочее пространство, офис и задействованные технологии — в целом, отличная иллюстрация услуг агентства.
Venem 1.0
Австралийский модный бренд Venem 1.0 выбрал для своего фонового видео другой формат. Компания рекламирует новые поступления с помощью коротких фоновых роликов, которые приглашают посетителей ознакомиться с коллекцией и нажать кнопку с призывом к действию. Такое фоновое видео раскрывает творческий подход компании и смотрится на одном дыхании.
The Cliffs
Застройщик The Cliffs выбрал классический вариант фонового видео.
Ролик посвящен семи элитным жилым комплексам компании и показывает местную природу, сельскую местность и варианты досуга. Текст поверх видео ненавязчиво придает ролику дополнительную глубину. В то время как сайт компании рассказывает о недвижимости, видео наглядно иллюстрирует преимущества элитного жилья и надолго запомнится зрителям.
Project Skin MD
Project Skin MD выводит фоновое видео на кардинально новый уровень и рассказывает целую историю. В начале ролика мы видим, как женщина приходит в клинику и направляется к стойке регистрации. Затем видео показывает, как проходит типичный прием. Таким образом, один короткий ролик освещает работу клиники сразу с нескольких сторон — приемная, персонал, средства по уходу и лазерные процедуры, товары для продажи и блестящее обслуживание. Текста, опять же, минимум, и он не меняется на протяжении всего ролика.
Как создать фоновое видео для главной страницы сайта
Фоновое видео по плечу каждому, даже если ваши навыки в области создания сайтов или электронной коммерции приблизительно равны нулю.
Для этого совсем не нужно быть профессиональным редактором видео или пользоваться дорогостоящим оборудованием.
Clipchamp — больше, чем просто бесплатный редактор видео. На нашей платформе также собрана огромная коллекция ресурсов, включая профессиональные стоковые видеоролики. Чтобы помочь вам воспользоваться этими преимуществами максимально эффективно, мы подготовили пошаговую инструкцию по созданию фонового видео для главной страницы сайта.
Шаг 1. Начните с создания учетной записи в Clipchamp
Выполните вход в свою учетную запись Clipchamp или пройдите бесплатную регистрацию.
Шаг 2. Создайте новый проект
Нажмите кнопку «Создатьвидео» на боковой панели слева. Выберите один из пяти форматов, который лучше всего подойдет для вашего проекта. Для фона главной страницы рекомендуем использовать широкоэкранный формат с соотношением сторон 16:9.
Шаг 3. Добавьте собственное или стоковое видео
Нажмите кнопку «Сток» на боковой панели слева и просмотрите доступные варианты.
Присмотрев подходящее видео, нажмите кнопку «+ Добавить» в правом верхнем углу видео. Выбранные ролики автоматически загрузятся в вашу медиатеку. Если вы хотите воспользоваться собственным видеоматериалом, нажмите кнопку «Добавить ресурс» на панели слева и импортируйте файл с компьютера.
Шаг 4. Добавьте и отредактируйте видео на шкале времени
Перетащите видеоролики на шкалу времени и разместите их в желаемой последовательности. Если вы поместили клип не туда, не волнуйтесь: ролики можно свободно перемещать по шкале. Теперь клипы можно подрезать: для этого воспользуйтесь специальным инструментом или просто потяните зеленую рамку клипа за правый или левый край. Настройте цветовой баланс, добавьте фильтр или оставьте видео как есть. Однако мы рекомендуем понизить экспозицию или применить эффект черно-белого кин
Бесплатные стоковые видеоматериалы HD 4K Скачать клипы без лицензионных платежей
Ваш браузер не поддерживает html-видеоплеер.
Загрузить еще
Музыка и звуковые эффекты без лицензионных отчислений
Почему вам понравится видео
1. Бесплатные стоковые видеоматериалы
Как бесплатный пользователь вы получите доступ к более чем 50 000 бесплатных стоковых видеоклипов и движений графика, анимированные фоны и сотни бесплатных звуковых эффектов.
Мы получаем этот контент от проверенных поставщиков, а также производим контент собственными силами, поэтому вы можете быть уверены, что получаете доступ к стоковым видеоклипам самого высокого качества в формате 4K и HD, которые безопасно использовать в ваших творческих проектах. Если вы решите перейти на план «Премиум», вы откроете доступ к более чем 700 000 премиальных фондовых активов с безвозмездной лицензией.
2. Простое лицензирование
Когда дело доходит до лицензирования нашего контента, нашей главной целью всегда была простота. Наши бесплатные видеоклипы лицензируются нашей собственной лицензией Video Attribution License или Creative Commons 3.
0, что позволяет вам использовать контент в более широком спектре продуктов, даже в коммерческих целях.
При переходе на план Premium лицензия на бесплатный видео- и аудиоконтент обновляется до Royalty-Free, что означает, что вам больше не нужно указывать авторство.
Более того, безвозмездное лицензирование позволяет вам снова использовать один и тот же клип в нескольких проектах, сейчас или в будущем, без повторной оплаты этого клипа.
3. Новые клипы добавляются ежедневно
Наша обширная библиотека из более чем 700 000 стоковых медиаклипов постоянно пополняется новыми видеоклипами, звуковыми эффектами и музыкальными треками, добавляемыми ежедневно. Наша преданная команда собственных продюсеров собирает этот контент со всего мира, предлагая вам разнообразный и уникальный выбор бесплатных видео и звуков для ваших проектов.
Мы всегда в поиске новых участников, поэтому, если у вас есть страсть к съемке отличного визуального контента, мы хотим услышать от вас!
Из блога
Советы по экономии времени для Adobe Premiere Pro
Вот 10 быстрых и простых способов сэкономить время при редактировании в Premiere Pro.
Редактирую в Premiere давно. …
Как запустить подкаст в 2023 году
Здесь есть все, что вам нужно, чтобы начать успешный подкаст. Точно так же, как у каждого есть отличная идея для фильма, то же самое можно сказать и о…
Кинопроизводство 101: Как снять документальный фильм
Итак, вы хотите снять документальный фильм? Вот ключевые шаги, от концепции до скрининга. Документальные фильмы — отличный способ рассказать историю …
Посетите блог, чтобы узнать большеО нас
Видео было создано с одной простой целью: сделать стоковые видеоматериалы более доступными и тем самым дать создателям во всем мире возможность создавать потрясающий визуальный контент. . Первоначально запущенный как бесплатный сервис видеоматериалов, мы также добавили в микс звуковые эффекты и музыкальные треки, а также расширенную коллекцию из более чем 700 000 премиальных стоковых материалов.
Мы работаем только с избранным числом доверенных поставщиков нашего премиум-контента, и мы даем каждому больший кусок пирога, чтобы доходы не распределялись между тысячами участников.
Работая с меньшим количеством хорошо зарекомендовавших себя участников, мы также можем быть уверены, что контент был получен ответственно и безопасно для использования. Кроме того, наш контент предоставляется с минимальным разрешением 1080p HD, и большая часть нашего контента теперь предоставляется в формате 4K.
Со штаб-квартирой в сельской местности Оксфордшира, Великобритания, мы небольшая и увлеченная команда, которая любит общаться. Если вы когда-либо были такими, найдите нас, или вы можете связаться с нами, отправив сообщение через нашу страницу контактов или написав нам по электронной почте [email protected].
Изучите популярные категории
Блог Videvo.net, бесплатные стоковые видеоматериалы и анимационная графика, HD и 4K
Последние новости и статьи
- Видеоруководство
Вот 10 быстрых и простых способов сэкономить время при редактировании в Premiere Pro . Редактирую в Premiere давно.
На это программное обеспечение я потратил больше всего…
- Тодд Бланкеншип
- Ресурсы
Здесь есть все, что нужно для запуска успешного подкаста. Точно так же, как у каждого есть отличная идея для фильма, то же самое можно сказать и о подкастах. Быстрый взгляд на Spotify покажет тысячи…
- Автор: Алехандро Медельин
- Кинопроизводство
Итак, вы хотите снять документальный фильм? Вот ключевые шаги, от концепции до скрининга. Документальные фильмы — отличный способ рассказать историю, происходящую в реальной жизни, или пролить свет на…
org/Person»> Энтони Наджера- Кинопроизводство
От адаптеров до небольших объективов — вот лучшие варианты доступного анаморфотного изображения. В этом обзоре оборудования для кинопроизводства мы рассмотрим несколько доступных анаморфотных вариантов, которые дадут вам… зажженный выстрел — это блик. Вот все, что вам нужно знать. Когда дело доходит до освещения, нужно учитывать множество моментов…
- Тодд Бланкеншип
- Индустрия
Есть одна вещь, которой нас научили фильмы, и это то, что праздники намного сложнее, чем вы думаете, Франк Капра.
- Автор: Марк Теппо
- Видево
Мы все знаем о пользе медитации. Врачи и ученые снова и снова доказывали, что регулярная процедура успокоения ума путем наблюдения за дыханием и расслабления может длиться долго…
- ByDarin Bradley
- Бесплатные
