Перейти к содержимому

Как превратить сайт в GIF с прокруткой

Как сделать по URL анимированный GIF с прокруткой веб-страницы и сохранить файл достаточно лёгким для писем, документации и README. Когда нужен GIF, а когда лучше MP4.

Aviral LakhanpaulОбновлено Чтение: 2 мин

Коротко

Вставьте URL страницы в инструмент, который умеет экспортировать GIF, например Website Scroll Video, уложите прокрутку в 20 секунд при 720p или 1080p и не больше 24 fps, и экспортируйте. GIF — правильный выбор там, где видео не проигрывается, например в письмах и некоторых документах. Везде остальном MP4 или WebM с той же прокруткой чётче и во много раз легче.

Когда GIF — правильный формат

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

  • GIF подходит для письма клиенту или рассылки, README или issue на GitHub, документации и вики, куда не встраивается видео, и мессенджеров, которые показывают GIF прямо в чате.
  • MP4 или WebM подходят для вашего сайта, постов в соцсетях, портфолио и везде, где работает тег <video>. То же движение, лучше цвет, а размер — в разы меньше.

Как сделать GIF

  1. Вставьте URL

    На главной странице вставьте адрес и дождитесь загрузки страницы. Cookie-баннеры и виджеты чата убираются ещё до начала съёмки.

  2. Выберите формат GIF

    Настройки, которые GIF не потянет, ограничиваются автоматически: не больше 24 fps, не больше 1080p и не больше 20 секунд.

  3. Сделайте коротко и неторопливо

    Обрежьте прокрутку до той части страницы, которая важна, и держите движение медленным. При 24 fps быстрая прокрутка размазывает текст, и в GIF зритель замечает это сильнее, чем в видео.

  4. Посмотрите предпросмотр и экспортируйте

    Предпросмотр бесплатный. Когда всё выглядит как надо, экспортируйте, и GIF скачается как любой другой файл.

Как сохранить файл лёгким

Размер GIF растёт с каждым пикселем, каждым кадром и каждым меняющимся цветом. Примерно в порядке влияния:

Что делает GIF с прокруткой тяжелее
НастройкаФайл легчеПочему
Разрешение720p, а не 1080pМеньше половины пикселей на кадр
Длительность6–10 секундКаждая секунда — это ещё 24 полных кадра
Частота кадров24 fps или меньшеВ GIF, по сути, нет сжатия движения
ФонОднотонный цвет, без шумаЗерно и фотографии меняют каждый пиксель в каждом кадре
СтраницаКороче диапазон прокруткиМеньше движения на кадр, меньше новых пикселей

Другие способы сделать GIF из сайта

  • Записать экран и сконвертировать запись в GIF конвертером или инструментом вроде ffmpeg. Подходит для закрытых страниц, но прокрутка будет ровно настолько ровной, насколько ровно ведёт ваша рука.
  • Снимать скриптом на Puppeteer или Playwright: делать скриншоты по мере прокрутки страницы и собирать их вместе. Полный контроль, но и код, который придётся поддерживать.
  • Бесплатные онлайн-инструменты, которые делают GIF по URL. Их несколько, и настроек у них меньше; те из них, что делают ещё и видео, сравниваются на странице альтернатив.

Попробуйте на своём сайте

Вставьте ссылку и бесплатно посмотрите прокрутку в предпросмотре. Бесплатных кредитов при регистрации: 51. Карта не нужна, а на экспортах нет водяного знака.

Недавние запросы

    Вопросы и ответы

    Коротко о том, что обычно спрашивают дальше.

    Контакты
    Как сделать GIF с прокруткой сайта?

    Вставьте URL в инструмент, который делает видео по ссылке и умеет экспортировать GIF, сделайте прокрутку короткой и экспортируйте. Или запишите экран, пока скрипт прокручивает страницу, и сконвертируйте запись в GIF.

    Почему GIF моего сайта такой тяжёлый?

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

    Будет ли GIF проигрываться в письме?

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

    Логотип Website Scroll Video: кнопка воспроизведения поверх веб-страницы в окне браузера.

    Меньше времени на запись. Больше — на созидание.

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