Як анімовані GIF-файли дійсно працюють - від Canvas Frames до LZW стиснення

Чому GIF натюрморт

Формат графічних змін був створений CompuServe у 1987 році [CompuServe, 1987]. Підтримує анімацію, прозорість та стиснення без втрат. Він обмежений 256 кольорів за кадром. Не має аудіо. Він виробляє великі файли. За кожним технічним виміром слід заміщати десятки років тому.

І все ще: Discord, Slack, iMessage, Twitter, Reddit, і email всі підтримують GIF-файли нативно. GIPHY обслуговує понад 10 мільярдів GIF на добу [GIPHY, 2020]. Формат зберігається, тому що він працює всюди, не вимагає кодека і грає автоматично. Немає іншого формату має це поєднання універсального опору і нульового тертя відтворення.

Розуміння роботи GIF-файлів корисно за межі дрібниці — пояснює, чому ваш експортований GIF є 4MB, чому градієнти виглядають смугастими, і що ви можете зробити про це.

Крок 1: Захоплення рами

Аніматор GIF - це послідовність зображень (рамок), що відображається для того, щоб затримка між кожним. Щоб створити одну з анімацій канви, потрібно захопити стан полотна на регулярних інтервалах.

У браузері це означає читання пікселів даних з елемента HTML <canvas> на кожному кадрі — зазвичай через canvas.toDataURL() або ctx.getImageData(). Анімація просувається до цільового часу, полотно рендериться, а пікселі захоплені. Ключові обмеження: ви повинні чекати на цикл фарби браузера (requestAnimationFrame) до читання пікселів, інакше ви захоплюєте буфером.

Типовий GIF на 15 FPS за 3 секунди вимагає 45 кадрів захоплення. При роздільній здатності 1080×1080 кожен кадр становить приблизно 4,7 млн пікселів.

Крок 2: Колір Квантизація

GIF підтримує максимальну 256 кольорів за кадром, що зберігається в кольоровому столі (палет). Типовий каркас полотна має тисячі різних кольорів. Зменшення до 256 без видимої деградації є найважчою частиною кодування GIF.

Стандартний підхід - це алгоритм** [Heckbert, 1982]: сортувати всі пікселі за допомогою червоного каналу, розбити список на медіан, повторювати для зеленого та синього кольору, рекурсивно ділити колір простору на 256 регіонів. Всередині регіону стає палітра. Русский EnglishРусскийУкраїнськаPolskiItalianoEspañol汉语Bahasa Indonesiaहिन्दीPortuguês日本語DeutschFrançaisภาษาไทยελληνικά اللغة العربية.

Кольорова квантизація - чому GIF-файли ручать плоскокольорову графіку, але боротьба з фотографіями і градієнтами. Понад 1080 пікселів може використовувати 500+ різних кольорів. Стиснення до 256 виробляє видимі смуги — дискретні кроки, де градієнт повинен бути гладким.

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

Крок 3: LZW стиснення

Кожні індекси пікселів кадру (переваги до 256-кольорової палітри) стискаються за допомогою******* (LZW) стиснення [Welch, 1984]. LZW будує словник повторних послідовностей за допомогою сканування даних. Коли мова йде про послідовність, яку він бачив раніше, він виводить індекс словника замість сирих байтів.

Це означає стиснення GIF є найбільш ефективним, коли є великі ділянки багаторазового кольору — тверді фони, плоскі форми, текст на рівномірній поверхні. Комплексні текстури з варіацією рівня пікселя виробляють погані коефіцієнти стиснення, оскільки словник LZW знаходить кілька повторних послідовностей.

Практичні наслідки: A 1080×1080 GIF білого тексту на чорному фоні може стискати до 200KB. Так само дозвіл ППГ1С комплексу фотографій може бути 8МБ. Розмір файлу залежить від візуальної складності, ніж на підставі дозволу або кількості кадрів.

Крок 4: Розпорядження кадрів та оптимізація

Рамки GIF можуть вказати * * * : чи очистити полотно перед малюванням наступного кадру, залишити попередній кадр видимим, або відновити до фон. Smart GIF використовує кодування** — кодування тільки пікселів, які змінилися між кадрами, а не весь каркас.

Якщо ваша анімація має статичний фон з невеликим рухомим елементом, оптимізованим GIF кодує фон один раз і тільки оновлює область, де елемент переміщався. Цей значно знижує розмір файлу. PinePaper енкодер використовує gif.js, які використовують цю оптимізацію автоматично.

Кількість

Для типової анімації PinePaper (1080×1080, 15 FPS, 3 секунди, темний фон з анімованим текстом):

Компоненти	Розмір
Сирі рамки (45 × 4.7M пікселів × 3 байти)	~634 MB
Після квантизації (256 кольорів, 1 байт/піксел)	~211 MB
Після стиснення LZW	~2-4 MB
З каркасом відрізняється	~1-2 MB

Коефіцієнт стиснення від сировини до фіналу становить приблизно 300:1 до 600:1. Більшість цього надходить від колірної квантизації (3:1) і LZW (50:1 до 100:1).

Коли використовувати GIF проти інших форматів

Видання	Кращий для	Лімітація
ППГ0С	Універсальна підтримка, автоплеєри, додатки обміну повідомленнями	256 кольорів, великі файли, немає аудіо
WebM (VP9)	Краща якість, найменші файли, веб	Обмежена підтримка в Safari, iMessage
MP4 (H.264)	Соціальні медіа, відеоплеєри	Вимагає кодека, без прозорості
АПГ	Повна кольорова анімація з прозорістю	Обмежена підтримка у літніх браузерах

GIF є правильним вибором при необхідності універсальної сумісності та автоматичного відтворення. Для якості або розміру файлів, WebM або MP4 краще.

Спробуйте

Відкрити PinePaper Studio, створити дизайн, експорт як GIF. Переглядайте зміни розміру файлів як ви:

• Збільшення кількості кадрів (більше рамок = більший файл, пропорційно)
• Додавання градієнтів (попередня квантизація = більший файл)
• Використовуйте суцільні кольори (товарівна квантизація = менший файл)
• Збільшення розміру полотна (більше пікселів за кадром = більший файл)

Кожна зміна - це вимірювання компресорної труби. Ви не просто зробите GIF — ви дотримаєте те, що теорія інформації стосується вашого дизайну.

Посилання

• CompuServe (1987). Технічна характеристика форматів графіки, версія 87а.
• GIPHY (2020). Річний звіт GIPHY: 10 Щоденні серфи.
• Гекберт, П. (1982). Кольорова квантизація зображень для каркасу Buffer Display. Комп'ютерна графіка (SIGGRAPH), 16(3), 297-307.
• Rubaxa. gif.js — JavaScript GIF encoder за допомогою Web Workers. github.com/jnordberg/gif.js.
• Вольч, Т.А. (1984). Техніка для стиснення даних високої кваліфікації. * EEE Computer*, 17(6), 8-19.

---

PinePaper's GIF експорт є безкоштовним — без водяного знака, без реєстрації. Open paper.studio/editor і експорт вашої першої анімації.