Як підвищити продуктивність сайту при використанні GIF

Формат GIF (англ. Graphics Interchange Format) був розроблений в 1987 році. За 30 років він практично не змінився. Завдяки своїй простоті, а також підтримки в багатьох сервісах, він як і раніше широко використовується – незважаючи на зростання JPEG і PNG.

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

Ми торкнемося основних способів оптимізації GIF-зображень – як статичних, так і анімовані. Ми також розглянемо відмінну альтернативу цього формату, яка дозволяє уникнути роздування розміру сторінки. В этой статья компания smart-web расскажет как правильно использовать GIF изображения, при этом услуги по созданию и продвижению сайтов не будут уступать по качеству.

Навіщо потрібно оптимізувати GIF

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

Як поліпшити продуктивність сайту при використанні GIF

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

Два методи стиснення зображень

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

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

Оптимізація статичних GIF шляхом конвертації в PNG

Найпростіший спосіб поліпшити продуктивність сайту – це використовувати PNG замість GIF. Хоча ці формати дуже схожі, PNG розмір файлу після стиснення буде на 5-25% менше, ніж у аналогічного GIF-файлу.

Для стиснення GIF без втрати якості використовується алгоритм LZW, створений у 70-х роках минулого століття. Сучасні технології стиснення є більш продуктивними, ніж LZW. При оптимізації PNG якраз використовуються нові алгоритми.

Для перетворення GIF в PNG можна використовувати будь онлайн-конвертер з підтримкою цієї функції.

Оптимізація анімованих GIF

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

• Оптимізація з втратою якості
• Конвертація анімованих GIF в HTML5-відео

Оптимізація з втратою якості

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

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

Так як анімовані GIF являють собою серію окремих GIF, техніки стиснення з втратою якості можна використовувати, щоб скоротити розмір файлу спільного за рахунок зменшення кожного з вхідних в нього файлів. Справитися з цим завданням допоможе сервіс Gifsicle.

Конвертація анімованих GIF в HTML5-відео

Хоча розмір GIF можна зменшити з допомогою стиснення, отриманий файл може бути як і раніше занадто великим. Формат GIF ніколи не призначався для зберігання відео. Те, що ми зараз розглядаємо як анімацію, це результат спроби зменшити витрати на зберігання та передачу декількох зображень з одними і тими ж метаданими. На сьогоднішній день є ще один варіант, який дозволяє значно зменшити розмір GIF-файлу (до 95%) – конвертація його в HTML5.

HTML5-відео – це термін, яким позначається здатність браузера програвати відео, використовуючи тег <video>. При цьому відпадає необхідність у використанні зовнішніх плагінів.

Після появи HTML5 в 2009 році в галузі велися активні дебати з приводу того, як такі відео будуть зберігатися і кодуватися. Сьогодні ж загальноприйнятим стандартом є H. 264-кодоване відео, яке зберігається в MP4-контейнері. У свою чергу MP4 файли мають значно менший розмір:

Є безліч способів конвертувати анімовані GIF в MP4. У їх числі – інструменти ffmpeg і Cloud Convert. Використовуючи останній, ви зможете бачити, наскільки зменшиться розмір файлу після конвертації.

Розглянемо конвертацію на прикладі. Нижче показано початкове анімоване GIF-зображення:

гиф1

MP4-відео, створене з GIF:

гиф2

Розмір оригіналу становив 100 KB. В результаті конвертації був отриманий файл, розміром 23 KB (на 75% менше вихідного).

Висновок

GIF – найстаріший формат зображення, який як і раніше популярний, завдяки його простоті, широкої підтримки та можливості використання в якості анімації. Незважаючи на позитивні сторони, гіфки зазвичай являють собою файли великого розміру. Їх використання призводить до збільшення розміру веб-сторінки і уповільнення швидкості її завантаження. В результаті погіршується досвід взаємодії користувача з сайтом. Щоб поліпшити продуктивність ресурсу, статичні GIF потрібно оптимізувати, а замість анімованих – використовувати більш сучасні формати, такі як HTML5/MP4-відео.