Зміна gif анімації. Змінюємо розмір анімації у форматі GIF




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

Очевидний спосіб – стиснути gif-файл у фотошопі. Але програма встановлена ​​не всіх, причому вона велика за розміром і вимагає серйозних ресурсів комп'ютера (ОЗУ, відеокарта, процесор). Розглянемо альтернативні способи, як швидко відредагувати GIF.

Небагато технічних моментів

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

  1. Розміри.

Потрібно максимально зменшити розмір самого зображення. Найбільш прийнятним вважається розмір сторони трохи більше 640 пікселів.

  1. Число кадрів.

Кількість кадрів, що відтворюються за секунду, також впливає на кінцевий обсяг файлу. По суті, скільки разів ви скоротите кількість кадрів, у стільки разів зменшиться розмір gif.

При цьому рекомендується скорочувати кадри пропорційно, щоб не пошкодити якість зображення. Наприклад, якщо в анімації 40 кадрів, потрібно зменшувати з ряду кадри, які зможуть поділити це число. Для 40 - це 1, 2, 4, 5, 8, 10 і т.д.

  1. Тривалість відео.

Очевидно, що чим довше триває анімація, тим вона об'ємніша. Вирізайте непотрібні сцени та максимально скорочуйте час відтворення.

  1. Якість.

Сервіси, які будуть описані нами нижче, пропонують стиснути gif із втратою або без втрати якості. У першому випадку розмір файлу зменшиться.

Ezgif.com

Безкоштовний сервіс, де можна стиснути gif онлайн. Обмеження розміру вихідного файлу – 35 Мб. Відразу після переходу на головну сторінку нам пропонують завантажити gif-файл.

Сервіс має багато інструментів для редагування. Нам же важливе нижнє меню – понад десять методів для стиснення файлів. Описи до них знаходяться на головній сторінцісайту. На жаль, описи на англійській мовіяк інтерфейс.

Виберемо перший спосіб - стиснення за кольором. Внизу є рядок, у якому можна задати кількість кольорів. З 256 залишимо 200 кольорів (за замовчуванням). Дивно, але обсяг файлу зменшився з 0,96 до 1,02 Мб. При цьому якоїсь помітної втрати у кольорі не виявилося.

А от коли ми стиснули анімацію, прибравши з неї кожен 4 кадр (frame), обсяг зменшився майже на 25%.

В принципі, для таких простих анімацій будь-який метод стиснення не є критичним для якості. Сміливо можна пробувати різні способи і досягти мінімального обсягу файлу.

IloveIMG

Тепер спробуємо російськомовний сервіс для стиснення gif-файлів. На початковій сторінці потрібно вибрати потрібну анімацію.

Сервіс не пропонує інструментів стиснення, як попередній. Подивимось що вийде.

Наша анімація була стиснута на 12%. Як запевняє сервіс, без втрати якості та з вибором оптимального розміру. Справді, жодних змін як ми не помітили. Перевага – дуже простий інтерфейс, швидке стиснення та моментальне збереження на диск.

Online-Conventering

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

На жаль, ресурс не показує результатів онлайн. Потрібно завантажити оптимізований файл та перевірити якість стиснення самостійно.

Наша вихідна анімація з Вінні-Пухом "важила" трохи більше 120 Кб. Стиснутий до 80% якості файл став обсягом майже 99 Кб. Результат кращий, ніж у сервісу IloveIMG. Але не забуваємо, що при цьому ми втратили 20% від якості.

Compressor.io

І знову англомовний сервіс. На головній сторінці клацаємо Try it!

Спробуємо стиснути більший гіф-файл. Ресурс обмежує обсяг завантажуваних гіфок до 10 Мб. Виберемо середню об'ємом 4.32 Мб.

Compression.io зменшив файл на 61% - до 1.69 Мб! При цьому якихось суттєвих втрат ми не помітили.

Цікава можливість – порівнювати вихідний файл із отриманим «в реальному часі». Можна пересувати курсор за зображенням – з оригінального до стисненого, і бачити при цьому зміни. Також пропонується завантажити файл на комп'ютер, Google Drive чи Dropbox.

GIF Compressor

Сервіс цікавий тим, що дозволяє стискати файли до 50 Мб. Спробуємо стиснути попередній файл та порівняємо результати з Compressor.io. Дивно, але цей ресурс стиснув нашу анімацію також на 61%.

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

Підсумки

Зайвим буде розглядати стороннє програмне забезпечення за наявності такого розмаїття онлайн-сервісів. Ми спробували роботу п'яти ресурсів – трьох російськомовних та двох англійською мовою. Усі послуги пропонують приблизно однакові інструменти. Єдино відрізняється Ezgif.com, де можна вибрати метод стиснення (зменшення кількості кадрів, кількості кольорів тощо).

З усіх розглянутих нам особисто найбільше сподобався Compressor.io:

  • нескладний інтерфейс;
  • візуальність (можливість переглянути результати стиснення);
  • великий відсоток стискування;
  • невеликі втрати за якістю.

GIF Compressor підійде для тих, кому потрібно оптимізувати великі gif-анімації. До того ж він показує добрі результати, аналогічні Compressor.io. Сервіс IloveIMG хороший тим, що не зменшує якість стиснених зображень. На ресурсі Online-Conventering можна вибрати відсоток втрати якості – від 1 до 100.

В офіційних російськомовних версіях 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-код. Для прикладу я взяв анімацію з цього уроку:

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

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

Інструкція

Завантажте файл gif, розмір якого збираєтеся зменшувати, у програмі ImageReady за допомогою команди Open (Відкрити), яку можна виявити в меню File (Файл).

Якщо вам потрібно змінити розміри файлу gif, знайдіть у меню Image («Зображення») команду Image Size («Розмір зображення») та змініть розмір за її допомогою. Щоб це зробити, вкажіть новий розмір у полях Width (Ширина) і Height (Висота) у вікні налаштувань команди. Якщо потрібно зменшити картинку наполовину, введіть у поле Percent («Відсотки») значення 50. Натисніть кнопку ОК.

Обріжте картинку, якщо потрібно. Це робиться за допомогою інструмента Crop Tool («Обрізання»), який можна знайти на панелі «Інструменти» у лівій частині вікна програми. Клацніть лівою кнопкою миші по полю картинки, що редагується. Затисніть ліву кнопку миші та розтягніть рамку інструменту. Області зображення, які будуть обрізані, потемніють. Використовуйте редагування, натиснувши клавішу Enter.

Щоб зменшити вагу файла gif, приберіть з нього зайві кадри. На панелі «Анімація» виділіть непотрібний кадр і натисніть на зображення в нижній частині панелі. Нова вага файлу видно під вікном, у якому відкрито файл.

Оптимізуйте файл. Для цього у вікні відкритого документа клацніть по вкладці 4-UP, виберіть найбільш підходящий вам варіант із чотирьох показаних і виділіть його.

Вибрану версію gif-файлу збережіть командою Save Optimized («Зберегти оптимізований») з меню File («Файл»). Якщо ви не бажаєте замінювати попередня версіяфайлу нової, збережіть зменшене зображення командою Save Optimized As («Зберегти оптимізований як»), яка знаходиться в тому ж меню «Файл». Вкажіть місце на жорсткому диску, куди зберігатимете зменшений gif, вкажіть ім'я файлу. Натисніть кнопку «Зберегти».

Корисна порада

Якщо все, що вам потрібно – це змінити лінійні розміри картинки, скористайтесь простою утилітою GIF Resizer.

Утиліта являє собою маленький файл з розширенням exe. Двічі клацніть лівою кнопкою миші на іконці цього файлу.

Клацніть праворуч від поля Source GIF Image File. У вікні виберіть файл, який потрібно зменшити.

Натисніть кнопку праворуч від поля New GIF Image File. Вкажіть, куди зберігати зменшений gif та введіть ім'я файлу.

У полях Width і Height вкажіть ширину та висоту картинки. Поставте галочки у чекбоксах Keep Aspect та Good Quality. Це дозволить вам отримати на виході картинку пристойної якості у пропорціях вихідника. Натисніть кнопку Resize.

Джерела:

  • Утиліти для зміни розміру зображень у форматі gif
  • як зменшити розмір gif
  • Чим обрізати gif анімацію

Анімовані графічні файли з розширенням GIF є дуже популярними в інтернеті. Однак на багатьох сайтах все ще існують обмеження на розмір ГІФ, що завантажуються. Тому ми хочемо уявити способи, якими можна змінити висоту і ширину таких зображень.

Оскільки GIF є послідовністю кадрів, а не окремою картинкою, змінювати розмір файлів у такому форматі непросто: знадобиться просунутий графічний редактор. Найпопулярнішими на сьогоднішній день є Adobe Photoshopта його вільний аналог GIMP – на їхньому прикладі ми покажемо вам цю процедуру.

Спосіб 1: GIMP

Вільний редактор графіки ГІМП відрізняється великим функціоналом, який мало чим поступається платному конкуренту. Серед опцій програми є можливість зміни розміру «гіфок». Це робиться так:

  1. Запустіть програму та виберіть вкладку "Файл", потім використовуйте опцію «Відкрити».
  2. За допомогою вбудованого в GIMP файлового менеджерадістаньтеся до каталогу з потрібним зображенням, виділіть його мишкою та скористайтеся кнопкою «Відкрити».
  3. Коли файл буде завантажено до програми, виберіть вкладку «Зображення», Потім - пункт «Режим», в якому відзначте варіант "RGB".
  4. Далі зайдіть у вкладку Фільтри, натисніть на опції «Анімація»та виберіть варіант «Розоптимізувати».
  5. Зверніть увагу, що з'явилася нова відкрита вкладка у вікні GIMP. Усі наступні маніпуляції слід проводити лише у ній!
  6. Знову використовуйте пункт «Зображення», але цього разу виберіть опцію "Розмір зображення".

    З'явиться спливаюче вікно з налаштуваннями висоти та ширини кадрів анімації. Введіть потрібне значення (вручну або за допомогою перемикачів) та натисніть кнопку «Змінити».

  7. Щоб зберегти результати, перейдіть за пунктами "Файл"«Експортувати як…».


    З'явиться вікно вибору місця зберігання, імені та розширення файлу. Перейдіть до каталогу, куди хочете зберегти змінений файл і перейменуйте його, якщо потрібно. Потім натисніть "Виберіть тип файлу"і позначте у списку варіант «Зображення GIF». Перевірте налаштування, після чого натисніть кнопку «Експортувати».
  8. Відобразиться вікно параметрів експорту. Обов'язково відзначте пункт «Зберегти як анімацію», інші параметри можна залишити без змін. Скористайтеся кнопкою «Експорт», щоб зберегти зображення.
  9. Перевірте результат роботи – зображення поменшало до вибраних розмірів.

Як бачимо, із завданням зміни розмірів GIF-анімації GIMP справляється чудово. Єдиним недоліком можна назвати складність процесу для недосвідчених користувачів та гальма у роботі з об'ємними зображеннями.

Спосіб 2: Adobe Photoshop

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

  1. Відкрийте програму. Насамперед виберіть пункт «Вікно». У ньому зайдіть у меню "Робоче середовище"та активуйте пункт «Рух».
  2. Далі відкрийте файл, розмір якого хочете змінити. Для цього виберіть пункти "Файл"«Відкрити».


    Запуститься «Провідник». Перейдіть до папки, в якій зберігається цільове зображення, виділіть його мишкою і натисніть кнопку «Відкрити».
  3. Анімація буде завантажена у програму. Зверніть увагу на панель «Шкала часу»— на ній відображені всі кадри файлу, що редагується.
  4. Щоб змінити розмір, використовуйте пункт «Зображення», у якому виберіть варіант "Розмір зображення".


    Відкриється віконце налаштування ширини та висоти картинки. Переконайтеся, що одиниці вимірювання встановлені в положення «Пікселі», потім введіть у поля "Ширина"і «Висота»потрібні вам значення. Інші налаштування можна не чіпати. Перевірте параметри та натискайте "ОК".
  5. Щоб зберегти отриманий результат, скористайтесь пунктом "Файл", у якому виберіть варіант «Експортувати», а далі - "Експортувати для Web (стара версія) ...".


    Налаштування в цьому вікні також краще не змінювати, тому відразу натискайте на кнопку «Зберегти»внизу робочої областіутиліти експорту.
  6. Виберіть у «Провіднику»розташування зміненого GIF, перейменуйте при необхідності і натисніть «Зберегти».


    Після цього Photoshop можна закрити.

  7. Перевірте результат у зазначеній папці під час збереження папки.

Фотошоп є більш швидким і зручний спосібзміни розміру 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 (Параметри).