Как сделать гифку (GIF) из видео или фото на телефоне и компьютере

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

Какой бы путь вы ни выбрали, получится файл одного и того же устройства: стопка неподвижных кадров, у каждого из которых своё время показа и своя палитра до 256 цветов, плюс указание, сколько раз повторять анимацию. Иллюстрация в начале статьи показывает эту идею, а сама структура объясняет почти все настройки, о которых речь пойдёт ниже.

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

1. 1Откройте создание GIF и перетащите файл MP4, MOV или WEBM либо нажмите, чтобы выбрать его на телефоне.
2. 2Запустите или прокрутите видео и нажмите «Начать здесь» и «Закончить здесь», чтобы отметить фрагмент. Обычно гифка длится от двух до шести секунд.
3. 3Выберите число кадров в секунду. Для большинства роликов хватает 10; 15–25 нужны только для быстрого движения вроде спорта или игр, потому что каждый шаг добавляет кадры и вес.
4. 4Нажмите «Добавить кадры». Они появятся лентой, где можно удалить затянутое начало, скопировать кадр, чтобы задержать момент, или перевернуть весь фрагмент.
5. 5Выберите ширину (480 пикселей подходит почти для любого мессенджера и сайта) и оставьте повтор «Бесконечно».
6. 6Нажмите «Создать GIF», проверьте превью и вес файла, затем скачайте его.

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

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

1. 1Добавьте картинки JPG, PNG, WEBP или HEIC в онлайн-генератор гифок. Новые картинки можно добавлять в любой момент, они встают в конец ленты.
2. 2Расставьте их по порядку: выберите кадр и нажмите «Раньше» или «Позже» либо «В обратном порядке», чтобы перевернуть всю последовательность.
3. 3Задайте время кадра. Для слайд-шоу из фото 500 мс – 1,5 секунды дают время рассмотреть снимок; для стоп-моушена 80–150 мс делают движение непрерывным.
4. 4Выберите форму. «Как у первого кадра» сохраняет пропорции первого снимка; «Квадрат» подходит для мессенджеров и аватарок, «Вертикальная 9:16» для историй.
5. 5Выберите «Показать картинку целиком», чтобы каждое фото поместилось в рамку, или «Заполнить кадр», чтобы обрезать края и избежать полос.
6. 6Выберите повтор, нажмите «Создать GIF» и скачайте файл.

Самые плавные анимации получаются из снимков, сделанных с разницей в несколько секунд, поэтому серийная съёмка идеальна. Для стоп-моушена поставьте камеру на штатив и зафиксируйте экспозицию, иначе яркость будет мерцать от кадра к кадру. Если снимок нужно выровнять или обрезать, сначала обрежьте фото и добавьте обрезанную копию.

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

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

• Мем «my beloved»: гифка с медальоном-сердцем помещает ваше фото в красный медальон, который раскрывается рядом с подписью или вторым снимком.
• Свои эмодзи: превратите GIF в эмодзи для Discord или Slack: картинка станет квадратной, уменьшится и уложится в лимит каждой платформы (256 КБ в Discord, 128 КБ в Slack).
• Анимированные логотипы и иконки: если анимация в формате SVG, переведите SVG в GIF, чтобы она работала там, где SVG не поддерживается, например в письмах.

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

1. 1Загрузите картинки слоями через «Файл» → «Сценарии» → «Загрузить файлы в стек». Для видео выберите «Файл» → «Импортировать» → «Кадры видео в слои» и укажите диапазон.
2. 2Откройте «Окно» → «Шкала времени» и в центре панели выберите «Создать анимацию кадра».
3. 3В меню панели «Шкала времени» выберите «Создать кадры из слоев». Каждый слой станет кадром.
4. 4Задайте задержку каждого кадра в маленьком меню под миниатюрой и выставьте повтор внизу панели на «Постоянно».
5. 5Сохраните через «Файл» → «Экспортировать» → «Сохранить для Web (старая версия)». Выберите GIF, задайте число цветов (128 для начала), включите или выключите дизеринг, проверьте вес в углу предпросмотра и сохраните.

В английской версии эти команды называются Load Files into Stack, Create Frame Animation, Make Frames From Layers и Save for Web (Legacy). Photoshop даёт покадровый контроль ценой подписки и десятка шагов. Чтобы расставить фото или фрагмент видео и получить чистую лёгкую гифку, браузерному инструменту хватает минуты с теми же настройками.

Пять настроек определяют, как выглядит гифка и сколько она весит. Вот что делает каждая и с каких значений начинать для типичных задач.

Чтобы понять, какие настройки действительно важны, мы сделали один и тот же 3-секундный ролик GIF-кодировщиком этого сайта, меняя по одной настройке. В первой версии камера медленно ведёт панораму по детальному пейзажу, и в каждом кадре меняются все пиксели, как в большинстве видео с телефона. Во второй та же картинка неподвижна и движется только один маленький объект — так выглядят записи экрана и съёмка со штатива.

Выделяются три вывода. Во-первых, содержимое важнее настроек: статичный кадр весит в 50 раз меньше панорамы при тех же размерах, потому что кодировщик сохраняет только меняющиеся пиксели. Во-вторых, в подвижном видео частота кадров меняет вес почти пропорционально: вдвое больше кадров — вдвое тяжелее файл. В-третьих, переход с 255 на 64 цвета сэкономил 38 %, а дизеринг добавил 23 %. Ваши цифры будут зависеть от видео, но порядок этих рычагов сохранится.

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

1. 1Сократите фрагмент. Уберите затянутые начало и конец: каждая вырезанная секунда — это секунда, которую не нужно хранить.
2. 2Снизьте частоту кадров. Переход с 20 на 10 кадров в секунду примерно вдвое уменьшает подвижный фрагмент.
3. 3Обрежьте кадр по действию. Чем меньше движущегося фона, тем меньше пикселей меняется в каждом кадре, а в тесте именно это сыграло главную роль.
4. 4Уменьшите ширину. 480 пикселей хватает почти везде, где показывают гифки; для чата хватит 320.
5. 5Уменьшите число цветов и отключите дизеринг, если на гифке нет полос.
6. 6Сожмите остальное. Сжать GIF можно до точного веса, например 256 КБ, 1 МБ или 5 МБ, ценой небольшой потери деталей.

Если и после этого гифка слишком тяжёлая, честный ответ такой: GIF не подходит для этого фрагмента. Короткое видео MP4 или WebP сохранит гораздо больше качества при доле веса, как показывает сравнение ниже. Если тяжёлыми оказались обычные картинки, в руководстве о том, как уменьшить размер фото без потери качества, разобраны JPG, PNG и WebP.

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

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

• Чтобы сделать прозрачную гифку из картинок, начните с вырезанных PNG и выберите фон «Прозрачный» в создании GIF.
• Чтобы сделать прозрачной уже готовую анимацию, удалите фон с GIF: инструмент убирает фон покадрово и может залить его другим цветом.
• Чтобы избежать ореола, вырезайте объект на цвете, близком к фону страницы, где будет гифка, или оставляйте чёткие формы без мягких теней.

О статичных картинках с прозрачным фоном и о том, почему PNG лучше справляется с мягкими краями, чем GIF, читайте в руководстве о том, как сделать прозрачный фон.

Формат GIF появился в 1987 году, а анимацию и прозрачность получил в 1989-м. Он жив, потому что воспроизводится везде без кнопки запуска. Новые форматы легче и красивее, но ни один не принимают везде, где принимают GIF.

Выбирайте GIF для чатов, эмодзи, писем и везде, где его требуют. Выбирайте MP4 для всего длиннее нескольких секунд, всего со звуком и для соцсетей и мессенджеров, многие из которых всё равно превращают загруженные гифки в видео. Чтобы перевести готовую гифку, конвертер GIF в MP4 сохраняет точный ритм кадров; наша тестовая гифка на 2,1 МБ превратилась в MP4 на 184 КБ. Анимированный WebP выбирайте для собственного сайта, когда нужна прозрачность или меньший вес. Подробнее о WebP — в статье о разнице между JPG, PNG, WebP и HEIC.