Автор: Чапман Лівер (Chapman Lever), директор по маркетингу в Rigor, США. Відповідає за просування ідеї важливості веб-продуктивності. Юзабіліті-євангеліст. Працює з інтернет-організаціями по всьому світу.
Формат GIF (англ. Graphics Interchange Format) був розроблений в 1987 році. За 30 років він практично не змінився. Завдяки своїй простоті, а також підтримки в багатьох сервісах, він як і раніше широко використовується - незважаючи на зростання JPEG і PNG.
Однак це не найпродуктивніший формат зображень. При використанні гифок на сайті їх потрібно оптимізувати, щоб вони не погіршували продуктивність ресурсу.
У даній статті ми торкнемося основних способів оптимізації 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-зображення:
MP4-відео, створене з GIF:
Розмір оригіналу становив 100 KB. В результаті конвертації був отриманий файл, розміром 23 KB (на 75% менше вихідного):
висновок
GIF - найстаріший формат зображень, який як і раніше популярний, завдяки його простоті, широкої підтримки і можливості використання в якості анімації. Незважаючи на позитивні сторони, гифки зазвичай являють собою файли великого розміру. Їх використання призводить до збільшення розміру веб-сторінки і уповільнення швидкості її завантаження. В результаті погіршується досвід взаємодії користувачів з сайтом. Щоб поліпшити продуктивність ресурсу, статичні GIF потрібно оптимізувати, а замість анімованих - використовувати більш сучасні формати, такі як HTML5 / MP4-відео.