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

  1. Навіщо потрібно оптимізувати GIF
  2. Як поліпшити продуктивність сайту при використанні GIF
  3. висновок

Автор: Чапман Лівер (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-файли мають значно менший розмір:

У свою чергу MP4-файли мають значно менший розмір:

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

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

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

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

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

висновок

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

Меню сайта
Мини-профиль
  • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости
    Инструкция: как включить подсветку клавиатуры на ноутбуке Asus


    Заблокировалась и отключилась встроенная клавиатура на ноутбуке: как снять блокировку и включить? 


    Ремонт ноутбука ASUS N75S в Санкт-Петербурге (СПб): замена дисплея, замена клавиатуры, ремонт корпуса Асус N75S, замена матрицы
    Услуга Стоимость, руб. Диагностика ASUS N75S Бесплатно (500р при необходимости разбора) Профилактические работы с системой охлаждения + замена кулера 2500 р * Замена чипа (видеочипа) ASUS N75S 6000-6500 Замена

    Как поменять клавиатуру на ноутбуке самостоятельно?
    Владельцы мастерских по ремонту компьютеров часто встречаются со случаями, когда приносят ноутбук, на который была пролита какая-либо жидкость. В некоторых случаях подобная ситуация означает, что понадобится

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем более неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, плохо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения

    Как почистить клавиатуру компьютера
    С появлением компьютера человек все больше времени проводит за ним. Это и рабочий инструмент, и средство развлечения. Поэтому, совсем неудивительно, что определенные устройства, используемые для ввода

    Замена и ремонт клавиатуры для ноутбука, видео-инструкции
    Замена клавиатуры и кнопок ноутбука показано на видео с подробным объяснением процесса. Цена замены в сервисном центре от 200 рублей . Звоните по тел: +7 (812) 640-03-20 . Замена или ремонт

    4 способа, как отключить клавиатуру на ноутбуке
    Если у вас есть ноутбук, то клавиатура и тачпад на нем являются важными составляющими, без которых работа на устройстве будет вызывать сложности. Конечно есть альтернативы в виде клавиатур и мышей, которые

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем более неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, плохо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения

    Как правильно и быстро снять клавиши с клавиатуры ноутбука
    При продолжительной и тем немало неаккуратной эксплуатации ноутбука часто образуются проблемы с клавишами. Они могут залипать, нехорошо нажиматься, а некоторые клавиши и вовсе могут сломаться. Для решения