Як зменшити об'єм файлу анімації GIF у Photoshop. Змінюємо розмір анімації у форматі GIF

Анімовані gif-ки дуже популярні в соцмережах, часто можна зустріти на розважальних сайтах. За допомогою гіфок можна показати найбільш вдалий момент із відеоролика, гіф-скриншоти наочно демонструють етапи роботи в будь-якій програмі чи сервісі. Gif-скриншоти також використовують для показу роботи елементів сайту, наприклад, меню, що випадає. Перед скачуванням файлів для встановлення користувач може ознайомитися з їхньою роботою за допомогою gif-анімації. Ви можете і самі створювати та викладати власні анімовані забавні картинки, для цього вам знадобиться додаток для андроїд

Однак гіфки мають і головний недолік - великий розмір, у зв'язку з цим значно сповільнюється швидкість завантаження веб-сторінок, на яких вони розміщені. Щоб усунути ці недоліки, я пропоную вам ознайомитися зі списком інструментів, які допоможуть оптимізувати (зменшити розмір) гіф-анімації.

Shrink O’Matic

Це проста програма для Windows для оптимізації gif зображень. Вона здатна і на найпростіші дії із зображеннями, такі як поворот, зміна розміру, зміна назви файлу та його розташування, пакетна обробка. Доступні формати обробки: GIF, JPEG, PNG.

ImageOptim

Ця програма працює на платформі Mac. Вона призначена для стиснення GIF до 60-80% і вище без втрати якості.

FileOptimizer - просунутий інструмент для стиснення анімації. Програма має простий інтерфейс, тому її можуть використовувати як новачки, так і досвідчені користувачі.

Інші формати, що підтримуються: JPEG, PNG, SWF, TIFF, BMP, ICO

Працює на платформах: Windows, Mac OS, Linux

FILEminimizer Pictures

Компресія зображення досягає 98% і вище в результаті власних оптимізаційних технологій. Розрізняють 4 рівні стиснення gif-файлів. Крім того, програма дозволяє завантажувати картинки безпосередньо у facebook.

Формати: JPG, BMP, TIFF, PNG, EMF | Платформа : Windows

RIOT

Ця програма мені сподобалася більше за інших. Ви можете керувати стисненням гіф, програма показує розмір вихідного та вихідного файлу, є прев'ю, завдяки йому ви можете візуально оцінювати втрату якості. Недолік: анімована gif перетворюється на звичайне статичне зображення.

GIF Optimizer

Проста програма для оптимізації gif-анімації. Програма має лише три кнопки – open – відкрити файл, optimize – оптимізувати та Save as – зберегти як. Ви можете керувати стисненням через меню Setting (Параметри).

Незалежно, яким чином ви отримали GIF-анімацію, ви можете зменшити її розмір.

Якщо ви використовували наш сервіс зі створення GIF-анімації з відео, ми рекомендуємо використовувати оригінал для експериментів, т.к. як кожна конвертація може погіршити якість одержуваного файлу.

Всі приклади будуть засновані на короткому кліпі FullHD відео 16 секунд та 30 кадрів на секунду.

Трохи теорії про GIF

Коротко: GIF – це максимум 256 кольорів (8 біт) + стиск без втрат (LZW).
Як і будь-який стиск без втрат - воно не надто стискає файл. У результаті - ми зменшимо розмір не більше ніж на 50% (дуже залежить від картинки).

Тестове відео:

Вважаємо розмір одного кадру: 1920*1080*40%-100% = 0.8-2 мб.

А тепер порахуємо для 16 секунд відео: 16 сек * 30 кадрів за секунду * (0.8-2) мб = 384-960 мб!
Наш вихідний файл при перетворенні вийшов 309мб. Менше за розрахунковий, але теж великий.
Здивувались? Адже розмір вихідного відео всього кілька мегабайт! Як це може?
А просто: GIF – це мамонт, так, він класний, але з ним треба вміти працювати.

Крок 1. Зменшити GIF. Розмір зображення

Обов'язково зменшіть розмір до адекватного (не більше 640 пікселів з більшої сторони).
В цьому випадку розмір буде: 640*360*40%-100% = 90-225 кб.
І розмір відео: 16 сек * 30 кадрів * 90-225 кб = 42-105 мб.
Наш вихідний файл при перетворенні вийшов 38мб. Менше за розрахунковий, але теж великий.
Багато? Так. Йдемо далі...

Крок 2. Кількість кадрів

30 кадрів – це круто, але на жаль для GIF – це дуже багато.
Зменшіть кількість до 10 кадрів і ви скоротите розмір 3! рази.
Вважаємо: 16 сек * 10 кадрів * 90-255кб = 14-35 мб.

Наш вихідний файл при перетворенні вийшов 14.5 мб. Вже краще.

Наприклад, якщо у вас відео 60 кадрів на секунду – ви можете зменшити з ряду: 1, 2, 3, 4, 5, 6, 10, 15, 20, 30.
А якщо 25 кадрів, то ряд буде: 1, 5...
Або 30: 1, 2, 3, 6, 10, 15.

Крок 3. Зменшуйте тривалість анімації

Скорочуйте/видаляйте не потрібні вам сцени, тут залежність проста – скоротили у 2 рази – отримали розмір у 2 рази менший.

Крок 4. Оптимізувати GIF. Вибір якості.

Є спеціальні утиліти для стиснення GIF-анімацій, наприклад, GIFsicle .

Спеціально для вас ми зробили її онлайн. Просто виберіть файл і натисніть оптимізувати.

Також ви можете керувати якістю файлу.

Для вас ми зробили три різні версії GIF-анімації для оцінки стиснення за допомогою зменшення якості:

Розмір при 100% якості: 13.3 мб
Розмір при 50% якості: 13.3 мб
Розмір за 0% якості: 10.1 мб

2019-04-04

Відвідуючи різні сайти, кожен з вас зустрічав яскраві картини, що стрибають, привертають увагу читачів gif.

Я й сама використала таку – привертала увагу до своєї форми передплати.

Але gif анімація занадто багато важить, тому сильно загальмовує завантаження блога на комп'ютер користувача.

Про цю проблему мені люб'язно повідомив сервіс Speedpage, коли я перевіряла швидкість завантаження свого блогу. Мені порадили змінити саме зображення, а не лише зменшити його розміри у html.

Зі звичайними зображеннями у мене все в порядку, я їх перед завантаженням на блог.

Ви побачили на якомусь сайті картинку gif, вона сподобалася, ви захотіли вставити її в сайдбар (віджети):

просто перетягніть зображення на комп'ютер у папку (не в документ). Пізніше відкриєте її за допомогою інтернету та отримаєте код картинки;
або правою клавішею миші відкрийте вихідний код сторінки, знайдіть код картинки і скопіюйте його (Ctrl + F, в рядок, що відкрився, вставити gif).

Як зменшити розмір gif онлайн

Зменшити розмір gif зображення як завжди - Microsoft Office Picture Manager або Paint не вийшло, картинка перестала стрибати.

Справа в тому, що gif анімація є кілька зображень, упакованих в архів (розкадрування). При зміні розміру в Microsoft Office Picture Manager або Paint частина зображень втрачається, залишається лише одне.

Тому йдемо на сервіс http://ru.toolson.net/. Він дозволяє змінити розмір gif онлайн та стиснути gif. Окремої функції стиснути немає, але при зменшенні розміру вага зображення автоматично зменшиться. Там можна картинку обрізати.

Йдемо на вкладку ЗМІНИТИ gif.

Спочатку я просто спробувала змінити розмір гіф анімації:

ВИБРАЛА файл у себе на комп'ютері (стрілку, що стрибає, розміром якої був незадоволений сервіс speedpage);

ЗАВАНТАЖИЛА анімацію;

ВИБРАЛА нову ширину і висоту (менше);

СКАЧАЛА змінений файл.

Мені не сподобалося, вийшло неакуратно.

Розкадрування gif в архіві zip

Натисніть кнопку Розкодування, файл скачається.

РОЗПАКУЙТЕ zip архів в окрему папку.

Послідовно КОЖНЕ зображення обробіть у програмі Paint. я докладно писала тут.

Нагадую:

ВІДКРИЙТЕ картинку в програмі Paint - у верхньому меню виберіть МАЛЮНОК - РОЗРІСНУТИ/НАКЛОНИТИ - ЗАВДАЙТЕ відсоткове співвідношення зменшення - OK - ЗБЕРІГТИ.

Чому я використовувала програму Paint?

У Microsoft Office Picture Manager не вдалося отримати однакову зміну розмірів. Всі картинки зменшилися по-різному, навіть тло вийшло різне – десь прозоре, на інших не прозоре. Зібрати з таких різносортних елементів гарну gif анімацію не вдалося.

Потім йдіть на вкладку Створити анімацію GIF.

Натисніть кнопку ЗАВАНТАЖИТИ, послідовно завантажте всі оброблені елементи (у мене було десять).

Введіть назву анімації та пропишіть інтервал між кадрами (маю 70). Тут можете скуштувати різні значення. Що менше інтервал, то швидше стрибатиме картинка. Змінюєте інтервал, зберігаєте та дивіться, чи правильно рухається картинка.

Також можна вказати бажані розміри, зробити симпатичну рамку та застосувати запропоновані ефекти.

Все подобається перегляд? СТВОРТИ, гіфка скачається на комп'ютер.

Як повернути gif анімацію

Іноді не потрібно змінити розмір gif. Досить просто повернути вподобану анімацію. Як це зробити онлайн?

У сервісі http://inettools.net/ виберіть вкладку ПОВОРОТ ЗОБРАЖЕНЬ

ОБЕРІТЬ зображення у себе на комп'ютері - Завантажте

Укажіть кут повороту 90, 180, 270 градусів або довільний кут =>

ПОВЕРНУТИ gif - СКАЧАТИ файл.

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

Ось таким чином мені вдалося зменшити розміри gif картинки, її вага (стиснути її). Сподіваюся, що мої зусилля позитивно вплинуть на швидкість завантаження блогу. Вміння повернути gif анімацію стане в нагоді в майбутньому.

P.S. На жаль, gif картинка відображається коректно тільки якщо ви потрапляєте на сторінку вперше. Якщо ви перегорнули, а потім повернулися, браузер надасть вам кеш сторінки. І gif картинку там видно не буде. Що з цим можна зробити, доки не з'ясувала.

P.S. Для професійного використання якнайкраще підходить Фотошоп. Ось простий.

Як змінити розмір GIF картинки - ось таке запитання дозріло у мене недавно. Чому? Читайте далі.

Доброго часу, мої друзі.

Сьогодні дві години робив GIF картинку — рекламу для свого нового щомісячного «Конкурсу коментарів», про який Ви можете прочитати в окремому розділі мого сайту

Якось пізніше, я розповім і про це. Тому я раджу Вам передплатити оновленнямого блогу.

Для тих, хто знає, як це робиться, можуть кивнути головою, погодившись зі мною з тим фактом, що така презентація робиться з окремо взятих і створених картинок, які за допомогою різних програм (я користуюся Photoshop) накладаються один на одного.
Таким чином, просто змінити розмір презентації, як у випадку зі звичайним.JPEG файлом не вийде.

Що робити, як змінити розмір гіф-файлу? Я теж днями ставив собі таке саме питання. І знайшов два шляхи вирішення цієї проблеми.

Почнемо по порядку, спосіб перший:

Цей спосіб зручний тим, що для того, щоб змінити розмір гіф картинки, Вам не потрібно встановлення додаткового програмного забезпечення. Усі операції здійснюються в режимі онлайн.

Ідемо на сайт http://www.picasion.com/ru/resize-gif/

Нашому погляду відкриється таке вікно, тут все просто:

Тут може розібратися навіть мій восьмирічний син. Я нічого не міняю там, тільки встановлюю необхідний розмір. Завантажили - зробили необхідні зміни - тиснемо по "Resize image".

Цей сервіс досить швидко змінює розмір GIF файлів. Швидко та якісно. Якість встановлюйте максимальну з можливих.

Після цього Ви побачите наступне вікно

Сервіс Вам люб'язно запропонує аж 4 різні варіанти того, що можна зробити і як використовувати даний конвертований файл.

Зараз я розповім про це детальніше.

3. HTML код для блогу/сайту: крута штука. Тобто. Ви одразу отримуєте готовий HTML код, який Ви одразу можете розмістити до себе на блог і все працюватиме так, як треба.

4. BBCode для форумів: форуми мають своє кодування, і для цього розробники зробили окрему форму. Тобто. берете цей код, розміщуєте його, наприклад, до підпису і розміщуєте якому форумі. Цей спосіб я не перевіряв, але думаю він робітник.

Я зберіг цей файл і розмістив його на блозі. Все працює. Довелося, правда, потім дещо змінити розмір файлу.
Є ще один аналогічний сервіс – складного там теж нічого немає. Думаю самі розберетеся. Ось цей сайт: http://ua.toolson.net/gifresizer/create
До речі, якщо Ви не знаєте як виміряти розміри елементів робочого столу, то є у мене стаття на блозі і про це. Читайте . Не лінійкою ж її вимірювати)))

То був перший спосіб.

Другий дуже схожий, з тією лише різницею, що для роботи нам буде необхідно завантажити ось цю програму: GIFResizer за цим посиланням: http://www.f1cd.ru/soft/base/gif_resizer/gif_resizer_110/

Завантажуємо, запускаємо програму.

В офіційних російськомовних версіях Photoshop з давніх-давен опція "Dithering" перекладається як "Дизеринг", що є, м'яко кажучи, неточністю. У цьому контексті "Dithering" означає "згладжування", згладжування переходів від одного кольору до іншого.
Оскільки GIF-файли містять обмежену кількість кольорів, для покращення виду малюнка може знадобитися створення переходів між окремими кольорами, а для цього потрібно імітувати кольори, що відсутні. Для створення цих кольорів існує опція "Дизеринг". Усього є чотири алгоритми для подібної імітації згладжування - "Без дизерингу", "Випадкове", "Регулярний" та "Шум":

Розглянемо алгоритми докладніше (сподіваюся, із режимом "Без дизерингу" все зрозуміло).

Використовуючи алгоритм "Випадкове"(Diffusion), ми можемо регулювати кількість згладжування.
В алгоритмах "Регулярний"(Pattern) та "Шум"(Noise) параметри відсутні, Photoshop все робить автоматично.

Для деяких зображень "Дизеринг" просто необхідний, але слід пам'ятати, що більше його значення, тим більше розмір файлу, т.к. він додає різнокольорові пікселі в безпосередній близькості один від одного для імітації вторинних кольорів або гладких колірних градацій.

4. Інші налаштування

"Втрати"(Lossy) - керування рівнем втрат візуальної інформації при згладжуванні, які можуть зменшити розмір файлу, а також погіршити якість картинки. Доступна за вимкненої опції "Черезрядково" (Interlaced).

"Прозорість"(Transparency) - має сенс увімкнути в тому випадку, якщо зображення містить прозорі ділянки. Алгоритми згладжування працюють за принципом опції "Дизеринг" (Dithering) і називаються так само.

5. Порівняння вихідної та оптимізованої версій

Після того, як Ви додали свої налаштування у діалогове вікно збереження для Web, з оптимізованою версією відбулися зміни, і майже завжди у бік погіршення якості. Ретельно перевірте отриманий результат, порівняйте його з вихідним кодом:

Ви можете переглянути анімацію, а також задати параметри повторів - один раз, постійно або встановити власну кількість повторів:

Якщо результат Вас задовольнив, переходьте до наступної дії – збереження анімації.

6. Підігнати оптимізацію анімації під вказаний обсяг файлу

Така опція також є при збереженні анімації у Photoshop. Ви можете задати розмір вихідного файлу, і тому Photoshop сам зробить оптимізацію, підігнавши розмір файлу під вказаний Вами.

Натискаємо на кнопку у верхньому правому кутку і вибираємо рядок "Оптимізувати за розміром файлу" (Optimize to File Size)

7. Попередній перегляд анімації в браузері, збереження оптимізації параметрів

Після того, як Ви підібрали потрібні установки, збережіть їх у наборі. Клацніть по піктограмі у верхньому правому куті вікна збереження для Web і натисніть на рядок "Зберегти налаштування":

Анімацію з нашими налаштуваннями ми можемо попередньо переглянути в браузері, натиснувши кнопку в лівому нижньому куті вікна:

Буде показана не тільки анімація, але й усі дані щодо файлу GIF - об'єм, лінійні розміри тощо, а також HTML-код. Для прикладу я взяв анімацію з цього уроку:

Якщо все подобається, зберігаємо файл. Для цього натискаємо кнопку "Зберегти" у правому нижньому куті діалогового вікна. Відкривається нове вікно, де вибираємо шлях, ставимо налаштування, як показано на малюнку (це налаштування за замовчуванням), натискаємо кнопку "Зберегти":