Чому GIF, а не відео
Відео потребує кліку, плеєра й рішення глядача витратити на нього хвилину. GIF просто є: він починає грати, щойно відкрито повідомлення чи тікет, і повторюється сам. Для коротких візуальних пояснень ця різниця важить більше за якість.
GIF — правильний формат, коли:
- Те, що ви показуєте, триває кілька секунд — стан при наведенні, зламана анімація, перетягування, три кліки до потрібного налаштування.
- Він іде туди, де відео незручні — у pull request на GitHub, тікет у Jira чи Linear, README, рев'ю дизайну, статтю довідки.
- Звук не важливий. У GIF немає звуку. Якщо треба пояснювати голосом, записуйте відео.
І це неправильний формат для всього довшого за 10–15 секунд: розмір файлу швидко росте, кольори смугують, а двохвилинний GIF ніхто не дивиться.
Спосіб 1: запис екрана одразу в GIF у Chrome
Найшвидший шлях узагалі оминає відео. З розширенням DashShot для Chrome — саме розширенням, а не десктопною програмою — кроки такі:
- Натисніть Ctrl+Shift+R (Cmd+Shift+R на Mac) або відкрийте розширення й оберіть запис.
- Увімкніть «Записати як GIF» (до 12 секунд, без звуку). За бажанням увімкніть «Обмежити область запису», щоб виділити лише потрібну частину екрана, і бульбашку камери, якщо хочете бути в кадрі.
- Оберіть у вікні Chrome, що показувати, — вкладку, вікно чи весь екран — і дочекайтеся 3-секундного відліку.
- Зробіть те, що показуєте. Смужка прогресу заповнюється до 12-секундного ліміту, і запис зупиняється автоматично.
- Скопіюйте посилання або збережіть GIF на диск. Посилання відкривається в будь-якому браузері без реєстрації.
GIF записуються приблизно з частотою 10 кадрів на секунду — так вони легкі, а для демонстрації інтерфейсу цього цілком досить. Запис GIF входить у безкоштовний тариф DashShot; та сама функція є в десктоп-застосунках для Mac і Windows, якщо треба зняти щось поза браузером.
Спосіб 2: запис в онлайн-рекордері в браузері
Кілька сайтів записують екран прямо на сторінці й зберігають результат як GIF — популярний безкоштовний варіант є в Ezgif. Відкриваєте сайт, дозволяєте показ екрана у вікні Chrome, записуєте й завантажуєте. Без акаунта й встановлення.
Компроміси: ви отримуєте файл, а не посилання, тож його однаково треба кудись завантажити; вибору області зазвичай немає, крім того, що дозволяє показати Chrome (вкладка, вікно чи екран); а запис проходить через сторонній сайт — нормально для публічної сторінки, але краще уникати для внутрішніх дашбордів чи даних клієнтів.
Спосіб 3: конвертувати відео, яке вже є
Якщо ви вже записали MP4 — «Ножицями» Windows, Cmd+Shift+5 на Mac чи будь-яким рекордером, — перетворити його на GIF у браузері можна за хвилину:
- Відкрийте онлайн-конвертер відео в GIF, наприклад «Video to GIF» в Ezgif.
- Завантажте відео й задайте час початку й кінця — тримайтеся в межах 10 секунд.
- Оберіть розмір: 600–800 px завширшки досить для більшості записів екрана.
- Встановіть частоту 10–15 кадрів на секунду.
- Конвертуйте, перевірте прев'ю, а якщо файл завеликий — скористайтеся оптимізацією (стиснення з втратами, менше кольорів).
Якщо вам зручно в терміналі, FFmpeg робить те саме локально й дає чистіші кольори завдяки двопрохідній палітрі: ffmpeg -i in.mp4 -vf "fps=12,scale=800:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" out.gif. Це єдиний виняток із «без встановлення програм», але його варто знати, якщо ви робите GIF часто.
GIF чи MP4: наскільки велика різниця
GIF — формат 1987 року. Він зберігає кожен кадр як зображення з максимум 256 кольорами й не має сучасного стиснення між кадрами, тож той самий кліп у GIF зазвичай у кілька разів більший, ніж у MP4. Приблизні цифри для 10-секундного запису екрана завширшки 800 px:
| Формат | Типовий розмір | Грає сам у стрічці | Звук | Кольори |
|---|---|---|---|---|
| GIF, 10 кадр/с | 1–4 МБ | Так, майже всюди | Ні | 256 на кадр |
| GIF, 30 кадр/с | 4–12 МБ | Так | Ні | 256 на кадр |
| MP4 (H.264) | 0,3–1 МБ | Лише де підтримується автоплей без звуку | Так | Повні |
Точний розмір залежить від того, скільки змінюється на екрані: курсор, що рухається по статичній сторінці, стискається добре; прокручування насиченої сторінки чи відео всередині — ні. Тому найефективніший спосіб зменшити GIF — не налаштування стиснення, а записувати менше: меншу область, менше секунд, менше кадрів.
Як зробити GIF легким і чітким
- Записуйте область, а не весь екран. Ділянка 600×400 — це частка пікселів екрана 1920×1080, і вона фокусує увагу.
- Робіть коротко. Від трьох до восьми секунд вистачає майже для будь-якого демо інтерфейсу. Відрепетируйте кліки один раз перед записом.
- 10–15 кадрів на секунду досить. Інтерфейсам не потрібно 30, анімації нормально виглядають і на 15.
- Збільшуйте масштаб, а не розмір. Перед записом наблизьте браузер до 110–125%, щоб текст лишився читабельним після зменшення.
- Уникайте градієнтів і відео в кадрі. Саме з ними 256 кольорів справляються найгірше.
- Зробіть паузу до й після дії. Пів секунди нерухомості на початку й наприкінці роблять цикл зрозумілим, а не метушливим.
Де GIF працюють — а де ні
Працюють добре: issues і pull requests на GitHub і GitLab, Jira, Linear, Notion, Confluence, повідомлення в Slack і Teams, Gmail і Apple Mail, більшість сервісів довідки й файли README.
Будьте уважні: деякі версії Outlook для Windows показують лише перший кадр GIF, тож розмістіть найважливіший стан у першому кадрі. Деякі месенджери конвертують GIF у відео під час завантаження. А дуже великі GIF (понад ~10 МБ) можуть відхилятися таск-трекерами й поштою — ще одна причина робити їх короткими.
Коли GIF стає довшим за 15 секунд або потребує вашого голосу, переходьте на коротке відео з посиланням. Воно буде меншим, чіткішим і зрозумілішим.