Як підвищити продуктивність сайту при використанні GIF - 0512.com.ua

Як підвищити продуктивність сайту при використанні 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 оценок)
Я рекомендую
Пока никто не рекомендует
Общество
Проблема мусора в современной Украине, а тем более в Николаеве, очень актуальна, так как нередко можно встретить идя по улице мини-свалки и пакеты-одиночки, которые благодаря ветру кочуют с места на место. Почему-то у части современных николаевцев нет отточенного автоматизма кидать мусор в урны, что уж говорить, про его сортировку. Иногда во время уборки маленьких участков, активисты собирают десятки мешков различных отходов, особенно это касается парковых...
Политические новости
Политолог Павел Рудяков считает, что кому-то выгодно тянуть Юрия Бойко вверх. Антирейтинг власти - 70-75%, рейтинг оппозиции в лице Юрия Бойко - 10. Возможно ли такое? Об этом сообщает gazeta.ua со ссылкой на блог политолога Павла Рудякова на Korrespondent. Однако, такой высокий показатель у Бойко, по его мнению, всего лишь очередной пример политических манипуляций с использованием социологии. «Даже если рассматривать всерьез мифическую перспективу прохожд...
Общество
Практически у каждого украинца есть какой-то знакомый, который решил не вкладывать путём налогов деньги в развитие родной страны, а работать за рубежом. Зачастую, украинцы сбегают в соседнюю страну - Польшу.  Редакция 0512 уже пыталась разобраться в причинах столь интенсивной эмиграции с целью заработка в других странах, однако много кого интересует, как ощущает себя переехавший человек. Публикуем полное интервью с нашим собеседником Алексеем, который уже...
Культура
26 марта в 13.00 в Николаевском областном художественном музее им.В.Верещагина откроется выставка художественных изделий мастеров Николаевщины «ДИПТИХ-ART». Об этом 0512 сообщил Николаевский областной центр народного творчества и культурно-просветительной работы.организаторы мероприятия, который является организатором выставки.  «ДИПТИХ-ART» — творческий проект, направленный на популяризацию традиционного и современного любительского искусства Николаевщины...
Происшествия
В четверг, 20 марта, на Николаевщине группа пиротехнических работ уничтожила авиабомбу времен Второй мировой войны. Об этом сообщает пресс-служба ГУ ГСЧС в Николаевской области.   Сотрудниками СБУ была обнаружена авиабомба весом 50 килограммов в с. Михайло-Ларино в Витовском районе. О находке сразу сообщили спасателям. Отмечается, что рядом с местом находки расположена грунтовая дорога и по ней нередко движется транспорт, поэтому это была потенциальная опа...
Культура
В субботу, 23 марта, в Николаеве будут представлены скандально известные работы иллюстратора Александра Грехова "Квантовый скачок Шевченко". Об этом сообщают организаторы импровизированной выставки в соцсети Facebook. По словам активистов, проект «Квантовый скачок Шевченко» - это сплав свободомыслия и науки, это попытка осовременить старый и архивировать популярные культурные образы. Это путешествие во времени, пространстве, измерении с украинским Вергилие...
Происшествия
В четверг, 21 марта, в центре Николаева столкнулись "ВАЗ" и "Мерседес". Об этом сообщает корреспондент 0512. Автомобили двигались по ул.Соборной в сторону ул.Рюмина. Перед перекрестком с ул.Фалеевской, водитель автомобиля "ВАЗ" стал перестраиваться для поворота налево, но зацепил во время маневра "Мерседес".  В результате ДТП никто не пострадал. Движение на данном участке затруднено.  Читайте также: На Николаевщине при пожаре погиб 4-летний мальчик, - ФОТО...
Общество
В скором времени в Николаев доставят 23 автобуса, приобретенные на условиях финансового лизинга. Об этом сообщает отдел информационного обеспечения департамента городского головы. Во время открытой встречи с николаевцами, посвященной отчету о работе за 2018 год, Александр Сенкевич отметил, что в рамках городской стратегии по улучшению качества пассажирских перевозок была запущена работа коммунального предприятия «Николаевпастранс». Недавно для него на усло...
Спецпроект 0512
В специальном проекте 0512.ua продолжает рассказывать истории николаевцев, которые покидают свой родной город. Ранее наши корреспонденты писали про три истории переезда. В этом материале мы расскажем, для кого Николаев стал вторым домом, почему некоторые скучают больше по Шри-Ланке и насколько развита культура в городе Корабелов.  Юрій Коваленко Я в Миколаєві жив 4 роки, а народився в місті Амвросіївка, Донецької області. В гарне місто Корабелів – Миколаїв...