Як підвищити продуктивність сайту при використанні 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-відео.

smart-web.com.ua
ЯкпідвищитипродуктивністьсайтупривикористанніGIF
Если вы заметили ошибку, выделите необходимый текст и нажмите Ctrl+Enter, чтобы сообщить об этом редакции
Актуальность
(0 оценок)
Автор
(0 оценок)
Изложение
(0 оценок)
Я рекомендую
Пока никто не рекомендует
Спорт
В субботу, 14 сентября, николаевская команда участвовала в международном чемпионате по джиу-джитсу Ukraine National Challenge Odessa. Об этом сообщает тренер команды South Guard Евгений Тютюн на своей странице в Фейсбуке. Так, николаевцы завоевали 6 золотых, 7 серебряных и 7 бронзовых наград. "Сегодня выступали на Ukraine National Challenge Odessa.Наша команда завоевала сегодня 20 медалей:6 золотых, 7 серебряных, 7 бронзовых. Все получили соревновательный...
Общество
На этой неделе стартует Всеукраинская неделя противодействия буллингу. Об этом сообщает пресс-служба Главного территориального управления юстиции в Николаевской области. Так, в течении недели по всей стране будут проводить беседы со школьниками, родителями и педагогами по поводу буллинга. Главная цель акции - научиться противодействовать буллингу, разъяснить механизмы реагирования на такие случаи и сформировать у детей и родителей чувство толерантности по...
Криминал
В Николаеве избрали меру пресечения мужчине, который совершил разбойное нападение возле предприятия "Зоря-Машпроект".  Об этом в понедельник, 16 сентября, сообщила пресс-служба Ленинского районного суда.  Как сообщается, 12 сентября злоумышленник, находясь возле центрального входа предприятия "Зоря-Машпроект", увидел мужчину, с которым ранее не был знаком. Он подошел к незнакомому, пока тот находился возле своей машины. После чего, разбойник накинул на шею...
Общество
В понедельник, 16 сентября, глава Объединённой еврейской общины Украины Михаэль Ткач дал комментарий по поводу осквернения памятника жертвам Холокоста на Николаевщине. Текст он разместил на своей странице в Фейсбуке. По словам Михаэля, комментарий у него попросило авторитетное немецкое издание Deutsche Welle.  Глава еврейской общины сообщает, что по их данным уровень антисемитизма в Украине значительно снизился. Также, он сообщает, что в Николаевской облас...
Происшествия
В воскресенье, 15 сентября, в Николаевской области дважды горел Балабановский лес. Об этом сообщили в отделе коммуникации ГУ ГСЧС Украины в Николаевской области. Первое сообщение о пожаре поступило в 6:14. На место прибыл дежурный караул 5 государственной пожарно-спасательной части. Выяснено, что горела хвойная подстилка на площади 100 кв. м, В 06:30 возгорание локализовали, а в 08:15 - ликвидировали. Совместно с пожарными пожар тушили и работники лесхоза....
Происшествия
В Николаеве полиция задержала активиста местной ячейки «Правого сектора» Александра Грищука, которого разыскивали с 2014 года за уклонение от наказания в виде лишения свободы. Об этом сообщает «Преступности.НЕТ». Напомним, Грищук, который известен в определенных кругах под прозвищем «Македонец», был осужден к лишению свободы по части 2 статьи 307 Уголовного кодекса Украины («Незаконное производство, изготовление, приобретение, хранение, перевозка, пересылк...
Общество
В Николаеве платформа "МрійДій" установила 16 новых парковок для велосипедов на Соборной. Об этом 0512 сообщил основатель платформы Максим Бревда. "Теперь можно на любом квартале центральной улицы комфортно припарковать свой велосипед и зайти в магазин или кафе. Все точки поставлены за счёт бизнеса, каждая компания оплатила свою точку с тремя велопарковками", - сказал предприниматель. Также, по его словам, в проекте не привлекались средства из общего бюдже...
Общество
В сентябре Николаев торжественно праздновал День города. Стоит сказать, что этого события николаевцы ждали с нетерпением.  К счастью, празднованием 230-летия Николаев этой осени не ограничивается.  Редакция 0512 решила подготовить подборку из 8 самых долгожданных событий осени в городе. Международный форум TRANS EXPO Odessa-Mykolaiv 2019 В Николаеве пройдет масштабный международный форум TRANS EXPO ODESSA-MYKOLAIV 2019 и крупнейшая в Украине традиционная с...
Новости компаний
Если хочешь, чтобы обувь служила долго, ухаживай за ней. Так многим из нас говорили родители. Уход заключался в сушке на батарее или со скомканной газетой, ежедневном намазывании обувным кремом и чистке от грязи. К сушке обуви стоит подойти со всей ответственностью, т.к. неправильная процедура не только испортит внешний вид обуви, но и значительно сократит срок службы. Наше решение в сушке обуви поразит вас. Супер-сушилка для обуви Shoes Drying – настоящая...