Как да направим гиф анимация от видео онлайн и да го оптимизираме

Хрумна ми идеята за тази публикация, докато си създавах гифчетата за предишната. Трябваше от онлайн JavaScript анимация да стигна до оптимизиран за уеб страница гиф.

Защо оптимизация ?

Гифът се получава доста тежък в мб и уеб страницата ще се отвори по-бавно. Затова се налага да се извършат операции по оптимизиране, за да го намалим чувствително.

За целия процес предпочетох да използвам два инструмента онлайн.

Ето линка с изходната JavaScript анимация от сайта, който разгледах в миналата публикация.

Описание

1. Използвам разширението Chrome Capture, за да захвана прозореца с Javascript анимацията.

2. За да направя от полученото видео във формат .webm (681 kb) анимиран гиф, ще използвам сайта ezgif.com.

Отивам и избирам Video to GIF. Качваме видеото на сайта. Става достатъчно бързо.

3. Пускаме каченото видео, за да видим колко от времето му да включим в гифа. По подразбиране е от начало 0 сек. и край 5 сек., увеличавам до 7 сек. Има и други настройки. Конвертирам в гиф.

4. След това отивам на crop, ако има нужда за изрязване. Ако не – на resize. Примерно правя преоразмеряване 50 %. Гифът става от File size: 1.80Mb, width: 600px, height: 337px, frames: 51, type: gif на File size: 544.36Kb(-70.5%), width: 300px, height: 169px, frames: 51, type: gif.

5. Последна операция optimize. Важна е поредицата от действия, първо промяна в размерите, после оптимизация. Можем да компресираме до ниво 200.  Оптимизираме и получаваме File size: 176.86Kb (-67.51%), width: 300px, height: 169px, frames: 26, type: gif. 

6. Запомняме с десен бутон като изображение така получения оптимизиран гиф.

7. Като алтернатива можем да ползваме за получаване на видео от JavaScript анимацията друго Chrome разширение – Chrome Loom. При него се прави видеозапис на целия екран.

8. Сваляме го с бутона, както е показано със стрелката. Получаваме формат .mp4 (301 kb).

9. Оттук продължаваме по същия начин. След като качим видеото трябва да използваме crop, за да изрежем само анимацията. От File size: 354.23Kb, width: 600px, height: 338px, frames: 21, type: gif получаваме File size: 231.68Kb (-34.6%), width: 258px, height: 149px, frames: 21, type: gif.

10. Преценявам, че ще ми е необходимо само optimize. Получавам File size: 74.27Kb (-67.94%), width: 258px, height: 149px, frames: 21, type: gif при ниво 180 на компресиране. Запомняме с десен бутон гифчето.

Заключение

Исках да покажа, колко много неща можем да направим онлайн с функциите на сайта ezgif.com. И описаните съвсем не са всичките възможности. С голяма свобода можем да обработваме и оптимизираме нашите гиф. Необходими са ни във възможно най-лек вид без голяма загуба на качество, за да не забавят качването на нашата уеб страница.

Автор на основното изображение Néstor Alonso