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


Хрумна ми идеята за тази публикация, докато си създавах гифчетата за предишната. Трябваше от онлайн 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. Запомняме с десен бутон като изображение така получения оптимизиран гиф.

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

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

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

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 на компресиране. Запомняме с десен бутон гифчето.

Как-да-направим-гиф-анимация-от-видео-онлайн-3Заключение

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

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


Коментари

This site uses Akismet to reduce spam. Learn how your comment data is processed.